রিঅ্যাক্ট জেএস চিটশিট

import React from 'react';
import ReactDOM from 'react-dom';
 
const App = () => {
  return <h1>হ্যালো, রিঅ্যাক্ট জেএস!</h1>;
};
 
ReactDOM.render(<App />, document.getElementById('root'));

const Welcome = () => {
  return <p>স্বাগতম!</p>;
};

const Greeting = ({ name }) => {
  return <h2>হ্যালো, {name}!</h2>;
};
 
<Greeting name="রহিম" />;

import React, { Component } from 'react';
 
class MyComponent extends Component {
  render() {
    return <p>এটি ক্লাস কম্পোনেন্ট</p>;
  }
}

const element = (
  <div>
    <h1>শিরোনাম</h1>
    <p>এটি JSX</p>
  </div>
);

const name = "করিম";
const greeting = <p>হ্যালো, {name}!</p>;

import React, { useState } from 'react';
 
const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>গণনা: {count}</p>
      <button onClick={() => setCount(count + 1)}>বাড়ান</button>
    </div>
  );
};

import React, { useEffect, useState } from 'react';
 
const Timer = () => {
  const [time, setTime] = useState(0);
 
  useEffect(() => {
    const interval = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(interval); // ক্লিনআপ
  }, []);
 
  return <p>সময়: {time} সেকেন্ড</p>;
};

const inputRef = useRef();
<input ref={inputRef} />;
inputRef.current.focus();

<div>
  <h1>শিরোনাম</h1>
  <p>বিবরণ</p>
</div>

import React, { Fragment } from 'react';
 
const List = () => (
  <>
    <li>আইটেম ১</li>
    <li>আইটেম ২</li>
  </>
);

const ButtonClick = () => {
  const handleClick = () => alert('ক্লিক করা হয়েছে!');
  return <button onClick={handleClick}>ক্লিক করুন</button>;
};

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
 
const Home = () => <h2>হোম</h2>;
const About = () => <h2>আমাদের সম্পর্কে</h2>;
 
const App = () => (
  <Router>
    <nav>
      <Link to="/">হোম</Link> | <Link to="/about">আমাদের সম্পর্কে</Link>
    </nav>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

const style = { color: 'blue', fontSize: '20px' };
<p style={style}>নীল টেক্সট</p>;

/* styles.css */
.title {
  color: green;
  font-size: 24px;
}

import './styles.css';
 
<h1 className="title">শিরোনাম</h1>;

/* styles.module.css */
.title {
  color: red;
}

import styles from './styles.module.css';
 
<h1 className={styles.title}>মডিউল শিরোনাম</h1>;

const Form = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
 
  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };
 
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} placeholder="নাম" />
      <input name="email" value={formData.email} onChange={handleChange} placeholder="ইমেইল" />
      <button type="submit">জমা দিন</button>
    </form>
  );
};

const DataFetcher = () => {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }, []);
 
  return <p>{data ? data.message : 'লোড হচ্ছে...'}</p>;
};

const MyContext = React.createContext();
 
const App = () => {
  const [value, setValue] = useState('হ্যালো');
 
  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
};
 
const Child = () => {
  const contextValue = useContext(MyContext);
  return <p>{contextValue}</p>;
};

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-redux';
 
// রিডিউসার
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};
 
// স্টোর
const store = createStore(counterReducer);
 
// কম্পোনেন্ট
const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
 
  return (
    <div>
      <p>গণনা: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>বাড়ান</button>
    </div>
  );
};
 
// অ্যাপ
const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

import { useSpring, animated } from 'react-spring';
 
const FadeIn = () => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
 
  return <animated.div style={props}>ফেইড ইন</animated.div>;
};

import { render, screen } from '@testing-library/react';
 
test('রেন্ডার টেক্সট', () => {
  render(<p>হ্যালো</p>);
  expect(screen.getByText('হ্যালো')).toBeInTheDocument();
});

const ExpensiveComponent = React.memo(({ value }) => {
  return <p>মান: {value}</p>;
});

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
 
const TodoApp = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');
 
  const addTodo = () => {
    if (input) {
      setTodos([...todos, { id: Date.now(), text: input }]);
      setInput('');
    }
  };
 
  return (
    <div style={{ padding: 20 }}>
      <h1>টুডু লিস্ট</h1>
      <input value={input} onChange={(e) => setInput(e.target.value)} placeholder="নতুন কাজ" />
      <button onClick={addTodo}>যোগ করুন</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
};
 
const Home = () => <h2>হোম</h2>;
 
const App = () => (
  <Router>
    <nav>
      <Link to="/">হোম</Link> | <Link to="/todos">টুডু</Link>
    </nav>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/todos" component={TodoApp} />
    </Switch>
  </Router>
);
 
export default App;