React Definitive Guide: Building Your First React App

Sahar E.Hassan
Oct 16, 2019 · 4 min read
Photo by Jack Chen on Unsplash

If you’re new in React, I recommend reading my first article introducing React js :

What we’re going to discuss in this article:

1- React project prerequisites.

2- React installation.

3- Basic Application structure.

React project prerequisites:

1- Node js.

2- npm (Node Packages Managers) or yarn.


  • Search for the latest stable version.
  • yarn is preferable because its packages are updated.

React installation:

npm install -g create-react-app
  • This command will install “create-react-app” globally on your machine so you can use it in any project.

Now we’re done with setting up React environment, let’s start creating our first React app.

create-react-app firstApp
  • The previous command will create a React app called firstApp, with all the necessary functionality you need, already built into the app.

It may take a while to create the app, When it finishes, go to application folder and run npm start .

cd firstApp
npm start

The previous code will open the application on “ http://localhost:3000/”.

Basic Application Structure:

After you’ve started the app, go and open up the application in your text editor and let’s have a look at the basic files structure and discuss the commonly used files.

1- Create react app has already installed several files for you, and organized several of them into folders, your main folders are src and public folders.

files structure

2- Create react app installs several react scripts for you as well you can find them in the package.json file.

  • I’ve also installed some bootstrap features here for this project, but everything else comes pre-installed.

3- If you want to add any external stylesheets you would link it up in index.js located in the public folder. You can also change the title of the application. Other than that, you won’t usually need to touch this file very much.

  • Notice that the div with id “root” where all of the content will be output is located in that file as well.
index.js (public folder)

4- The next file is the index.js located in src folder.

  • Here, we’re importing React and the ReactDOM. We are also rendering everything here to the ‘root’ element.
  • Actually you won’t usually need to touch or edit this file.
index.js (src folder)

5- One of the most important features about React is using components. you can create your app components in a sub-folder called components in src folder and then link them all in app.js folder ad it’s the entry point for your application.

components folder

Note that this is such a basic structure and there’s a lot to add in your project. But I wanted to make you familiar with the basic files and folders.

Congratulations, Now you have done with your first React app and can deal with your project files. All comments and feedback are highly appreciated.

Stay tuned for more React Js articles for beginners, Have a nice day :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade