Some Interesting Topics About React.JS

Before discussing React.JS we need to learn what is front-end. A front-end application is what the user sees and interacts with. So why do we need to know about the front-end? Because, React.Js is an open, front-end javascript library that is used for building front-end applications and users interface created by Facebook. In this article, we will learn about some interesting topics about React.JS.

It’s a library

In the framework, some decision has already been made for the developers. As React.JS is a library developer has to make all the decision. React.JS helps developers to build a user interface with components. It is easy for React to mix with another 3rd party app.

Component

In React.JS components are used to describe UI. So What are components? Components are like a building block in React.js. Component divides the UI into smaller pieces. Components are reusable, composable, and stateful. Component name always starts with a capital letter. Components consist of code that works like function or class. There are two types of components is React.JS, functional components, and class components.

Functional Component

Functional components are basically JavaScript functions. Functional components return JSX.To use a functional component in another component we need to export the function so that can we use the component later by importing it into some other component. Functional component use and accept props and return React Element.

function Home(props) {
return <h1>This is home componets, {props.name}</h1>;
}

Class Component

A class component is a JavaScript class that extends the component class in React. In a class-based component, props can be pass to a class component and they can be accessed by using props in the functional component and this. props in-class component. React lifecycle method can be used in-class components. Class component have a render( ) method for returning JSX

class Home extends React.Component {
render() {
return <h1>This is home componets, {this.props.name}</h1>;
}
}

JSX

JSX is one of the core concepts of React.JSX means JavaScript XML. JSX allows writing HTML in React. JSX is like an extension to JavaScript.JSX is helpful while working inside the JavaScript code. Allow React to show more error and warning messages.JSX can be used inside of if statement and for loops.

const example= (
  <div>
    <h1>Hello! This is a example of JSX.</h1>
   
  </div>
);

Hooks

Hooks are introduced in React 16.8. Hooks are functions that allow us to use state and lifecycle features in the functional components. Without making class components hooks allow us to make a React application with the help of a functional component. It means by using hooks we can use state and other functions of React without depending on the class components. useEffect, useState,useContext, etc are some of the built-in hooks of React.

function Example() {
  const hello= useContext(helloContext);  
}

Props

React have a special object which is called props or property which is used to transfer data from one component to another component. Props don’t transfer data from parent to child or at the same level it only transfers data from parent to child component.

functionHello(props) {
return (
<div>
  <h1>Hello,this is  {props.name}</h1>
</div>
);
}

State

Data that exist in an application for user interaction are called a state. A state contains specific data in a component that will change over time. A state is a built-in object, which can create and manage data.

function Counter() {
const [count,setCount]=useState(10);
return (
 <div>
<h1> Count:{count}</h1>
</div>
);
}

Virtual DOM

In a programming language, virtual dom is an idea, which has all the property of a real DOM. It is the repression of UI and synced with the real DOM. It has all property of a real DOM but it doesn’t have the same amount of power as real DOM has. Virtual DOM doesn’t have that much power to change directly what’s on-screen. DOM manipulation is slow on the other hand virtual DOM manipulation is faster as nothing really changes on the screen. Virtual DOM is like a design on paper or like a blueprint, anyone can change it but nothing will happen with a real product.

How rendering works

React calls the render() method to update the component is the virtual DOM. Compare it to what’s rendered in the browser. If there any change to React tries to smallest possible update in the Dom.

Conditional rendering

Conditional rendering is similar to the conditional operator in JavaScript. Depending on the condition of the state React do the necessary in UI. If the condition matches then React will show one kind of result. If the condition does not match React will show another kind of result.

Conditional rendering (parent component)

function App() {
const [familiar, setFamiliar] = useState(false);
return (
<div >
 <h2>Is Familiar: {familiar.toString()}</h2>
 <button onClick={()=>setFamiliar(!familiar)}>Toggle Friend</button>
 <User familiar = {familiar}></User>
</div>
);
}

Conditional rendering (child component)

const User = (props) => {
const familiar = props.familiar;
let greetings;
if(familiar){
greetings = <div>Welcome, my friend.</div>
}
else{
greetings = <p>I don't know you.</p>;
}
return (
<div>
 <h2>Greetings</h2>
 {greetings}
</div>
);
}