First, let's start with React Hooks. React Hooks are a way to use state and other React features in functional components instead of class components. They were introduced in React 16.8 and have since become an essential part of React development.

The most commonly used React Hooks are useState, useEffect, and useContext. Let's start by learning about useState.

useState Hook:

useState allows you to add state to a functional component. Here is an example:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, we are creating a state variable called "count" and a function called "setCount" to update the count. We initialize the count to 0 using the useState Hook.

When the button is clicked, it calls the setCount function with a new value for count. React will then update the count variable and re-render the component with the new count value.

useEffect Hook:

The useEffect Hook is used to perform side effects in a functional component. Side effects include things like fetching data, modifying the DOM, or setting up event listeners. Here is an example:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, we are using the useEffect Hook to update the document title with the current count value. The useEffect Hook takes a function as its argument, which will be called after every render.

In this case, we are setting the document title to a string that includes the current count value. This will cause the document title to update whenever the count value changes.

useContext Hook:

The useContext Hook is used to access data that has been stored in a React Context object. Context allows you to pass data down through the component tree without having to manually pass props at every level. Here is an example:

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  return (
    <MyContext.Provider value="hello">
      <MyOtherComponent />
    </MyContext.Provider>
  );
}

function MyOtherComponent() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

In this example, we are creating a new React Context object using the createContext function. We then wrap a component tree with the MyContext.Provider component and pass a value of "hello" to the context.

In the MyOtherComponent component, we use the useContext Hook to access the value of the MyContext object. We can then use that value in our component as needed.

That covers the basics of React Hooks. Let's move on to React Context.

React Context:

React Context is a way to pass data down through the component tree without having to manually pass props at every level. Context is created using the createContext function and can be accessed using the useContext Hook.

Here is an example of how to use React Context:

import React, { createContext, useState }
const MyContext = createContext();

function MyComponent() {
const [value, setValue] = useState("hello");

return (
<MyContext.Provider value={value}>
<MyOtherComponent />
<button onClick={() => setValue("world")}>Change Value</button>
</MyContext.Provider>
);
}

function MyOtherComponent() {
const value = useContext(MyContext);

return <div>{value}</div>;
}

In this example, we are creating a new React Context object using the createContext function. We then create a state variable called "value" and set its initial value to "hello" using the useState Hook.

In the MyComponent component, we wrap the component tree with the MyContext. Provider component and pass the "value" state variable as the value of the context.

In the MyOtherComponent component, we use the useContext Hook to access the value of the MyContext object. We then render that value in a div.

We also add a button to the MyComponent component that, when clicked, will update the value of the "value" state variable to "world". This will cause the MyOtherComponent component to re-render with the new value.

That covers the basics of React Hooks and Context. There are many more Hooks and features to explore, but this should give you a good starting point. Remember to always read the React documentation and experiment with code to solidify your understanding. Good luck with your React journey!