React Definitive Guide: Building Your First React App

4 min readOct 16, 2019

If you’re new in React, I recommend reading my first article introducing React js : https://medium.com/@sahar.e.hassan/what-is-react-js-c3c4d5985a7e

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.

You can install it by using this link: https://nodejs.org/en/download/

2- npm (Node Packages Managers) or yarn.

notes:

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.

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.

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.

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.

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.

We have a series of articles about React js:

React Definitive Guide: What is React?
React Definitive Guide: Building your first React app.
React Definitive Guide: Components
React Definitive Guide: Routing

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