React Interview 101

Key features of react

1. Virtual DOM

2. Component based architecture

3. Reusability

4. JSX

5. Declarative syntax

6. Hooks

7. Community & Ecosystem

Fetching data using useEffect and useState hook.

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are: fetching data, directly updating the DOM.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

import "./styles.css";
import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [user, setUser] = useState([]);

  useEffect(() => {
    async function getUsers() {
      try {
        const response = await axios.get(
          "https://jsonplaceholder.typicode.com/users"
        );
        setUser(response.data);

      } catch (err) {
        console.log(err);
      }
    }

    getUsers();
  }, []);

  return (
    <div className="App">
      <h2>User's list</h2>
      {user.map((user) => {
        return (
          <div key={user.id} className="grid grid-cols-2">
            <h2>{user.username}</h2>
            <div>{user.email}</div>
          </div>
        );
      })}
    </div>
  );
}