React

Introduction:

"React.js made creating dynamic and responsive user interfaces intuitive and fun." 

React.js is a powerful JavaScript library for building user interfaces. It taught me how to structure web applications into reusable components, manage states efficiently, and create highly interactive web pages.

Key Topics Learned

1. Introduction to React:

   • Setting up a React app using create-react-app and Vite.

   • Understanding the virtual DOM and JSX syntax.

# Setting up a React app

npx create-react-app my-app

cd my-app

npm start

# Setting up with Vite

npm create vite@latest my-app --template react

cd my-app

npm install

npm run dev

// JSX Example

const App = () => <h1>Hello, React!</h1>;

export default App;

2. Components:

   • Creating functional and class components.

   • Passing data using props and managing local states.

// Functional Component

const Greeting = ({ name }) => <h2>Hello, {name}!</h2>;

// Class Component

import React, { Component } from "react";

class Greeting extends Component {

  render() {

    return <h2>Hello, {this.props.name}!</h2>;

  }

}

// Using Components

const App = () => <Greeting name="John" />;

export default App;

3. React Hooks:

   • Managing state and side effects with useState and useEffect.

   • Exploring additional hooks like useContext and useReducer.

// useState and useEffect

import { useState, useEffect } from "react";

const Counter = () => {

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

  useEffect(() => console.log("Count updated:", count), [count]);

  return (

    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>

  );

};

// useContext

const ThemeContext = React.createContext("light");

const ThemeSwitcher = () => {

  const theme = React.useContext(ThemeContext);

  return <div>Current theme: {theme}</div>;

};

4. Event Handling:

   • Handling user interactions like clicks, form submissions, and input changes.

const Form = () => {

  const [input, setInput] = useState("");

  const handleSubmit = (e) => {

    e.preventDefault();

    console.log("Input submitted:", input);

  };

  return (

    <form onSubmit={handleSubmit}>

      <input onChange={(e) => setInput(e.target.value)} value={input} />

      <button type="submit">Submit</button>

    </form>

  );

};

5. Routing:

   • Implementing navigation with react-router-dom for single-page applications (SPAs).

npm install react-router-dom

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

const Home = () => <h1>Home</h1>;

const About = () => <h1>About</h1>;

const App = () => (

  <Router>

    <nav>

      <Link to="/">Home</Link>

      <Link to="/about">About</Link>

    </nav>

    <Switch>

      <Route exact path="/" component={Home} />

      <Route path="/about" component={About} />

    </Switch>

  </Router>

);

6. API Integration:

   • Fetching and displaying data from third-party APIs using fetch or axios.

import { useState, useEffect } from "react";

import axios from "axios";

const DataFetcher = () => {

  const [data, setData] = useState([]);

  useEffect(() => {

    axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {

      setData(res.data);

    });

  }, []);

  return (

    <ul>

      {data.map((item) => (

        <li key={item.id}>{item.title}</li>

      ))}

    </ul>

  );

};

7. State Management:

   • Managing global state using React Context or libraries like Redux.

// Using React Context

const CounterContext = React.createContext();

const CounterProvider = ({ children }) => {

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

  return (

    <CounterContext.Provider value={{ count, setCount }}>

      {children}

    </CounterContext.Provider>

  );

};

const Counter = () => {

  const { count, setCount } = React.useContext(CounterContext);

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

};

const App = () => (

  <CounterProvider>

    <Counter />

  </CounterProvider>

);

8. Styling in React:

   • Using CSS Modules, styled-components, or Tailwind CSS for styling React apps.

// CSS Modules

import styles from "./Button.module.css";

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

// Styled-Components

import styled from "styled-components";

const StyledButton = styled.button`

  background: blue;

  color: white;

  padding: 10px;

`;

const App = () => <StyledButton>Click Me</StyledButton>;

// Tailwind CSS

// Install: npm install -D tailwindcss

const Button = () => <button className="bg-blue-500 text-white p-2">Click Me</button>;