React.js beginner guideline

Every beginner doesn’t know how to start react.js and what is the prerequisite for react.js.so in this blog, I will introduce how to start and as a beginner what you will need to know

1. Component

react is a component base javascript library. the component will give you more benefits that you won’t be able to get from vanilla javascript.any component you can use anywhere.so, you don’t need to know re-write it in your code editor.every react developer have to be pro on using component.

2.JSX

JSX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM.

import React from 'react';
import ReactDOM from 'react-dom';
 
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'));

A JavaScript file containing JSX will have to be compiled before it reaches a web browser. The code block shows some example JavaScript code that will need to be compiled.

3.Nested JSX elements

const myClasses = (
  <a href="https://www.codecademy.com">
    <h1>
      Sign Up!
    </h1>
  </a>
);

In order for the code to compile, a JSX expression must have exactly one outermost element. In the below block of code the <a> tag is the outermost element.

4.Component Mount

A React component mounts when it renders to the DOM for the first time. If it’s already mounted, a component can be rendered again if it needs to change its appearance or content.

5.Unmounting Lifecycle Method

React supports one unmounting lifecycle method, componentWillUnmount, which will be called right before a component is removed from the DOM.

6.Why Hooks?

Hooks allow us to:

• reuse stateful logic between components
• simplify and organize our code to separate concerns, rather allowing unrelated data to get tangled up together
• avoid confusion around the behavior of the this keyword
• avoid class constructors, binding methods, and related advanced JavaScript techniques

7.The State Hook

The useState() Hook lets you add React state to function components. It should be called at the top level of a React function definition to manage its state.

8.Multiple State Hooks

function App() {
 const [sport, setSport] = useState('basketball');
 const [points, setPoints] = useState(31);
 const [hobbies, setHobbies] = useState([]);
}

useState() may be called more than once in a component. This gives us the freedom to separate concerns, simplify our state setter logic, and organize our code in whatever way makes the most sense to us!

9.Side Effects