What is React JS? Introduction to React JS
By Gyanendra Kumar Knojiya
Sep 8, 2021 10:11 AM
React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
Why Use React?
These are the features that make the React library so good and powerful to build modern applications and what also makes React stand out against other frameworks and libraries:
1. Virtual DOM
DOM (Document Object Model) is the most important part of web applications—it represents the structure of a document web page, mostly HTML.
The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. — MDN
DOM manipulation is widely used nowadays because modern applications require a lot of state changes, animations, effects, etc.
2. JSX
React uses a syntax extension to JavaScript called JSX. We use it to create React “elements.”
JSX is used by preprocessors (such as Babel) to transform HTML-like text in JavaScript files into JavaScript objects that will be parsed.
3. Components
React components are what make our code reusable and split our UI into different pieces.
React components work identically to JavaScript functions. A React component accepts arbitrary inputs that we call props and should always return a React element describing what should be rendered to the user.
The simple way to define a React component is to define a JavaScript function and return a React element, like this:
We defined a React component called Welcome that accepts a single prop called props, which stands for properties, and returns a React element, in this case, a simple h1 element.
A React component should always return a React element, otherwise, it will throw an error.
4. React hooks
Hooks are functions that let developers "hook into" React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.
React provides a few built-in hooks like useState, useContext, useReducer , useMemo, and useEffect. Others are documented in the Hooks API Reference. useState , useReducer, and useEffect, which are the most used, are for controlling state and side effects respectively.
Rules of hooks
There are rules of hooks that describe the characteristic code pattern that hooks rely on. It is the modern way to handle a state with React.
Hooks should only be called at the top level (not inside loops or if statements).
Hooks should only be called from React function components, not normal functions or class components.
Although these rules can't be enforced at runtime, code analysis tools such as linters can be configured to detect many mistakes during development. The rules apply to both usage of hooks and the implementation of custom hooks, which may call other hooks.
The following is a rudimentary example of React usage in HTML with JSX and JavaScript.
The Greeter the function is a React component that accepts a property greeting. The variable App is an instance of the Greeter component where the greeting property is set to 'Hello World!'. The ReactDOM.render the method then renders our Greeter component inside the DOM element with id myReactApp.When displayed in a web browser the result will be
Conclusion
React is the most-used JavaScript UI library for creating modern applications in the world. What makes React shine and different from other frameworks is the powerful features and concepts that React introduced, such as JSX, virtual DOM, components, etc.
When you are learning React, you don’t need to worry about libraries at first. First, learn the basics, know how React works, learn about the features that React has compared to other frameworks and libraries.