IronPixel241/React-States

# React States Learning Repository

Welcome to the React States Learning Repository! This repository contains basic code examples and exercises to help you understand and master state management in React.

## Table of Contents

- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Code Examples](#code-examples)
  - [useState](#usestate)
  - [useEffect](#useeffect)
  - [useReducer](#usereducer)
  - [Context API](#context-api)
- [Contributing](#contributing)
- [License](#license)

## Introduction

State management is a core concept in React that allows you to create dynamic and interactive web applications. This repository is designed to provide you with hands-on examples and practice exercises to improve your understanding of React states.

## Getting Started

To get started with the examples in this repository, you need to have Node.js and npm (or yarn) installed on your machine. Follow the steps below to set up the project:

1. Clone this repository:
   ```bash
   git clone https://github.com/your-username/react-states-learning.git
   cd react-states-learning

2. Install the dependencies:

   npm install

   or

   yarn install

3. Start the development server:

   npm start

   or

   yarn start

4. Open your browser and navigate to http://localhost:3000 to see the examples in action.

Code Examples

useState

The useState hook is the most basic way to manage state in a functional component. It allows you to add state to your functional components and re-render them when the state changes.

Example:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

useEffect

The useEffect hook allows you to perform side effects in your functional components. It runs after the first render and after every update.

Example:

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

export default Timer;

useReducer

The useReducer hook is used for more complex state logic where the state depends on previous state values. It is often used as an alternative to useState.

Example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

Context API

The Context API allows you to share state across your application without having to pass props down manually at every level.

Example:

import React, { useState, useContext, createContext } from 'react';

const CountContext = createContext();

function Counter() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Counter />
    </CountContext.Provider>
  );
}

export default App;

Contributing

Contributions are welcome! If you have any improvements or additional examples, feel free to open a pull request. Please ensure that your contributions adhere to the existing coding style and include relevant documentation.

License

This repository is licensed under the MIT License. See the LICENSE file for more information.

Happy coding!