Tutorial for Beginners. Create and build your first React.js app. Deploy to the web in the fastest way possible. The process will take less than 30 minutes to complete.
Install Node.js Download your version of Node from https://nodejs.org/en/download/ and click to install it.
Open console: Start > cmd - cmd.exe
- You should have Node.js and npm (comes in the package) already installed now. Check their version numbers:
node -v npm -v
- Now install the main React.js appplication template with just one line of code:
npm create-react-app my-app
It may take a minute to have your app ready.
- Once installed, change the folder and start the application:
cd my-app npm start
Now open the browser: http://localhost:3000/ and you should see the “Welcome to React” screen.
- Customize the app now. Stop the server (click Ctrl+C twice) and type:
cd src edit App.js
Edit these two lines of code:
<h2>Welcome to React</h2> To get started, edit src/App.js and save to reload.
To something of your choice, eg.:
<h2>Hello world!</h2> This is my first React App.
Save and Exit. (You can use your preferred editor, instead. You may also want to change other files like App.css or logo.svg)
Make sure that your changes are effective: http://localhost:3000/
- Now build your app:
npm run build
This will create /build folder with your app inside.
- It’s time to show your app to the world! The fastest way to deploy is with http://surge.sh free option. Install it first:
npm install -g surge
Now just type:
email: password: project path: //path to your /build folder domain: //domain of your choice
There you have it! Your first React.js application should be online now at your chosen URL (your-domain.surge.sh).
npm create-react my-app cd my-app/src edit App.js npm run build npm install -g surge surge
That’s the easiest way to build your first React app. Good luck and have fun! Let me know if it worked for you in the comments below.
That’s React.js in a nutshell. You may also try the official tutorial.