A basic introduction to React.js

React.js is the most popular javascript library, used for building reusable UI components. React is simple, fast, and versatile. React is very flexible to use and popular, used by front-end developers. Social media platforms like Facebook, Instagram use the Reactjs library.

This article will give you an idea of some React concepts like JSX, React Components, and React Hooks. Before working with React, one should have a solid knowledge of HTML, CSS, and javascript. But HTML is not used in React though. A basic understanding of ES6 features, Babel is also necessary.

why ES6?

ES6 is an important feature to be known, Knowledge of is required when building React applications. ES6 makes writing Javascript much easier. For producing more efficient results, ES6 is used in React.

Role of Babel

Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript. Babel allows leveraging all the benefits of JSX while building React components.

JSX( JavaScript XML)

JSX is similar to HTML knowledge will be very helpful. It is not really necessary to use JSX in React. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements.

Example: You can use any Javascript expression inside the curly braces in JSX. For example, 3–4, user.firstNameor formatName(user) are all valid JavaScript expressions.

You may use quotes to specify string literals as attributes. Curly braces when embedding a JavaScript expression in an attribute is not used.

React Components

A Component is one of the core building blocks of React app. It is an independent, reusable code block that makes the task of building UIs much easier. Each component is a JavaScript function that returns a piece of code that represents a piece of a web page.

Components come in two types, Class components and Function components.

what is a Functional and Class Component?

A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.

For example, we can create a functional component with the arrow function definition.

A class component requires you to extend from React. Component and create a render function that returns a React element. There is no render method used in functional components.

For example, to illustrate the class component, we can create Create a Class component called Book.

React Hooks

Hooks are the new feature introduced in the React 16.8 version. They are highly reusable and independent. Hooks allow you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components. Hooks do not contain any breaking changes.

when should we use the Hooks?

If you want to add some state to the existing function component, we were converting it to a class. So basically the use of classes is replaced by Hooks, which lets you write use state and other React features. But, now you can do it by using a Hook inside the existing function components.

How to install React Hooks?

By running these commands, you can install React Hooks. But before installing hooks, make sure to install the latest React and React-DOM alpha versions which support React Hooks.

Rules of React Hooks

• Always use Hooks at top of your React function.
• You cannot call Hooks from the Regular Javascript Function, instead can be called from React function components.

For more information and understanding, check out the React Official Documentation.

Hope this article was informative!! Stay tuned for more articles on React.