I've created the frontend of various apps by using React where I was fetching data from some REST API someone else had created.
Regarding Node I've only used it once, in that occasion I did not use any frontend framework just vanilla JS and jQuery, and I was doing server-side rendering of the pages.
Now I want to create a simple MERN application and I am not completely sure that I'm aware of all the choices regarding the combination of frontend and backend and which one should be used when.
It would be really helpful if I could see a complete list of all the possible ways React and Node can be combined to create a full app.
If you are using front-end frameworks you use backend servers as an API. Like if you use React framework you use axios to handle http requests to your node js (express) server. But if you are using vanilla js, ejs and using server side rendering you can directly render views from your server. In case of react you can use next.js.
The project is using EJS, Express/NodeJs, MongoDB and I have added ReactJs to it.
Now I want to implement Webpack for bundling EJS and ReactJs files together.
The project eventually has to be converted to ReactJs but for now we need to Bundle EJS as well.
Is there a way I can do that? I need help.
EJS can run client-side and React can run server-side but a typical Express/EJS set up runs the EJS server side and delivers plain HTML to the client, while a typical React setup runs the React code client-side (and might add server-side rendering as a bonus).
Assuming you aren't doing anything highly atypical (in which case you really need to explain your setup in much more detail) then the short answer is: No.
You need your EJS to run server-side, so putting it in a bundle and sending it to the client is pointless.
If you want to transition from a classical server-side rendering of HTML to a React system then a typical way to do that is on a page-by-page basis. \
You can either serve up a basic static bootstrap HTML document for the pages you replace, or get creative with a SSR system for those pages (and either do some clever mixing of routing rules or just put a reverse proxy that diverts different URLs to a Next.js server or an Express server depending on if they have migrated or not).
Another approach is is to write a series of small React components that replace individual components of pages (e.g. a navbar application) and have the entry point include multiple ReactDOM.render calls for each component.
That latter approach is less suited to involving SSR at all though.
Either way: You wouldn't be sending the server-side EJS code to the client so it wouldn't be bundled with the React code.
I understand that React is frontend, and NodeJS is the backend that allows Javascript code to function outside of a browser. What I don't understand (and this is after following tutorials online on setting up a React project and a NodeJS project) is why I have to create an instance of each.
For example, in my React project, I managed to create a website. But because I needed a backend, I decided to use NodeJS. But I'm doing NodeJS tutorials, and I can create a website using NodeJS too. I'm confused because right now, it's appearing to be that React and NodeJS do the SAME THING.
I have never worked with NodeJS before so I am a bit confused. I was under the impression that I would just use NodeJS to host the backend, but after seeing that I'm literally having to create an entire website with NodeJS, I don't understand how I'm supposed to use React and NodeJS together.
How do the two, React and NodeJS, integrate together to create a fully-functioning web app? I have yet to see something online that clearly breaks down how the two interact.
React is front-end library. It provides great tooling for creatiing user interfaces. And it creates a single page application. Which means when you open a react app. It does not reload and its really fast.
While you could also use nodejs and something like handlebars to create a website. But that website would be rendered on server and then served to the user. But its alot more than that. There are a lot of things that you want to do on the server. Like authentication. You want that part to be secure. So you keep it on the server.
Now the answer to the final part of your question.
For a fully functional app. You would use react to create user interfaces. And nodejs for creating an API which your react app will call.
NodeJS is not just regular javascript, it is a javascript runtime that sits on top of a C++ engine called V8, provided by Google. Node executes outside the browser, whereas React / Vue / Angular / etc are in-browser javascript frameworks.
React is a whole separate animal; it is a framework that renders its own DOM in the browser. It is a javascript engine that is configured to optimize DOM manipulation.
While the development pattern of frontend and backend appear similar, they are doing different things. React is handling component lifecycles, applying dynamic style rules, processing in-browser data, and making API calls. Node is handling requests from the browser, coordinating access to the server's file system, managing network I-O, performing cryptographic evaluation, etc. Because of these different responsibilities, Node makes use of different dependencies (read: node modules) than a frontend framework.
Ultimately, Node and React communicate through HTTP calls (or, less frequently, through a WebSocket or SOAP protocol).
It would behoove you to read about how node works under the hood.
NodeJS is just a runtime that allows you to run javascript code outside of the browser.
In order to compile and transpile the react JS app, they use webpack and other tools which runs over NodeJS.
NodeJS will serve as your backend, whereas ReactJS will create the interface/UI where you can actually manipulate your server (nodeJS). So first you'll write your NodeJS server or API. You don't need to use ReactJS to create a frontend that would interact with your node server, like you said you can use NodeJS to create your views as well through a different library. ReactJS is just one choice of many for the front end of your NodeJS app.
The point is that react and any other SPA library is working on a client-side (browser).
React fetch and consume the data from the server API.
You don't need to use Node.js for building API. You can use various frameworks based on the technology you prefer.
If you are not familiar with the Back End, you can use https://www.npmjs.com/package/http-server to have a fake API service and can build the Front End part with it.
NodeJS is a javascript framework that allows you to create a server to serve up websites using Express or the built in libraries. It also is capable of building a website with just NodeJS.
You can take advantage of the ability to do server side rendering with a NodeJS server.
https://reactjs.org/docs/react-dom-server.html
There is a ReactJS framework called NextJS tha has server side rendering of ReactJS component.
https://nextjs.org/#features
You could potentially have some areas of your website that are built solely with NodeJS and other pages that use ReactJS and a NodeJS backend. But it is cleaner to use ReactJS for the front-end and NodeJS for the backend.
I've come across a lot of posts on Stack Overflow about Express.js being used with Angular.js and how there are two MVC components to both the client and back-end sides of the web application, but I've just become confused now. What are the components of a web application, and what does each of these two serve? What are the MVC parts for each of the client and back-end sides exactly?
Thanks in advance for any response!
In most cases, it's pretty straight forward. In my applications, it generally works like this:
Express.js provides the backend REST API
Express.js serves up the static HTML, JavaScript, CSS and image assets.
The frontend HTML/Javascript bits are written using Angular.js.
I tend not to use any of Express.js' view capabilities (the stuff that provides functionality similar to ruby on rails or Django, with templating and all that), but instead serve up a single index.html and then let Angular.js do the rest. It's very possible/typical to make an Angular.js app which has only one main HTML file and therefore the "view" pieces of express are unneeded.
Angular.js itself is structured in an MVC fashion. You have view templates and controllers which provide data to them and handle events from user interaction. The data the controllers act on from comes from the model. The model is simply a layer providing access to the API provided by the Express.js backend. This is typically done using Angular.js resources.
RESTify is another alternative to express for apps stuctured in the way I describe.
As others have recommended, just go through the tutorials on each component's website. I also found a tutorial about integrating Anguar.js and Express.js here: http://technokayiti.blogspot.no/2013/06/lesson-5-angularjs-tutorial-backend.html
I am quite new with server side programming in general and node.js in particular. Despite the several books I read about it I still can't figure out how to display an index.html in the client side, along with its css files. Is it most common to work with a ready made index.html file or perhaps to construct it on the fly using node.js? There's a big chance I'm missing something quite major here so I'll appreciate a well-explained answer...
Thanks!
Generally, if you're using Node to create some sort of web site or web app, you don't do it directly with Node. I'm going to assume that your end goal here is the website - not your own customized HTTP server that is also capable of serving websites.
So while Node does have the http library built in for serving content over HTTP, your life will probably be a lot easier if you use one of the common libraries/frameworks designed for creating websites with both dynamic and static content, such as Express.js. Using Node directly for HTTP relies more on your knowledge of the HTTP protocol and less on your knowledge of Node or HTML.
Express.js has a very straightforward guide about how to set up a simple app. If you're serving entirely static content, you can even skip the calls to app.get() and instead just set up up express.static() to point to a directory with your index.html and CSS files in it.
This might not be the answer you're looking for - you really need to decide if you're trying to learn server-side network programming, or if you're just trying to learn how to make modern/database-driven web apps. Raw Node is (usually) network programming. Express.js and similar are webapp programming.