I'm currently developing a website/webapp (I don't really know the clear distinction between it) for my school project. Initially I was planning to develop entirely through just HTML/CSS and JS, however, my adviser told me to use react framework for parts of the pages instead of just doing it with Java for the sake of simplicity. This has been really messing me up since I have no background in web development and I'm confused in general.
I currently have all of the HTML pages styled with CSS, and I was able to transition part of the web-app to react using create-react-app. However, I have no clue how to connect these two.
I created the my-app folder inside the main directory which contains most of the HTML folders, but how would I go by to
1. Access the react app from the HTML page?
2. Access the HTML page in the main directory from the react app?
Following is my directory as a reference
mainDir
|_____bunch of html files
|_____css //contains all css files
|_____img // contains all images
|_____my-app
|____all the files created by create-react-app
Approaches I have tried:
- using the in the HTML pages in the main directory to jump to index.html in the my-app file to load the app
- changing the file path on the tag inside the App.js render() function of each class to something like ../../welcome.html which is the relative path to an HTML in the main directory.
Thank you for your help in advance. I'm welcome to any and all suggestions! If there isn't enough information to assess the situation, please let me know!
Checkout
This Example source code, from React.js: "Add React in One Minute" guide.
What is it?
It's a super bare-minimum implementation of React using:
1 x .html file
1 x .js file
Given your current setup, I'd say it's a lot simpler than trying to incorporate create-react-app.
Let me know if this helps; I'm happy to delete this if it's not useful.
Related
I am trying to add/import js file in my React project, in a functional component to be exact. I know that there are some answers for this question (sort of this question) out there on stackoverflow but I am not able to use any of the solution or may be I just didn't find correct one yet. What I am trying to do is that I have a js file which I want to keep in src folder and not public if possible. So the myAnimation.js file is in src/assets/js/ folder. Now how can I import and run this file in my React project's functional component?
Basically I want to add this animation in my app : https://codepen.io/jasperlachance/pen/QNMwBg
So there are three js file in the codepen which I want to download and save it in my project instead of using the CDN links that this codepen has. So what would be best approach to have the three js files downloaded in my project and run it on a specific component lets say MyComponent which I import on route MyRoute. Also, I am using TypeScript. So how can I import js files and make them run one after another once the component is loaded/mounted and it has mounted/created html elements?
Thank you for your time in advance.
I know react is for Single Page Application. I have already build a complete application. I have a particular 3rd party integration that requires javascript and css files. I cannot add those external scripts as it breaks my entire application by overriding css and js.
I need to have a separate admin.html file which can have its own css and javascript tags. I do not want any conflict with my react app which renders on index.html
I tried to eject create-react-app and add a new admin.html.
https://github.com/facebook/create-react-app/issues/1084#issuecomment-568550609
But it uses only one page(index.html). This will not help me because I need completely a separate html file which I can import any javascript or css freely without any conflict on my index.html
Currently the possibility I thought was to create a separate react application just to render to this admin.html. So that there won't be any conflicts between javascript and css. But I want to know if there is an alternate way that I can achieve it in create-react-app. If so, simple example would be greatly appreciated.
PS: I need to redirect from one of components in my application to this new view admin.html with some data
We received a simple app from an over-seas developer. This application runs on a subdomain:
IE: https://balance-sheet.clientdomain.com/
We have access to the files, but when we try and move the files into a subdirectory:
IE: https://www.clientdomain.com/balance-sheet/
Then the application does not run any more.
We have tried to edit several of the javascript files to reference the new location to address the errors that were being produced. However even after the errors were fixed the app still does not run.
I have lots of dev experience, but none with the React JS stuff. Do we need original files to re-deploy? Is it possible to edit the current files to make this work?
This project is so simple, it is a basic balance sheet for training purposes.
Below is a screenshot of the app and then the file-system.
Should I provide any links or files of the actual project?
I'm really just first trying to get a feel for the options here...
Thanks all!
Add <base href="/subdir/"> in the head section of index.html and change subdir to your sub directory name. Please refer this link
I got a bootstrap theme that consists of HTML, CSS and Javascript. Now, I want to implement it (or let's say make it functional) in Vue. I have my index.html file that contains the container and it works. Now, my theme does have an index.html file as well. I just thought I can copy the whole file into the Vue-index.html and add the div with the id "app" around the area that changes the content. But it does not work. Basically, Vue does not load any external css or js files even though I reference them correctly (with relative reference using the dot: ./assets/css/style.css). It works inside a .vue-file (i.e. component) but not inside the index.html. What do I do wrong?
Yep, beginner here.
When you put them inside your index.html they are not compiled.
You can read about it HERE
Your index.html is something called a target. Vue uses this file as a mounting point for the rest of the application, so it's kept relatively clean, most likely with just metadata and a DOM mounting point. It works by loading the index.html in the browser and then mounting your Vue application on top of it.
If you're trying to apply some styles to a Vue application/components, your best bet is to modify *.vue files inside the app source of your Vue project (typically, /your-project/src). They will contain snippets of relevant sections/components alongside their logic (JavaScript) and styles (CSS/Sass), provided your project uses Single-File Components format.
For future reference:
It's hard to offer a solution without knowing the structure of your project, what type of components you are using, or even having code samples to get an idea of how things are working inside.
We'd need more information to be able to help you more accurately, so maybe you could create a lightweight demo on an interactive platform like codesandbox.io?
I'm using appjs (with nodejs + chromium) in my desktop app. I need to include js files and call functions defined in those files in my app.js file (mainly in menu created using app.createMenu(..) ). So I tried to include the files using the below code given in http://appjs.org/, http://comments.gmane.org/gmane.comp.lang.javascript.nodejs/45736, but it's not working:
var appjs = require('appjs');
// serve static files from a directory
appjs.serveFilesFrom(__dirname + '/content');
Is there anything else need to be added to make this code working?
Please help me.
Thanks in advance.
.serveFilesFrom() does nothing more than serve static assets in the content directory. By static, this means CSS, HTML, and images as well as client-side JavaScript.
You still have to handle requests and dependency management on your own. This is simple enough to grasp, though.
A good way to go about it would be to start off developing your app using one of the existing starter package distributables, available on the AppJS homepage (make sure you choose the right one for your operating system), as it will have all the boilerplate code and configuration written for you.