I am going to some basic React Js as simply can explain
In my article, I am going to some basic React Js as simply can explain. Let’s get started.
1. What is React?
React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. React was created by Jordan Walke, a software engineer at Facebook.
However, React is maintained by Facebook and a group of developers and businesses. React may be used as a basis for creating a single-page web app or mobile apps.
2. Why React?
React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:
Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.
Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
3. Virtual Dom:
React keeps a lightweight representation of the “real” DOM in the memory, and that is known as the “virtual” DOM (VDOM). When the state of an object changes, VDOM changes only that object in the real DOM instead of updating all of the objects.
It may all seem a bit overwhelming for now, so let’s first understand what DOM is, and then we’ll go through how VDOM and real DOM interact with each other.
4. JSX: JavaScript extension?
JSX is a syntax extension JavaScript. It used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code. This makes the code easier to understand and debug, as it avoids the usage of complex JavaScript DOM structures.
In the example below, a variable called name declared and then use it inside JSX by wrapping it in curly braces:
const name = 'Amjad';
const element = <h1>Hello, {name}</h1>;
5.Transpiler?
A “transpiler” is defined as a compiler that transforms one type of syntax into another. Transpilers, like Babel or TypeScript, is used to translate JSX.
6. Elements?
Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen. An element is like a single frame in a movie: it represents the UI at a certain point in time. Unlike browser DOM elements, React elements are plain objects and are cheap to create. React DOM takes care of updating the DOM to match the React elements. Elements of Reacts are unalterable. You can’t alter the children or attributes once you create an element.
7. Components?
Components are independent and reusable bits of code. They serve the same role as functions in JavaScript, but they operate in isolation and return HTML with a render function. The components arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. There are two kinds of components in React, class components and functional components.
Example Function Component:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Example Class Component:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
8. Props?
Props are short for properties. It is a React built-in object which stores the value of a tag’s attributes and works similar to the HTML attributes. It provides a way to pass data from one component to other components in the same way as arguments are passed in a function.
— Firstly, define an attribute and its value(data).
— Then pass it to the child component(s) by using Props.
— Finally, render the Props Data.
9. States?
The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. The change in state can happen as a response to user action or system-generated events, and these changes determine the behavior of the component and how it will render.
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>Hello React</h1>
</div>
);
}
}As the state of the React component (which is part of its input) changes, the UI it reflects (its output) changes as well. This adjustment in the description of the UI must be reflected in the machine with which we are dealing. We need to update the DOM tree in a browser. We don’t do that manually in the React program. React will simply react to changes to the state and automatically (and efficiently) update the DOM as appropriate.
10. React Hooks?
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks are not a substitution for the knowledge of React core principles. Instead, Hooks offers a more direct API for the React concepts you already know: props, state, meaning, refs, and life cycle. Hooks also provide a strong new way to combine them. Here is an example of React useState Hook.
import React, { useState } from 'react';
function Example() {
// Declare a new state variable
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} items</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}All hooks start with the word “use.” Some of them can be used to provide a feature part with stateful elements (like useState), others can be used to handle side effects (like useEffect) or to cache/memoize functions and artifacts (like useCallback)