34

I'm just starting the react.js tutorial, I've downloaded the files and then it mentions:

"Follow your progress by opening http://localhost:3000 in your browser (after starting the server). "

I know this may sound stupid, (bear with me since I'm a beginner with React) but how do I start the server in this instance?

Thanks.

Marc

2
  • 2
    Depends on what language you are using: github.com/reactjs/react-tutorial Commented Mar 2, 2016 at 22:02
  • How about link to the repo/tutorial?? Commented Mar 2, 2016 at 22:14

5 Answers 5

28

Pretty solid chance it's npm start from the project root.

Properly packaged modules will have some node scripts configured in package.json. It's customary to use start as the script to run the dev environment, though some might use build, dev, or other names.

Sign up to request clarification or add additional context in comments.

7 Comments

Basically I come from a creative background, having branched into front end design and development 12 years ago so having comercial experience in HTML5 CSS3 some javascript and jquery. Over the past 3 years I've gained an interest in the more in-depth side of UX strategics as well as the creative, I like to keep up to date with new and emerging technologies so am in the process of learning about creating web apps with react.js and also the theory and future implementation of web components in this field.
So coming from the front-end design and development side of things, at the moment I'm trying to peice together how one would create folder structures, and basically build a website using react.js on a node.js server in conjunction with HTML and CSS, and technically how these languages work together on a development and production level to create the finished product, or at least a prototype for further development.
It would be great to see a tutorial outlining the whole process with an example project, teaching the transfer between the typical process of building a front end prototype to this one via the use of node and react.
Yeah there are a lot of idioms that don't get communicated well to beginners. I help moderate a react developer community that's pretty friendly if you have questions, join.reactiflux.com
OK that's great, thanks Carl. Just joined. I'll carry on with the tutorials I'm working on and if I have any further questions pose them here or there. Thanks.
|
12

Here's official installation process: link, and officially recommended tutorials

# install react cli
npm install -g create-react-app

# create app
create-react-app my-react-app-name

# go to project folder
cd my-react-app-name

# install dependencies
npm install

# start live server
npm start

output:

$ You can now view my-react-app-name in the browser.

$ Local:            http://localhost:3000/
$ On Your Network:  http://192.168.0.105:3000/

$ Note that the development build is not optimized.
$ To create a production build, use npm build.

Comments

6

You can run any one of the below mentioned commands to start the node server for your ReactJS application:

  1. npm run-script start
  2. npm run start
  3. npm start

All the above commands are equivalent but people prefer the third one as it is the shortest to type on keyboard.

The start parameter in these commands maps to the start key present under scripts configuration present in package.json file of any ReactJS application. Here is a sample package.json file of my hello-world application:

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

You can see that react-scripts start is written in front of start key. So react-scripts start command will get fired when we run any of the three commands which I had enlisted in the beginning e.g. npm start.

Comments

3

I used Node to run the server. The steps I followed are:

  1. I downloaded the zip package from the Running a server section here

  2. I had the link open: http://localhost:3000/

  3. I opened up Node.js Command Prompt and navigated to the downloaded zip project. From Node example here:

    Just type the commands in the example: First npm install and then node server.js.

    See the screen shot below:

enter image description here

When I refresh the localhost web page I see the following:

enter image description here

Comments

1

Sounds like you're following the official React tutorial, in which case the instructions to start the various included server implementations are here.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.