ReactJS – Your First React App

This is intended to be a quick start to React.js (or React).

We would cover the following:

1. Why you Should Learn React
2. Setup React Development Environment
3. Create Your First App
4. A Few Exercises for you
5. The React Folder Structure
6. Watch the Video Tutorial

1. Why you Should Learn React

One good reason you should learn react is that you can use it to build applications(rich UI applications) very easily. Besides it is really very easy to learn. Then, there’s much need for Reach developers currently(as of 2020).

So, this tutorial assumes that you don’t have any knowledge of React. However, you need bit of

• HTML
• CSS.
• Bit of JavaScript

But don’t worry as we would be learning as we go.

We would start from the scratch to build a React app.

To get an overview of React and why you must learn it, read here.

Let’s now start a step by step of React tutorial

2. Setup React Development Environment

Step 1: Download and install Node.js. Free download link.

Step 2: Download and install VS Code.Get it free from here.

Step 3: Create a local folder/workspace to store your React app. For me I created it in my drive D and named it ReactProjects

Step 4: Open VS Code navigate to the ReactProjects folder

3. Create Your First App

In this section, we would use the npx tool to setup up our project. Npx is a command line tool that helps us create a react application with not configuration needed.

Step 1: While in VS Code,click on ‘Terminal’ in the menu bar and choose ‘New Terminal’

Step 2: In the terminal window, enter the command npx create-react-app first-app. This may take a while to complete.

If this command runs successfully, then this is what you have:

Step 3: Now navigate inside the folder using the command cd first-app

Step 4: Start the application using the command npm start

This command runs and opens your browser at port 3000. This is shown below:

If you see this window, then congrats!. You have just created your first React app. I tell you, this is how easy React is!

4. A Few Exercises for you!

Since you know a bit of HTML/CSS, please do the following exercises. Hints are given below

1. Change the background color to white
2. Change the color of the text to black
3. Change the text: “Edit src/App.js and save to reload” to “Welcome to React Tutorial”
4. Change the title of the page to “Learn React”

Hints:

• The colors can be changes from App.css file which is inside the public/src folder.
• The content of the page can be changed from the App.js file
• The title of the page can be changed from the index.html file

If you completed the exercises, mention in the comment section below(or in the video). If you have any challenges, feel free to mention it. I will give you the needed support.

Let’s now take some time to understand the folder structure before we continue

5. The React Folder Structure

The react folder structure is given below with. I would now explain some of the important file and folders of a React application.

node_modules: This folder contains all the dependencies

public: this folder ontains the index.html and the favicon and manifest.json. We are only concerned with index.html

index.html: this is the primary page for your application. This is the only html page you will be using. However you will generally not change anything in this page as React would manage the content of this page. I will do this using the root <div> element with the root attribute. This is called the ‘root DOM node’.

package.json: contains the dependencies and the scripts that are required the the application

src: this folder contains the files we would be working with for the most of the project

index.js: this file is the starting point of the React application. It specifies the root component, which is the App component. It also specifies the DOM(Document Object Model) element which would be controlled by React. This is the <div> element with “root” attribute in the index.html page.

App.js: responsible for the html displayed in the browser. It represents the view

App.css: contains the styles for the application. It contains classes which are applied to the App component.

index.css: applies styles to the body tag