Blogs

React Definitive Guide: Building Your First React App

04

19 Nov

4 min read.

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.

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/”.

React Definitive

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.

Package.json
  • 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
App.js

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 are 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 🙂

Sahar Elsayed

Comments