Menu
I am new in react. I want to start a small hello world example of my own.
Most tutorials offer something like this:
app.js
var React = require('react'); var ReactDOM = require('react-dom'); var reactElement = React.createElement('h1', { className: 'header' }, 'This is React'); ReactDOM.render(reactElement, document.getElementById('react- application')); index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" /> <title>Snapterest</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.5/css/bootstrap.min.css"> </head> <body> <div id="react-application"> I am about to learn the essentials of React.js. </div> <script src="./app.js"></script> </body> </html> The problem is that that example requires nodeJS (for the require() part) and npm install and npm start.. all of that.
I can do it differently without nodeJS like this
app.js
var reactElement = React.createElement('h1', { className: 'header' }, 'This is React'); ReactDOM.render(reactElement, document.getElementById('react-application')); index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" /> <title>Snapterest</title> <script src=" /react-0.14.8.min.js"></script> <script src=" /react-dom-0.14.8.min.js"></script> </head> <body> <div id="react-application"> dsf </div> <script src="./app.js"></script> </body> </html> in this example I am using cdn in order to import the dependencies of react that nodejs should import in the npm install phase. question is - which is better? could I use just cdn and not use nodejs entirely? is it more correct to have nodejs and npm modules (or bower..) to have the react stuff?
Thanks
286
Decision-makers sometimes assume that for running Reactjs, they must have a Nodejs backend. It is not true; you DO NOT need Nodejs every time you use React. See Reactjs is a library, which is only used to render the user-interfaces of your web and mobile apps.
js makes the go-to option for running and hosting a web server for your React app. ReactJS depends on Node and npm (Node Package Manager) to notify the native side (iOS/Android) of the packages that you need to use in your app; then, it can add all the needed dependencies.
React is one of the most popular and widely used libraries (it's not a framework) for frontend development. To give you a gentle introduction, React is an open-source JavaScript library used for frontend development, which was developed by Facebook.
React Javascript is an indisputably great language for programming web pages and applications, and within that JS spectrum, it is still unchallenged. There are other players in the arena, but professional web app developers would confirm that React still remains on top of others in 2022.
The answer to the question posed in the title is no, you do not need node.js to use React on the client side.
In fact, the second example you give is doing just that - using React on the client side without any mention of node.js.
That said, there are a couple of different ways to use node.js that are very useful when building React-based applications.
Use a node.js-based build tool like browserify or webpack to bundle your client-side code into a neat, tidy package which you then serve to the client.
For example, in a project I'm working on, I use browserify to build a single Javascript file saved at public/js/bundle.js which is included via a plain old <script> tag in my index.html and it's all served by Apache. This bundle contains my application code (including some React components) along with all the dependencies for my application code (including react and react-dom, among other things). The main benefit for the client is to reduce the number of requests for the page and the bandwidth required (since I can use UglifyJS to minify the whole bundle). The main benefit for the developer is that you can use tools such as Babel to write .jsx code instead of plain old Javascript - this is a tremendous boost to productivity.
Write an HTTP Server in node.js
There has been a lot of buzz in recent years about building the entire app with node.js - client-side and server-side. The main benefit here is code reuse: imagine that you wrote a library that does something fancy with dates. If you're writing your client-side code in Javascript and your server-side code in PHP, then you'll have to rewrite that library; if you're using node.js on both sides, you only need to do it once.
Write an HTTP Server in node.js and integrate it with your React application
Single-page applications (SPAs) written with React have a problem: the page doesn't get rendered until the Javascript code is received and executed by the client. This means that clients that don't execute Javascript won't see anything - such as Google's web crawler. So if you want your page indexed, you'll need to figure out some way to serve a fully-rendered page when a client makes a request. The solution to this is server-side React rendering. This is quite a challenging topic, and I'd encourage you to do some Googling if your interested in it.
Now as for your question: which is better? As always, it depends on your needs.
One of my projects is a legacy PHP application where I'm rewriting some of the front-end code to use React components. Do I need a node.js HTTP server or server-side rendering? No, not at all. But I am using Babel and Browserify to make my life as a developer easier.
Another of my personal projects is a small SPA written using a framework called Next.js which is pretty cutting-edge, incorporating server-side rendering. I could certainly have written this project using other technologies, but I do like the shared codebase between client and server that this affords.
180
I think the current accepted answer is missing some key information. The answer is true - Node.js is not needed - but one of the first reasons you will encounter it is often used is that people prefer to use JSX format when writing React.
JSX will not work in browser just like that. You can use for example babel-standalone to help browsers cope with JSX, but that means that your JSX code will be compiled again on every pageload, which isn't efficient. What's more efficient is to compile JSX while building the site, server side. Most of such tools are node based, so that's one of the reasons Node.js is often used.
There are, of course, other reasons, JSX thing is just one of the first. There are plenty of additional javascript ecosystem related tooling that also come with Node.js. Those can be used also on, for example, java system, but it is always a bit hacky. In practice you will encounter that for different libraries and additional resources, the instructions to use tend to be given mainly for Node ecosystem, leaving others more up to the user.
43
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
