React App Learning

This repository is dedicated to learning React from scratch. It encompasses various fundamental concepts and practical implementations essential for building React applications.

Table of Contents

1. Introduction to React
2. Project Setup
3. JSX and Rendering
4. Components
   • Functional Components
   • Class Components
5. Props and State
   • Props
   • State
6. Event Handling
7. Lifecycle Methods
8. Hooks
   • useState
   • useEffect
9. Routing
10. State Management
11. Styling Components
12. Build and Deployment

Introduction to React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It allows developers to create large web applications that can update and render efficiently in response to data changes.

Project Setup

The project is set up using Vite as the build tool, which offers a faster and leaner development experience compared to traditional tools like Create React App.

Commands to Set Up

1. Install Vite:

   npm create vite@latest react-app-learning --template react
   cd react-app-learning
   npm install
   

2. Start Development Server::

   npm run dev
   
   

Key Files:

• index.html: The main HTML file.
• src/: Contains React components and related code.
• package.json: Lists dependencies and scripts.
• vite.config.js: Configuration file for Vite.

JSX and Rendering

JSX is a syntax extension for JavaScript that resembles HTML. It is used with React to describe what the UI should look like. Each JSX element is syntactic sugar for calling React.createElement().

Example:

// src/App.jsx
import React from 'react';

const App = () => {
  const greeting = "Hello, React!";
  return <h1>{greeting}</h1>;
};

export default App;

Components

Components are the building blocks of a React application. They can be classified into:

Functional Components

These are simple JavaScript functions that return JSX. They are primarily used for rendering UI and do not have their own state.

Example:

const Greeting = () => <p>Welcome to React!</p>;

export default Greeting;

Class Components

These are ES6 classes that extend React.Component and can hold and manage their own state. They also have access to lifecycle methods.

Example:

import React, { Component } from 'react';

class Counter extends Component {
  render() {
    return <p>This is a class component.</p>;
  }
}

export default Counter;

Props and State

Props

Props (short for properties) are read-only attributes passed from parent to child components. They allow data to flow through the component tree.

Example:

const Welcome = (props) => <h2>Hello, {props.name}!</h2>;

export default Welcome;

State

State is a built-in object that allows components to create and manage their own data. Unlike props, state is local to the component and can be changed over time.

Example:

import React, { Component } from 'react';

class Counter extends Component {
  state = { count: 0 };

  increment = () => this.setState({ count: this.state.count + 1 });

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Event Handling

React provides a way to handle events such as clicks, form submissions, and more. Event handlers are passed as props to components and can be used to update the state or perform other actions.

Example:

const Button = () => {
  const handleClick = () => alert("Button clicked!");

  return <button onClick={handleClick}>Click Me!</button>;
};

export default Button;

Lifecycle Methods

Lifecycle methods are special methods in class components that allow developers to hook into different stages of a component's life (e.g., mounting, updating, unmounting).

Example:

import React, { Component } from 'react';

class LifecycleDemo extends Component {
  componentDidMount() {
    console.log("Component mounted!");
  }

  componentWillUnmount() {
    console.log("Component unmounted!");
  }

  render() {
    return <p>Check the console for lifecycle events.</p>;
  }
}

export default LifecycleDemo;

Hooks

Hooks are functions that let you use state and other React features without writing a class.

useState

The useState hook allows you to add state to functional components.

Example:

import React, { useState } from 'react';

const 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 lets you perform side effects in function components, such as data fetching or subscribing to events.

Example:

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

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

  useEffect(() => {
    const interval = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(interval);
  }, []);

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

export default Timer;

Routing

Routing in React is typically handled by libraries like React Router, which allows for navigation between different components/views in a single-page application.

Example:

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

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

State Management

For complex applications, state management libraries like Redux or Context API are used to manage the global state across the application.

Example - Using context API::

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

const CountContext = createContext();

const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
};

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

const App = () => (
  <CountProvider>
    <Counter />
  </CountProvider>
);

export default App;

Styling Components

Styling in React can be done using various methods, including CSS files, inline styles, CSS Modules, or styled-components for a more component-centric approach.

Using CSS Modules::

/* src/Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

import React from 'react';
import styles from './Button.module.css';

const Button = () => <button className={styles.button}>Click Me</button>;

export default Button;

Build and Deployment

The project uses Vite for building the application. Deployment can be done on various platforms like Vercel, Netlify, or traditional web servers.

Note: This README.md is a general template. For more detailed explanations and code examples, please refer to the individual components and commits in the repository.