I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app
and npm start
.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
You don't necessarily need a static server in order to run a Create React App project in production. It also works well when integrated into an existing server side app.
The server that you see is simply to allow for the reloading of the app in response to file changes in real time. The server is only for use in development.
Short answer: No. It is possible to run React locally without a traditional web server.
React along with other framework like angular and vue. js are traditional client side framework ,they run in browser but there are technology to run this framework on server side, and next.
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app
to create the app, then running npm build
instead of npm start
. This will compile everything into a build
directory, complete with index.html
.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With