46

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

Eye Patch
  • 881
  • 4
  • 11
  • 23
  • 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 '20 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 '20 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: https://github.com/textbook/starter-kit – jonrsharpe Jan 31 '20 at 21:35
  • Thank you very much. That is what I wish to do. – Eye Patch Jan 31 '20 at 21:37

2 Answers2

49

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.

Jorge Navarro
  • 574
  • 5
  • 2
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.

Ferhat Adibelli
  • 64
  • 4
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33322279) – Aaron Meese Dec 07 '22 at 17:36
  • 1
    If you read carefully, you will realize that what I wrote is more than just clarification.Also I don't need reputation. Sorry biased comment – Ferhat Adibelli Dec 07 '22 at 23:27