Full stack Web Development

Introduction to ReactJS

This is the first article in a series on ReactJS – a JavaScript library (note: NOT FRAMEWORK).

Prerequisites

To work with React you need to have a good understanding of HTML, CSS, and JAVASCRIPT (preferably version 6 syntax). Before you start, ensure you have a recent version of node installed on your machine. To download Node, click here.

What is ReactJS

React is a JavaScript library that makes the task of building powerful and complex user interfaces easy. It is mostly used to build reusable UI components. It reduces the re-rendering of the DOM by using the concept of Virtual DOM. React implements one-way reactive data flow.

React can be used to develop single page web applications and mobile applications. It was built at Facebook to address some of the challenges associated with large-scale, data-driven websites. When React was released in 2013, the project was viewed with some skepticism because of its unique conventions.

Some of the companies that use react are Netflix, Yahoo, Facebook, Instagram WhatsApp, and Uber.

How to Work with ReactJS

To work with React you have to find a syntax extension to JavaScript called JSX, which looks like an XML tag (but is not). This syntax extension describes the look of the UI.

We will discuss JSX in the next blog.

const companyName= ‘Acadgild’;

const element = <h1>Hello, {companyName}</h1>; //JSX

Sample code

For explanation of code, follow this series.

Environment Setup for ReactJS

1.Install Nodejs.

To check if node is installed on your machine use the command:

 

 

 

 

2. Installing Node will also install NPM on your machine. NPM stands for Node Package Manager. To check NPM version on your machine use the command:

 

 

 

The above command indicates that you have successfully installed Nodejs.

3. Now install a create-react-app package on your machine. To create a React application use the command:-

 

 

 

4. Create new app with the command:-

 

 

 

 

 

 

 

5. To serve your new project in browser type:-

 

 

 

 

 

You will find the desired output in browser as:

Conclusion

The goal of this blog is to help you learn React sequentially after establishing a solid foundation. We’ll start with a syntax upgrade to get you acquainted with the latest JavaScript features, especially the ones that are frequently used in React. Then, we’ll introduce you to functional JavaScript so that you can apply these techniques immediately and understand the paradigm that gave birth to React.

We will also cover foundational React knowledge thereafter. This includes first components and how and why we need to transpile codes. We will build an application using React, improve the code with advanced React techniques, introduce Redux as the client data container, and finish off the app by incorporating Jest testing and routing with the React Router.

In the next blog, we will delve deeper into the codes and structure. We will also explore the uses of different files and internal packages that can be used to create React apps.

Som

is a full-stack web developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 4 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn full-Stack web development.

8 Comments

  1. Virtual DOM concepts will be covered in a different article. It’s a bit vast and I would explain here it will be a big article.

  2. Article is good for highly experienced ones ,but I have few confusion after going through the article first one what react is rendering ? Jsx or Dom?
    second one is regarding virtual dom ,that what working mechanism of virtual dom is making it useful for react ?
    What happens if we only rely on DOM? and how virtual Dom working Mechanism is differnt from DOM?
    It will Be very helpful for the beginner sir if you highlight these points .

    1. Always understand React is a library of javascript, which main aim is to ease the rendering performance if we update the DOM again and again. So React uses JSX which stands for javascript XML it means it is a combination of HTML with JS. we return in the render() method JSX.

      Hi

      we recommend you to read JSX in this blog series which I have posted here. JSX render the piece of information to the DOM. Virtual DOM concept is been described here nicely have a look and read and please ask your doubts. https://acadgild.com/blog/react-component

  3. First of all accept my respect ,for the awesome reference and then accept few basics which should be added for more clarity from the beginner point of view

    Rendering JSX element makes Virtual DOM object gets updated and then React compares Virtual Dom with Virtual Dom snapshot which is taken before update and then it compares which virtual dom object gets changed and it updates only those changed object on the real DOM.
    Just to make the operations faster Virtual dom Is especially preferred
    Please suggest some points to make it more acceptable for beggineer

    1. Thank you for your response. You have mentioned about Virtual DOM and virtual DOM snapshot. It is a very deep concept for this we would be posting Lifecycle hook of the component which will make you understand. when we update and how the render() method returns the data to the DOM to make this you need to read state and props. Stay connected we are going to publish this in the week.

  4. One little example showing the benefits of Virtual Dom
    // consider below line of code in same file and write in the same manner
    const idocies = Good38 ;

    // It will add “Good38” to the screen:

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

    // below code will not do nothing at all, thanks to Virtual DOM avoiding unnecessary updates

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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close