ReactJs Step-By-Step Tutorial Series for Absolute Beginners — Part 1

Hello Readers,

Welcome to the ReactJs tutorial series for absolute beginners!!

Our series of these articles will give you complete knowledge about how to start with ReactJs up to how you can deploy ReactJs application to Github.

Quick links for our ReactJs Series:

Tutorial #1 — Introduction and Installation of ReactJS (This Tutorial)

Tutorial #2 — ReactJS Components

Tutorial #3 — ReactJS Components Communication

Tutorial #4 — Build ToDo Application Using ReactJS

Tutorial #5 — Deploy ToDo Application to Github pages

Goals:

• As you can see, We will start with installations — all the setups and tools required for ReactJs.
• Then we will create different types of components.
• Then we will have components communication like how we can pass data from one component to another component.
• Then we will create a simple ToDo application using ReactJS and in this application, we will also use bootstrap and font awesome icons for the styling purpose.
• And finally, we will create our deployment build and publish our application to the Github pages.

What is React?

• React is a JavaScript library — one of the most popular.
• React is an open-source project created by Facebook.
• React is not a framework (unlike Angular).
• React is used to build user interfaces (UI) on the front end.
• React is used to build single-page applications(SPAs).
• React is the view layer of an MVC application (Model View Controller)

ReactJS is a JavaScript library used for building reusable UI components. This means it is a view library that uses components to change content on the page without refreshing which is the core principle behind single-page applications.

React Features

• JSX − JSX stands for JavaScript XML. JSX is JavaScript syntax extension. JSX allows us to write HTML in React. It isn’t necessary to use JSX in React development, but it is recommended. With JSX you can write expressions inside curly braces { } including variables, functions, and properties.
• Unidirectional data flow − React implements a one-way data flow. In React, data values are passed to each component as properties in its HTML tags. The component cannot directly modify any properties but can pass a callback function and with the help of this, it can modify the data.

Setup and Installation

1) Install Node.js and npm globally on your machine. (we are using node.js version 12.16 currently, you can have any version >10.x and for npm, it should be > 5.2)

2) Facebook has created Create React App environment that will create a live development server and automatically compile React and all other things. To create any React application, run the following code in your terminal:

npx create-react-app todoapp
cd todoapp
npm start

(Note: If you’ve previously installed create-react-app globally via npm install -g create-react-app, we recommend you to uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version)

The create-react-app will set up everything you need to run a React application. And make sure you should not use uppercase letters for your application name.

So let’s check out our browser and we can see our application is up and running on http://localhost:3000 locally.

3) Visual Studio Code — as an IDE (you can use any).

Introduction to the directory structure

Let’s walk through the directory structure that React CLI created for us.

Open this newly created application in VS Code.

Directory Structure of React Application

• As you can see the very first directory is node_modules and this is having all the library dependency of package.json.
• Now check this public directory.

In this directory our important file is index.html. As you know React is a single page application so it is the only one Html or you can say a single file that gets rendered when we run the application. Also, focus on the line no. 31, where this is the <div> with id=”root”.

<div id=”root”></div>

This <div> will be replaced with the root component.

Inside this directory, you will also find manifest.json. This file is for PWAs — Progressive Web Apps.

• The next one is the src directory. This will contain all our React code. This is having App.js, which is the first component, which will get rendered when we run our application. But who is rendering this app component? The answer is index.js. You can see this index.js is having ReactDOM.render() method.

ReactDOM.render(<App />, document.getElementById(‘root’));

This render method will actually render the index.html’s root div.

It will replace this root div with the app component. This is how your first component will work.

• In this src directory, we will also have index.css and serviceWorker.js. And this service worker is for PWAs — Progressive Web Apps.
• Moving ahead, we are having package.json. It contains all the dependencies of our React application.

So, this was all about the structure of the React application.

Now let’s move to our Part-2 of this article series, where we will understand the concept of components and will create different types of components too.