React Js Tutorial For Beginners

Posted on  by admin

ReactJS Tutorial. ReactJS Useful Resources. Selected Reading.

Disadvantages of ReactJS

React is an open source, JavaScript library for developing user interface (UI) in web application. React is developed and released by Facebook. Facebook is continuously working on the React library and enhancing it by fixing bugs and introducing new features.

This tutorial starts with the architecture of React, how-to guide to setup projects, creating components, JSX and then walks through advanced concepts like state management, form programming, routing and finally conclude with step by step working example.

This tutorial is prepared for professionals who are aspiring to make a career in the field of developing front-end web application. This tutorial is intended to make you comfortable in getting started with the React concepts with examples.

Before proceeding with the various types of concepts given in this tutorial, we assume that the readers have the basic knowledge in HTML, CSS and OOPS concepts.

  • In addition to this, it will be very helpful, if the readers have a sound knowledge in JavaScript.
  • 20 Lectures 1.5 hours . 60 Lectures 4.5 hours . 165 Lectures 13 hours .
  • Paul Carlo Tordecilla. 63 Lectures 9.5 hours . 17 Lectures 2 hours .
  • Mohd Raqif Warsi. Install React (Should I install on Windows or Windows Subsystem for Linux).

Install VS Code. We recommend installing VS Code on Windows, regardless of whether you plan to use React on Windows or WSL. It is open-source, meaning that you can contribute to it by filing issues or pull requests.

What is a State in ReactJS?

(Just like these docs!). It is declarative, meaning that you write the code that you want and React takes that declared code and performs all of the JavaScript/DOM steps to get the desired result.

It is component-based, meaning that applications are created using prefabricated and reusable independent code modules that manage their own state and can be glued together using the React framework, making it possible to pass data through your app while keeping state out of the DOM.

The React motto is "Learn once, write anywhere." The intention is for code reuse and not making assumptions about how you will use React UI with other technologies, but to make components reusable without the need to rewrite existing code. JSX is a syntax extension for JavaScript written to be used with React that looks like HTML, but is actually a JavaScript file that needs to be compiled, or translated into regular JavaScript.

Virtual DOM: DOM stands for Document Object Model and represents the UI of your app. Every time the state of your app's UI changes, the DOM gets updated to represent the change.

Create React App

When a DOM is frequently updating, performance becomes slow. A Virtual DOM is only a visual representation of the DOM, so when the state of the app changes, the virtual DOM is updated rather than the real DOM, reducing the performance cost.

It's a representation of a DOM object, like a lightweight copy. Views: are what the user sees rendered in the browser. In React, view is related to the concept of rendering elements that you want a user to see on their screen. State: refers to the data stored by different views.

Learning by Exercises

The state will typically rely on who the user is and what the user is doing. For example, signing into a website may show your user profile (view) with your name (state).

Using ReactJS from CDN

The state data will change based on the user, but the view will remain the same.

Use create-react-app on Windows or WSL (see the prerequisites above) to create a new project: npx create-react-app hello-world. Change directories so that you're inside the folder for your new app: cd hello-world and start your app: npm start.

Your new React Hello World app will compile and open your default web browser to show that it's running on localhost:3000.

Working with Inline CSS in ReactJS

Stop running your React app (Ctrl+c) and open it's code files in VS Code by entering: code .

Optional: Instructions for following along locally using your preferred text editor

Find the src/App.js file and find the header section that reads:. Change it to read:. First, let's remove everything from that app.js file and make it into a class component.

  1. We will first import component from React and use it to create the class component.
  2. (There are two types of components: class and function). We will also add some custom JSX code in a return() statement.
  1. You can reload the page to see the result. Your app.js file should now look like this:.

Next, let's set a local state where we can save data from an API.

A state object is where we can store data to be used in the view. The view is rendered to the page inside of render(). To add a local state, we need to first add a constructor.

  1. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement.
  2. Otherwise, this.props will be undefined in the constructor, which can lead to bugs. Props are what pass data down into components.
  3. We also need to initialize the local state and assign an object to this.state. We will use "posts" as an empty array that we can fill with post data from an API.

Your app.js file should now look like this:. To call an API with data for us to use in our React app, we will use the .fetch JavaScript method. The API we will call is JSONPlaceholder, a free API for testing and prototyping that serves up fake placeholder data in JSON format.

The componentDidMount method is used to mount the fetch to our React component.

React Quiz

The data from the API is saved in our state (using the setState request). Let's take a look at what sort of data the API has saved in our posts state. Below is some of the contents of the fake JSON API file.

What You Should Already Know

We can see the format the data is listed in, using the categories: "albumId", "id", "title", "url", and "thumbnailUrl".

Using NPM Packages

We will need to add some page styling to display our API data. Let's just use Bootstrap to handle the styling for us. We can copy + paste the Bootstrap CDN stylesheet reference inside the ./public/index.html file of our React app.

To display the API data, referencing our Bootstrap classes for styling, we will now need to add a bit of JSX code inside the rendered return() statement.

We will add a container, a header ("Posts from our API call"), and a card for each piece of data from our API. We will use the map() method to display our data from the posts object that we stored it in as keys.

Each card will display a header with "ID #" and then the key value + post.title key value from our JSON data. Followed by the body displaying the image based on the thumbnailURL key value. Run your React app again: npm start and take a look in your local web browser on localhost:3000 to see your API data being displayed.

The official React docs offer all of the latest, up-to-date information on React. Microsoft Edge Add-ons for React Developer Tools: Add two tabs to your Microsoft Edge dev tools to help with your React development: Components and Profiler. Microsoft Learn: The React Learning Path contains online course modules to help you get started with the basics. 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:. 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.

Learning by Examples

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

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.

Working with Events in ReactJS

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

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

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.

Working Example

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.

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

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

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

  • 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!”.

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

What are Components in ReactJS?

Command: npm run start:. Step 4) Check Output.The URL http://localhost:3000 will open in the browser once the code is compiled as shown below:.

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

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

  1. In earlier ReactJS examples, we had written something like :.
  2. We will now change the above code to add expressions.
  3. Expressions are used inside curly brackets {}, and they are expanded during run time.
  4. Expressions in react are the same as javascript expressions.

Working with External CSS in ReactJS

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.

Advantages of ReactJS

Let us now add changes and create a .jsx file, as shown below:. We have added the required code and will use the text.jsx file in index.js.We want the h1tag variable to be used inside script.js, so the same is exported as shown above in the test.jsx.

Here is the modified code in index.js. We can use the h1tag now in the ReactDOM.render as shown below:. Here is the output when we check the same in the browser:. Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code. The Component Hello is used as an Html tag, i.e., and assigned to Hello_comp variable and the same is exported using export.

Let us now use this component in index.js file as shown below:. Here is the output in the browser:. Here is a ReactJS example that uses a class as a component. We can use Hello component in index.js file as follows:. The Component Hello is used as an Html tag i.e., .

Here is the output of the same. 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. Here is a working example on how to use state inside a class.

This is what we get when we test it in the browser:. Props are properties to be used inside a component.

They act as global object or variables which can be used inside the Component.

Here is an example of passing props to a function component. As shown above, we have added msg attribute to Component. The same can be accessed as props inside Hello function, which is an object that will have the msg attribute details, and the same is used as an expression.

The component is used in index.js as follows:. Here is the output in the browser:. To access the props in a class we can do it as follows:. The msg attribute is passed to the component in index.js as follows:. This is the output in the browser:. Also Check:- AngularJS Tutorial for Beginners: Learn AngularJS Step by Step. 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. Here is a working example which shows the methods called at each state.

  • Example: complife.jsx. 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:. In reactjs Html input elements like ,