“Réagir les questions d'entrevue” Réponses codées

Réagir les questions d'entrevue

1) What is JSX

// Instead of putting JavaScript into HTML, JSX allows us to put HTML 
// into JavaScript.

// JSX helps in making the code easier to understand and debug.

2) What is Virtual DOM?

// React keeps a lighweight representaion of the Real DOM in the memory.

// When you make some change, the virtual DOM only changes the specific 
// object in the dom instead all of the objects.

// Virtual Dom understands which area needs to send the update and 
// avoids the other areas.

3) What are React Extensions? Name a few

 React Native // hybrid mobile
 Flux // responsible to attach the state management system

4) What is an Event in React? How do you Create one ?

// An event is an action that can be triggered by a User or any System 
// like pressing a key, or a mouse click. etc

// onClick
// onMouseOver
// onMouseEnter 
// onMouseLeave
// onMouseMove

<button onClick={activateLasers}> 
 Activate Lasers
</button>

5) What are Components in React

// Components are the building blocks of a React application's UI.
// It split up the entire UI into small independent pieces.
// Then it renders each of these components independent of each other 
// without affecting the rest of the UI

6) What is a State in React? Do you implement it? 

// React object that is used to contain data or information about the 
//  component.

// A state can be modified based on the user action or network changes.

// Every time the state of an object changes, React re-renders the 
// components to the browser.

// Initial the state
// Render the state
// Update the state


// class

class BalanceInquiry extends Component {
  constructor(props) {
    super(props);
    this.state = {
      totalIncome: 10,
    };
  }

  render() {
    return <div>totalIncome 
		{this.state.totalIncome}
				</div>;
  }
}

// Function 

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count" 
  const [count] = useState(10);
  return (
    <div>
      <p> {count} </p>
    </div>
  );
}

7) What are the Higher-order and Pure Components in React?

// A higher-order component is a function that takes a component and 
//  returns a new component.

// A higher-order component is a class-based component. And it does a 
//  shallow comparison of props and state.

// React components can be considered pure if it renders the same 
//  output for the same state tare and props


8) How do you implement React Routing?

//

import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'

export default  () => {
  return (
    // Router
    <BrowserRouter>
      <div>
        {/* Nav */}
        <nav>
          <ul>
            <li>
						<Link to="/">Home</Link>
						</li>
            <li>
						<Link to="/about">About</Link>
						</li>
          </ul>
        </nav>
      {/* Routes */}
      <Routes>
        <Route exact path='/' element={<Home />} /> 
        <Route path='about' element={<About />} /> 
      </Routes>
      </div>
    </BrowserRouter>
  );
}