Skip to content
← Back to Community
How to make your first React app!
Profile icon
Wumi4

What's up everyone!

Today, I will show you how to make your first React app in few simple steps! This tutorial is designed for everyone, so feel free to follow the tutorial! If you have any questions or helps, make sure comment down below!

Ok, let's prepare some stuff to create our app!

Prepare

First, we will need to make sure that nodejs and npm has been installed in your computer. If you are unsure, type the following:

node -v npm -v

This will show the version of Nodejs and npm in your computer. If not, you will need to install it. If you are using Windows or MacOS or want to build your Nodejs from source code, check out the Download page, if you are using Linux, use any package manager available on your system like apt or pacman.

If you have Nodejs and npm installed on your computer, go to a directory you want to create your first app and type:

npx create-react-app my_app

This will create a React app called my_app, Of course you can rename it to any name you like. But make sure that in your project name don't have capital letters (like myApp) or you will get this error:

Cannot create a project named "myApp" because of npm naming restrictions: * name can no longer contain capital letters Please choose a different project name.

You have done creating your first React app, now let's open the project using your favorite text editor or IDE to start coding, mine is Atom.

If you look at the project tree, you should see somewhat like this:

Screenshot_20201011_101608

In this tutorial, we will only care about the App.js and App.css in src folder since they are essential files. In the App.css file, you will see some CSS code, if you dont like it, just delete them all.

App.js file is where you edit the app content. It will look something like this (the comments are added by me, you will not see it in your project):

// Import Reactjs of course import React from 'react'; import logo from './logo.svg'; import './App.css'; // Import 'App.css' // This is where your app content located function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;

Now, we will replace the <header> tag and all its children inside by a new one created by us.

<div className="App"> <h1 className="Header">Hello, React!</h1> <p className="Desc">This is my first React app!</p> </div>

If you wonder Why i can type HTML on JS like this?, well, because of JSX, a syntax extension for JS, like template langs. Check out this to know more about JSX.

We are very done at making our app now, the only thing to do is type the following in your Terminal to start our app!

npm start

You will need to wait for a while for it to start the server and the app. It will also automatically open a new tab on your browser. If all the things works correctly, you will see the content of your app!

Screenshot_20201011_102943

You have just finished your first React app, pretty easy, right?

That's the end of this tutorial, if you have any questions, leave a comment down below. See ya at another post! ;)

Some useful links:
Reactjs doc: https://reactjs.org/docs/getting-started.html

Nodejs offcial download web: https://nodejs.org/en/download/

Reactjs tutorial on w3schools: https://www.w3schools.com/react/

Voters
Profile icon
Intrestingvines
Profile icon
shyryny
Profile icon
eduardogarza4
Profile icon
HiboAbukar
Profile icon
DynamicSquid
Profile icon
Wumi4
Comments
hotnewtop
Profile icon
DynamicSquid

Cool!