Some Basic Concepts of React
Tags: react, javascript
Published: 2021-05-04 20:18:46

1. What is React?
Ans: React is a JavaScript library created by Facebook for building user interfaces to make single page applications. React helps one to create reusable user interface components.



2. How does React Work?
Ans: In memory, React builds a VIRTUAL DOM. Instead of explicitly modifying the browser’s DOM, React builds a simulated DOM in memory and performs all necessary manipulations there before making modifications to the browser DOM. When anything is changed in the components react makes a virtual DOM and compare it with the previous virtual DOM and render only the changes in the browser DOM. React determines what modifications have been made and then makes the necessary changes.

3. What is JSX ?
Ans: JSX ( JavaScript XML ) is something that has made easier for us to write React applications by using HTML . We can write HTML directly inside the JavaScript code using JSX. JSX is an ES6-based extension of JavaScript that is converted into standard JavaScript at runtime.
Examples:

Without JSX:

const testElement = React.createElement('p', {}, "Let's understand the necessity of JSX...");

ReactDOM.render(testElement, document.getElementById('root'));
When We use JSX:
const testElement = <p>Let's understand the necessity of JSX...</p>;

ReactDOM.render(myelement, document.getElementById('root'));


4.What is React components?
Ans: Components are self-contained, interchangeable code chunks. They perform the same functions as JavaScript functions, but they operate independently and return HTML via the render() function.
Class and Function components are the two categories of components available.

Class Component:
The component’s name must begin with an upper case letter when making a React component.
The extends React.Component declaration must be used in the component; this statement establishes an inheritance from React.Component and grants your code access to functions of React.Component. The render() process, which returns HTML, is also required by the part.

Example:
class House extends React.Component {
  render() {
    return <h3>I am a beautiful House</h3>;
  }
}

Then the house component is rendered in the “root ” element:

ReactDOM.render(<House />, document.getElementById('root'));



Functional Component:

A Function component also returns HTML, and behaves pretty much the same way as a Class component.

Example:
const Car =()=> {
return <h3>I am a beautiful House!</h3>;
}

ReactDOM.render(<House />, document.getElementById('root'));

5. What is React Props?
Ans: React props is something by which data is passed to the child components from parent components. When we call a component inside another component then the inside component is called child component. Props are passed to components using HTML attributes. React Props are similar to JavaScript’s method arguments and HTML’s attributes. The same syntax is used as HTML attributes to give props to a component.
Example:

Let’s send a feature attribute to the home component:
const homeWithFeature= <Home color="red" />;
The Home component will receive the argument as a props object:

Example:

const home=(props)=> {

    return <h3>The color of mine is {props.color}</h2>;

}


6.What is react state?
Ans: A state object is used with React Components . The state is something where the property or the values of an component in stored . In a word react state is nothing but the data of a component when the data of any component is changed the component re-renders.

7. What is react lifecycle ?
Ans: A react component’s lifecycle is nothing but the combination of three phases like Mounting, Updating, and Unmounting. The term “mounting” refers to the process of inserting elements into the Document Object Model (DOM). When any change in the state happens that time it is called updating phase. Unmounting phase refers to the situation when the component is removed from the DOM.

8. What is React Hook?
Ans: Hooks are a recent feature that was added in React 16.8. It enables us to use React’s “condition” and other features without having to write a class. Hooks are functions that help one manipulate the state of a component by “hooking into” React state and lifecycle functionality from function components. It does not fit in a classroom environment. Hooks don’t take the place of a solid understanding of React terms.
Example:
Basic Hooks
•	useState
•	useEffect
•	useContext
Additional Hooks
•	useReducer
•	useCallback
•	useMemo
•	useRef
•	useImperativeHandle
•	useLayoutEffect
•	useDebugValue