Some Basic Concepts of React

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.

Virtual DOM:

3. What is JSX ?

Rendering: Now we have react element which is nothing but javaScript object. To show the elements in the browser DOM, we have to use another library called ReactDom. In a function of ReactDom called ‘render’, we need to pass the element. When we pass the element to the react-dom by render method first it checks the syntactic error then it generally renders the element to a defined html element(Generally div of index.html in public folder).


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(testElement, document.getElementById(’root’));

4.What is React components?

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.


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.


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

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

5. What is React Props?


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:


const home=(props)=> {

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


6.What is react state?

7. What is react lifecycle ?

8. What is React Hook?


Basic Hooks

  • useState
  • useEffect
  • useContext

Additional Hooks

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue