1
2
3
4
npx create-react-app my-app
cd my-app
npm start

1
2
3
4
5
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

1
2
3
4
npm init -y
npm install react react-dom
npm install -D @babel/core @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader

1
2
3
4
5
6
7
8
9
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow Function Syntax
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

1
2
3
4
5
6
7
8
import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

1
2
3
4
const element = <h1 className="greeting">Hello, world!</h1>;
const expr = <div>{2 + 2}</div>;
const list = <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import PropTypes from 'prop-types';

function UserProfile({ name, age }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

UserProfile.defaultProps = {
  age: 0
};

1
2
3
4
5
6
7
8
9
10
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>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Button() {
  const handleClick = (e) => {
    console.log('Button clicked', e);
  };

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

function Form() {
  const handleChange = (e) => {
    console.log(e.target.value);
  };

  return <input type="text" onChange={handleChange} />;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  // Component Did Mount / Update
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // Cleanup function (Component Will Unmount)
    return () => {
      // Cancel subscriptions, clear timers
    };
  }, []); // Empty dependency array means run once

  return data ? <div>{data}</div> : <div>Loading...</div>;
}

1
2
const [state, setState] = useState(initialValue);

1
2
3
4
5
6
7
useEffect(() => {
  // Side effect code
  return () => {
    // Cleanup code
  };
}, [dependencies]); // Optional dependency array

1
2
3
4
5
6
7
8
9
10
11
12
13
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>{theme}</div>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };
    
    window.addEventListener('resize', handleResize);
    handleResize(); // Initial call
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const MyContext = React.createContext(defaultValue);

function Provider({ children }) {
  const [state, setState] = useState(initialState);
  
  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
}

function Consumer() {
  const { state, setState } = useContext(MyContext);
  return <div>{state}</div>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
function Greeting({ isLoggedIn }) {
  // If statement
  if (!isLoggedIn) {
    return <LoginButton />;
  }

  // Ternary operator
  return isLoggedIn ? <UserProfile /> : <LoginForm />;

  // Logical AND
  return isLoggedIn && <WelcomeMessage />;
}

1
2
3
4
5
6
function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
function Form() {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={value} 
        onChange={(e) => setValue(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Increment
      </button>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const MemoizedComponent = React.memo(MyComponent);

function ExpensiveComponent({ data }) {
  const memoizedValue = useMemo(() => {
    return computeExpensiveValue(data);
  }, [data]);

  const memoizedCallback = useCallback(() => {
    doSomething(data);
  }, [data]);

  // Lazy loading
  const LazyComponent = React.lazy(() => import('./LazyComponent'));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { render, screen, fireEvent } from '@testing-library/react';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

test('button click increments counter', () => {
  render(<Counter />);
  const button = screen.getByText('Increment');
  fireEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

1
2
3
4
5
6
7
# Create production build
npm run build

# Deployment (Create React App)
npm install -g serve
serve -s build

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
import React, { FC } from 'react';

interface UserProps {
  name: string;
  age?: number;
}

const User: FC<UserProps> = ({ name, age = 0 }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};