50

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

Improve this question
4
  • 5
    It'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.
    – jonrsharpe
    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 Patch
    Jan 31, 2020 at 21:33
  • 2
    I 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
    – jonrsharpe
    Jan 31, 2020 at 21:35
  • Thank you very much. That is what I wish to do.
    – Eye Patch
    Jan 31, 2020 at 21:37

3 Answers 3

Reset to default
53

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.

Improve this answer
2
  • whats the name of server react uses?
    – cikatomo
    May 16, 2022 at 22:16
  • 3
    @cikatomo it's the webpack dev server
    – Celsiuss
    Jul 12, 2022 at 13:17
4

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.

Improve this answer
2
0

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.