Trending September 2023 # Reactjs Tutorial For Beginners: Learn With Step By Step Example # Suggested October 2023 # Top 17 Popular

You are reading the article Reactjs Tutorial For Beginners: Learn With Step By Step Example updated in September 2023 on the website Chivangcangda.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Reactjs Tutorial For Beginners: Learn With Step By Step Example

What is ReactJS?

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. 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:

Features of ReactJS

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.

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. 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 {}.

Advantages of ReactJS

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.

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:

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.

The file size of ReactJS is large.

Using ReactJS from CDN

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.

For dev For prod:

Replace version with the latest react version for both chúng tôi and chúng tôi 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.

ReactDOM.render( document.getElementById(‘app’) );

Output:

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. In production, you will have to install react using npm package.

Using NPM Packages

Once you have nodejs installed, create a folder reactproj/.

To start with project setup, run command npm init.

This is how the folder structure will look like:

reactproj package.json

Now we will install the packages that we need.

Here are the list of packages for reactjs:

npm install react --save-dev npm install react-dom --save-dev npm install react-scripts --save-dev

Open the command prompt and run above commands inside the folder reactproj/.

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. Create a file chúng tôi and add import react and react-dom, as shown below.

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( document.getElementById('root') );

We have returned the basic code for reactjs. We will explain the details of it in the next chapter. We want to display Hello, from Guru99 Tutorials and the same is given to the dom element with id “root”.It is taken from the chúng tôi file, which is the start file, as shown below.

Create a folder public/ and add chúng tôi in that as shown below

index.html

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 chúng tôi that will take care of using react-scripts to compile the code and start server as shown below:

"scripts": { "start": "react-scripts start" }

After installing all the packages and adding the above command, the final chúng tôi is as follows:

Package.json

{ "name": "reactproj", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "react-scripts start" }, "author": "", "license": "ISC", "devDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0", "react-scripts": "^3.1.1" } }

To start testing reactjs run the command

npm run start

> reactproj@1.0.0 start C:reactproj > react-scripts start

public/index.html

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:

reatproj/ src/ index.js node_modules/ public/ index.html package.json How to Create Your First React Project Setup

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

1. To start with ReactJS, we need to first import the react packages as follows.

import React from 'react'; import ReactDOM from 'react-dom';

2. Save the file as chúng tôi in src/ folder

We will write a simple code in this tutorial React JS, wherein we will display the message “Hello, from Guru99 Tutorials!”

ReactDOM.render( document.getElementById('root') );

Step 3) Compile the Code.

Next in this chúng tôi Tutorial, we need to compile the code to get the output in the browser.

Here is the folder structure:

reactproj/ node_modules/ src/ index.js package.json public/ index.html

We have added the commands to compile the final file in chúng tôi as follows:

"scripts": { "start": "react-scripts start" },

To compile the final file run following command:

npm run start

Command: npm run start:

> reactproj@1.0.0 start C:reactproj > react-scripts start

What is JSX?

JSX is an extension to javascript. It is a template script where you will have the power of using HTML and Javascript together.

Here is a simple example of a JSX code.

Why we need JSX in React?

For a UI, we need Html, and each element in the dom will have events to be handled, state changes, etc.

In case of React, it allows us to make use of Html and javascript in the same file and take care of the state changes in the dom in an efficient manner.

Expressions in JSX

Here is a simple example of how to use expressions in JSX.

In earlier ReactJS examples, we had written something like :

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( document.getElementById('root') );

We will now change the above code to add expressions. Expressions are used inside curly brackets {}, and they are expanded during run time. Expressions in react are the same as javascript expressions.

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; const display = "Hello, from Guru99 Tutorials!"; ReactDOM.render( h1tag, document.getElementById('root') );

Let us now test the same in the browser.

You can see that the {display} expression is not replaced. React does not know what to do when an expression is used inside the .js file.

Let us now add changes and create a .jsx file, as shown below:

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; const display = "Hello, to Guru99 Tutorials"; export default h1tag;

We have added the required code and will use the chúng tôi file in chúng tôi want the h1tag variable to be used inside chúng tôi so the same is exported as shown above in the test.jsx

Here is the modified code in index.js

import React from 'react'; import ReactDOM from 'react-dom'; import h1tag from './test.jsx'; ReactDOM.render( h1tag, document.getElementById('root') );

To use the chúng tôi in chúng tôi we have to import it first as shown below:

import h1tag from './test.jsx';

To use the chúng tôi in chúng tôi we have to import it first as shown below:

We can use the h1tag now in the ReactDOM.render as shown below:

ReactDOM.render( h1tag, document.getElementById('root') );

Here is the output when we check the same in the browser:

What are Components in ReactJS?

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

Components as functions

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; function Hello() { } export default Hello_comp;

We have created a function called Hello that returned h1 tag as shown above. The name of the function acts as an element, as shown below: export default Hello_comp;

Let us now use this component in chúng tôi file as shown below:

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import Hello_comp from './test.jsx'; ReactDOM.render( Hello_comp, document.getElementById('root') );

Here is the output in the browser:

Class as Component

Here is a ReactJS example that uses a class as a component.

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; class Hello extends React. Component { render() { } } export default Hello;

We can use Hello component in chúng tôi file as follows:

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import Hello from './test.jsx'; ReactDOM.render( document.getElementById('root') );

Here is the output of the same.

What is a State in ReactJS?

A state is a javascript object similar to props that have data to be used with the reactjs render. The state data is a private object and is used within components inside a class.

Example of State

Here is a working example on how to use state inside a class.

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; class Hello extends React.Component { constructor(props) { super(props); this.state = { msg: "Hello, from Guru99 Tutorials!" } } render() { } } export default Hello;

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import Hello from './test.jsx'; ReactDOM.render( document.getElementById('root') );

This is what we get when we test it in the browser:

What are Props in ReactJS?

Props are properties to be used inside a component. They act as global object or variables which can be used inside the Component.

Props to Function Component

Here is an example of passing props to a function component.

import React from 'react'; import ReactDOM from 'react-dom'; function Hello(props) { } export default Hello_comp;

The component is used in chúng tôi as follows:

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import Hello_comp from './test.jsx'; ReactDOM.render( Hello_comp, document.getElementById('root') );

Here is the output in the browser:

Props to Class Component

To access the props in a class we can do it as follows:

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; class Hello extends React.Component { render() { } } export default Hello;

The msg attribute is passed to the component in chúng tôi as follows:

import React from 'react'; import ReactDOM from 'react-dom'; import Hello from './test.jsx'; ReactDOM.render( document.getElementById('root') );

This is the output in the browser:

Also Check:- AngularJS Tutorial for Beginners: Learn AngularJS Step by Step

Life Cycle of a Component

A component life cycle is divided into Initialization, Mounting, Update, and UnMounting stages.

Here is a detail explanation about each Component.

A component in reactjs has the following stages :

Initialization: This is the first stage of the component life cycle.

Here it will have the default props and the state at the initial level.

Mounting: In this phase, the Component is rendered inside the dom. We having exposure to following methods in the mounting state.

componentDidMount(): This is also called when the Component is just added to the dom.

render(): You have this method for all the components created. It returns the Html node.

Update: In this state, the dom is interacted by a user and updated. For example, you enter something in the textbox, so the state properties are updated.

Following are the methods available in update state:

shouldComponentUpdate() : called when the component is updated.

componentDidUpdate() : after the component is updated.

UnMounting: this state comes into the picture when the Component is not required or removed.

Following are the methods available in unmount state:

Component willUnmount(): called when the Component is removed or destroyed.

Working Example

Here is a working example which shows the methods called at each state.

Example: complife.jsx

import React from 'react'; import ReactDOM from 'react-dom'; class COMP_LIFE extends React.Component { constructor(props) { super(props); this.state = {name: ''}; this.UpdateName = this.UpdateName.bind(this); } UpdateName(event) { this.setState({name: event.target.value}); } alert("The name entered is: "+ this.state.name); } componentDidMount() { console.log('Mounting State : calling method componentDidMount'); } shouldComponentUpdate() { console.log('Update State : calling method shouldComponentUpdate'); return true; } componentDidUpdate() { console.log('Update State : calling method componentDidUpdate') } componentWillUnmount() { console.log('UnMounting State : calling method componentWillUnmount'); } render() { return ( ); } } export default COMP_LIFE;

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import COMP_LIFE from './complife.jsx'; ReactDOM.render( document.getElementById('root') );

When you check the output in the browser

In browser console you get :

When the user enters in the textbox:

In console following messages are displayed:

Working with Forms

In this chapter, we will see how to work with forms in reactjs.

Here is a working example:

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; class Form extends React.Component { constructor(props) { super(props); this.state = {name: ''}; this.UpdateName = this.UpdateName.bind(this); this.formSubmit = this.formSubmit.bind(this); } UpdateName(event) { this.setState({name: event.target.value}); } formSubmit(event) { alert("The name entered is: "+ this.state.name); } render() { return ( ); } } export default Form;

For the input fields, we need to maintain the state, so for that react provides a special method called setState, which helps to maintain the state whenever there is a change.

UpdateName(event) { this.setState({name: event.target.value}); }

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import Form from './form.jsx'; ReactDOM.render( document.getElementById('root') );

The output in the browser is as follows:

Step 1) Enter your name in the textbox:

Working with Events in ReactJS

Working with events in reactjs is same as how you would have done in javascript. You can use all the event handlers that are used in javascript. The setState() method is used to update the state when the user interacts with any Html element.

Here is a working example of how to use events in reactjs.

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; class EventTest extends React.Component { constructor(props) { super(props); this.state = {name: ''}; this.UpdateName = this.UpdateName.bind(this); } UpdateName(event) { this.setState({name: event.target.value}); } alert("The name entered is: "+ this.state.name); } render() { return ( ); } } export default EventTest;

For the input fields, we need to maintain the state, so for that react provides a special method called setState, which helps to maintain the state whenever there is a change.

UpdateName(event) { this.setState({name: event.target.value}); }

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import EventTest from './events.jsx'; ReactDOM.render( document.getElementById('root') );

Here is the output in the browser:

When a user enters the name :

Working with Inline CSS in ReactJS

Will take a look at a working example to understand the working of inline css in reactjs.

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; const h1Style = { color: 'red' }; function Hello(props) { } export default Hello_comp;

I have added color: ‘red’ style to the h1 tag.

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import Hello_comp from './addstyle.jsx'; ReactDOM.render( Hello_comp, document.getElementById('root') );

The output in the browser is as follows:

You can create an object of style that you want on the element and use an expression to add style, as shown in the example above.

Working with External CSS in ReactJS

Let us create a external css , for that create a folder css/ and add chúng tôi in it.

chúng tôi

.h1tag { color:red; }

Add the chúng tôi to your chúng tôi file

Now let us add the class to the h1 tag in .jsx file

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; let classforh1 = 'h1tag'; function Hello(props) { } export default Hello_comp;

chúng tôi

import React from 'react'; import ReactDOM from 'react-dom'; import Hello_comp from './addstyle.jsx'; ReactDOM.render( Hello_comp, document.getElementById('root') );

The className attribute is given the class details. Now let us test in the browser.

This is what you see when you inspect the h1 tag in browser:

You can see that the class=” h1tag” is added successfully to the h1 tag.

Summary:

ReactJS is an open-source front-end JavaScript library to build the user interface. It is maintained by Facebook and used by many companies today for UI development.

The core features of ReactJS includes JSX, components(functional components and class-based components), the life cycle of a component, props, and state support for a component, working with javascript expressions.

Project setup of ReactJS is explained using CDN files and also using npm packages to build the project.

JSX is an extension to javascript. It is a template script where you will have the power of using Html and javascript together.

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

A state is a javascript object similar to props that have data to be used with the reactjs render. The state data is a private object and is used within components inside a class.

Props are properties to be used inside a component.

A component life cycle is divided into Initialization, Mounting, Update, and UnMounting stages.

ReactJS allows you to work with external css as well as inline css using javascript expression.

Also Check:- Top 70 React Interview Questions and Answers (Updated)

You're reading Reactjs Tutorial For Beginners: Learn With Step By Step Example

Update the detailed information about Reactjs Tutorial For Beginners: Learn With Step By Step Example on the Chivangcangda.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!