ReactJS Tutorial: How to Get Started with React

This blog is a ReactJS tutorial aimed at helping you understand React basics and learn ReactJS from scratch. In this React tutorial, we are going to learn some key aspects of React and implement a dynamic web application with the..Read More

Learn ReactJS Tutorial
  • Updated on 30th Sep, 20
  • 34 Views

Let us start by getting an overview of what we’ll be going through in this ReactJS Beginner Tutorial:

 

ReactJS Introduction

Web and mobile application development occupy a major chunk of the software-related job requirements that organizations and business owners have today. A variety of frameworks, languages, libraries, and tools have been introduced in the industry to make the flow of these development activities smoother and more accessible and, in turn, to make the final product better.

Web applications usually consist of three elements, a frontend, a backend, and a database. Depending on a certain degree of compatibility clauses, technologies used in all of these three are interchangeable, as long as the use case remains the same. That being said, on the frontend side of things, React is one of the most popular and widely used libraries today.

The distinguishing feature of ReactJS, among other technologies, is that it allows us to reuse UI components very easily. In this ReactJS tutorial step by step for beginners, we are going to explore this reusability feature.

 

Prerequisites for ReactJS

Before getting started with the ReactJS tutorial, it is highly recommended to have some foundational knowledge of HTML, CSS, and JavaScript. ReactJS uses JSX that is mostly equivalent to HTML in syntax. Hence, prior knowledge of the HTML language is very handy. JavaScript, on the other hand, can be learned side-by-side as we implement our ReactJS project.

To learn the fundamental Web Development languages, such as HTML, CSS, and JavaScript, you can enroll in our online instructor-led Full Stack Developer course now!

 

Features of React

In the MVC (Model-View-Controller) application cycle, React, by itself, only makes up for the ‘View’ part as it is concerned with the frontend aspect. React can take advantage of Node and can be rendered on the server-side very easily, with the option of running native apps with React Native. Here are some defining features of React:

  • JavaScript Syntax Extension (JSX): JSX is used to combine the web design elements of the HTML code with the JavaScript logic, using a syntax almost identical to HTML. This is used to minimize backend server load and lay emphasis on client-side resource utilization for the frontend elements of a web application.
  • React Components: React allows us to create UI elements in the form of ‘components.’ The point of using components in the development life cycle is to implement code reusability, make the code lighter, and provide a proper structure to the project. The chaining of multiple React components together to implement the reusability of code is discussed in this ReactJS tutorial with examples, later on.
  • Flux: It keeps the application data flow unidirectional (one-way).
 

How does React work?

React was built because a group of Facebook Developers came across the fact that DOM (Document Object Model: an API for XML and HTML documents, defining the logical structure of the way these documents are accessed and dynamically changed) is not optimal with regards to time. To solve this, they developed ReactJS. React implements a virtual DOM instead of an actual DOM. So, during each web session, instead of changing the actual DOM tree, React makes changes to the virtual DOM tree to find the least time-consuming way to update the web browser’s DOM.

Once the changes have been confirmed or decided upon, React DOM updates the actual DOM to match with the virtual elements. This is done so that the JavaScript code does not need to wait for the server’s response for each DOM tree manipulation request and can access it instantly with zero latency.

 

React JS Installation

To get started with the ReactJS tutorial, we need to have the environment already set up. The first and foremost prerequisite to run React is installing NodeJS.

Refer to the following video tutorial to get started with setting up NodeJS:

Now that we have successfully installed and set up NodeJS, let us move on creating a basic React application:

Setting up a React Environment

  • To set up a React environment, open the desired project directory in the command-line terminal, and create a project folder
C:\Users\intellipaat\Desktop>mkdir intelliProjects
C:\Users\intellipaat\Desktop>cd intelliProjects
  • Initialize the ReactJS project in the created folder
C:\Users\intellipaat\Desktop\intelliProjects>npx create-react-app my-app

After the initialization is complete, we can see that the ReactJS boilerplate project structure and code files are ready to use.

If you are looking to gain advanced backend knowledge in NodeJS server development, ExpressJS, and database integration with MongoDB, you can enroll in our instructor-led Node.js Certification Course Training!

 

ReactJS Tutorial

Creating the First React Application

First, we will need an IDE to write our React code. We can use Visual Studio Code, Atom, Sublime Text, or any IDE that we prefer.

Note: This tutorial has been created using Visual Studio Code.

  • Now, start the IDE application; navigate to our project location (here, C:\Users\intellipaat\Desktop\intelliProjects\my-app), and see the following project structure
  • Navigate to the src folder, and we will see some pre-existing boilerplate code files for a React application
  • We can test the boilerplate code to see if our React environment is set up correctly. Go to the command-line terminal and run the following commands
C:\Users\intellipaat\Desktop\intelliProjects>npx create-react-app my-app
  • This will start a locally-hosted live development server. Now, in most cases, the default web browser will automatically launch a tab with the web application, but if it that does not happen, then simply enter the following URL in our web browser
localhost:3000

After testing the environment with the boilerplate code, now, let us create our ReactJS application.

  • Switch back to the IDE, and open the App.js file in the src folder. Make sure to erase all the contents of the code file to start from scratch. Now, import all the required module(s) for a basic React application

Certification in Full Stack Web Development

App.js:

import React from “react”;
  • Create a basic ReactJS function (component) that returns the JSX code, which will be rendered onto the browser

App.js:

function App() {
  return (
    

Intellipaat React Application

); }
  • After creating the above component, export the module for it to be accessible by index.js for the render call

App.js:

export default App;

Your final App.js should contain the following now:

import React from "react";

function App() {
  return (
    

Intellipaat React Application

); } export default App;

Then, we will save the changes in the App.js file.

Now, one of the great things about React is that all changes that are saved in the code will reflect in the live server after an automatic refresh of the webpage. We can check this by simply switching back to the browser tab.

Creating a Component in React

Let us create a component in React, which returns the JSX code, containing a button. The function of the button is to print the message ‘Hello from Intellipaat!’ in the console when it is clicked.

  • In the same directory, create a file with the name, intelliHello.js, and perform the import(s)

intelliHello.js:

import React from "react";
  •  Now, create the component skeleton

intelliHello.js:

function Hello() {
  return (
    
); }
  • Assign the task of printing the message ‘Hello from Intellipaat!’ to a JavaScript function, messagePrompt

intelliHello.js:

function Hello() {
  const messagePrompt = () => {
    console.log("Hello from Intellipaat!\n");
  };
  return (
    
); }

 Now, since we have the ability to use JSX, we can combine JavaScript with HTML formatting. This implies that the programming logic can be integrated seamlessly with the design elements of a web application. Let us see how this works.

  • Attach the function to an ‘onClick’ clause and return the JSX code

intelliHello.js:

function Hello() {
  const messagePrompt = () => {
    console.log("Hello from Intellipaat!\n");
  };
  return (
    
); }
  •  Export the module after the component is coded out
export default Hello;

Calling an External Component Within a Component

Let us switch back to the code file, App.js, and implement the Hello component that we just created.

  • Import the external component within the App.js file

App.js:

import Hello from './intelliHello'
  • Implement the component in the return block of the parent App component

App.js:

function App() {
  return (
    
); }

 Our new ‘App.js’ file will have the following contents.

App,js:

import React from "react";
import Hello from './intelliHello'

function App() {
  return (
    
); } export default App;
  •  Save the changes and test the results on the web browser

To check whether the ‘onClick’ clause of the Hello button is working, we have to enable the browser’s console (F12 on Google Chrome). After enabling the console, we will click on the Hello button multiple times to see if the message ‘Hello from Intellipaat!’ is getting printed or not.

Here, we come to the end of this best React.js tutorial.

For more ReactJS project examples, you can check out the full-fledged ReactJS tutorial for a real-time chat application:

After going through the above ReactJS tutorial for Beginners, do you want to get proficient in technologies such as React and Redux? Enroll in our online instructor-led React JS Training Course today!

Course Schedule

Name Date
Website Development Architect 2020-10-17 2020-10-18
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2020-10-24 2020-10-25
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2020-10-31 2020-11-01
(Sat-Sun) Weekend batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *

Associated Courses

Subscribe to our newsletter

Signup for our weekly newsletter to get the latest news, updates and amazing offers delivered directly in your inbox.