React Js Beginner Tutorial

Posted on  by admin

ReactJS is an open-source front-end JavaScript library for building user interfaces.

ReactJS is maintained by Facebook and a community of individual developers and companies. It is widely used as a base in building single-page websites and mobile applications.

Run the React Application

It is very easy to use, and it allows users to create reusable UI components. In this ReactJS Tutorial for beginners, you will learn ReactJS step by step:. JSX : JSX is an extension to javascript. Though it is not mandatory to use JSX in react, it is one of the good features and easy to use.

Adding Time Travel

Components: Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code.

We can use components as functions and components as classes. Components also have a state, props which makes life easy. Inside a class, the state of each of the props is maintained. Virtual DOM: React creates a virtual dom, i.e., in-memory data -structure cache.

React Quiz

Only the final changes of DOM has later updated in the browsers DOM. Javascript Expressions: JS expressions can be used in the jsx files using curly brackets, for example {}.

Kickstart your career

Here, are important pros/benefits of using ReactJS:. ReactJS uses virtual dom that makes use of in-memory data-structure cache, and only the final changes are updated in browsers dom.

This makes the app faster. You can create components of your choice by using the react component feature. The components can be reused and also helpful in code maintenance. Reactjs is an open-source javascript library, so it is easy to start with.

Create React App

ReactJS has become very popular in a short span and maintained by Facebook and Instagram. It is used by many famous companies like Apple, Netflix, etc.

  • Facebook maintains ReactJS, the library, so it is well maintained and kept updated.
  • ReactJS can be used to develop rich UI for both desktop and mobile apps.

Easy to debug and test as most of the coding is done in Javascript rather than on Html. Here, are cons/ drawbacks of using ReactJS:.

Working Example

Most of the code is written in JSX, i.e., Html and css are part of javascript, it can be quite confusing as most other frameworks prefer keeping Html separate from the javascript code.

Working with External CSS in ReactJS

The file size of ReactJS is large. To start working with react, we need to first install reactjs. You can easily get started to use reactjs by using the CDN javascript files, as shown below. Go to the official site of reactjs to get the CDN links, i.e., and you will get the required files to explain the following image.

Setup for the Tutorial

Replace version with the latest react version for both react-development.js and react-dom.developement.js.

What are Components in ReactJS?

You can host the files at your end to start working with reactjs. In case if you are planning to use the CDN files, make sure to keep the cross-origin attribute, to avoid cross-domain issues.

Reactjs code cannot be executed directly in the browser and needs to be transpired using Babel to javascript before executing in the browser. Here is the BabelJS script that can be used:.

Here is the working ReactJS example using cdn files and babeljs script.

We will get into the details of the code in the next chapter, let us see the working here with CDN files. It is said that using babel script directly is not a good practice, and newcomers can just use it to learn reactjs for now.

Before We Start the Tutorial

In production, you will have to install react using npm package. Make sure you have nodejs installed. If not installed, go through this tutorial for nodejs ( installation. Once you have nodejs installed, create a folder reactproj/. To start with project setup, run command npm init.

What You Should Already Know

This is how the folder structure will look like:. Now we will install the packages that we need. Here are the list of packages for reactjs:. Open the command prompt and run above commands inside the folder reactproj/.

What is JSX?

Create a folder src/ where all the js code will come in that folder. All the code for reactjs project will be available in the src/ folder.

Completing the Game

Create a file index.js and add import react and react-dom, as shown below. We have returned the basic code for reactjs. We will explain the details of it in the next chapter.

Working with Events in ReactJS

We want to display Hello, from Guru99 Tutorialsand the same is given to the dom element with id “root”.It is taken from the index.html file, which is the start file, as shown below. Create a folder public/ and add index.html in that as shown below.

Learning by Exercises

The package react-scripts will take care of compiling the code and starting the server to display the html file i.e index.html. You need to add the command in package.json that will take care of using react-scripts to compile the code and start server as shown below:.

Working with Forms

After installing all the packages and adding the above command, the final package.json is as follows:. To start testing reactjs run the command. It will open browser with url http://localhost:3000/ as shown below:.

Features of ReactJS

We are going to use the same process to execute the javascript files in the next chapters too. Add all your js and .jsx file in src/ folder .The file structure will be as follows:.

Here is a step by step guide in this ReactJS Tutorial to start with the first react application.

Step 1) Import the react packages.1. To start with ReactJS, we need to first import the react packages as follows. Save the file as index.js in src/ folder. Step 2) Write Simple Code.We will write a simple code in this tutorial React JS, wherein we will display the message “Hello, from Guru99 Tutorials!”.

What are Props in ReactJS?

ReactDOM.render will add the

tag to the element with id root. Here is the html file we are having:. Step 3) Compile the Code. Next in this React.js Tutorial, we need to compile the code to get the output in the browser.

Disadvantages of ReactJS

Here is the folder structure:. We have added the commands to compile the final file in package.json as follows:. To compile the final file run following command:. When you run above command, it will compile the files and notify you if any error, if all looks good, it will open the browser and the run the index.html file at http://localhost:3000/index.html.