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.

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