First of all, I know the question is badly formulated. I can't think of any thing to describe the situation as I'm a beginner.
So when on cmd we type npx create-react-app myapp, this sets up the react project. Then we could do npm start and we could view the react app on localhost:3000. I wish to know why it is so. The react app is on client side, so why does it need a server? Next, I want to set up a node js server and does it need to use the same port as the react app? My guts says no. Briefly, I wish to know why react use localhost:3000 when it is client-side.
Thanks in advance
-
5It's a development server, for reviewing the results while you're working on it locally. It's not for production use, or included in the build output.– jonrsharpeCommented Jan 31, 2020 at 21:32
-
okay, so I just have to set up the node js apart and interact with it normally from the react app?– Eye PatchCommented Jan 31, 2020 at 21:33
-
2I don't know what you're trying to do exactly, but possibly. If you mean you'll have a Node/Express backend with your React frontend, here's one way to do it: github.com/textbook/starter-kit– jonrsharpeCommented Jan 31, 2020 at 21:35
-
Thank you very much. That is what I wish to do.– Eye PatchCommented Jan 31, 2020 at 21:37
Add a comment
|
3 Answers
Node is not required in order to use React. You do not need Node to run a React project. React is a client side UI library. What Node offers is a series of tools that allow you to be able to work with React more easily, such as Webpack (gathers code into a single bundle and listens for file changes to reload this bundle to show the updated code) and Babel (converts ES6 and JSX to plain JavaScript). npx itself is a Node tool which allows you to run a package, in this case with Create React App, which allows you to easily start a new React project. 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.
-
-
3
Jorge's answer is correct, I want to simplify it and contribute. The development server is required us to use Webpack and babel, which convert the JSX codes we wrote in React into plain javascript codes, and deliver them to the browser. You can also use the development server as a proxy.
-
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review Commented Dec 7, 2022 at 17:36
-
1If you read carefully, you will realize that what I wrote is more than just clarification.Also I don't need reputation. Sorry biased comment Commented Dec 7, 2022 at 23:27
The server you mention in your question is a development server. As the name suggests it is only for use during development.
The output of your final production bundle does not bake the dev server into it at all. It is stripped away along with more verbose error/warning logging and so on.
Now, why do I need a dev server in the first place you ask?
Hot Module Replacement is the most obvious benefit but there's other stuff like narrower browser support for faster rebuilds and more verbose logging of error and warnings from React and possibly other libraries.
