React.
js Learning Plan
Day 1-2: Introduction to React
- What is React? React is a JavaScript library for building user interfaces, primarily for single-page
applications. It allows you to build reusable UI components.
- React Setup: Use 'Create React App' to set up a new project quickly. Install using npm or yarn.
- React Components: Components are the building blocks of React apps. There are two types: Functional
and Class Components.
- JSX: JavaScript XML, a syntax extension that allows mixing HTML with JavaScript.
Example:
```
function HelloWorld() {
return <h1>Hello, world!</h1>;
```
Day 3: Props and State
- Props: Props (short for properties) are used to pass data from one component to another.
- State: State is used to store information that may change over time in a component.
- Event Handling: React allows you to handle user events (like clicks) via synthetic events.
Example:
```
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
```
Day 4: Conditional Rendering and Lists
- Conditional Rendering: Use JavaScript conditions to render elements based on some logic.
- Lists: You can render lists dynamically using the array `map()` function.
- Keys: Keys help React identify which items have changed or are removed.
Example:
```
function TodoList({ todos }) {
return (
<ul>
{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
</ul>
);
```
Day 5: Forms and Controlled Components
- Controlled Components: Form inputs where React controls the value via state.
- Managing Form State: Use `useState` hook to manage the value of form elements.
Example:
```
function Form() {
const [name, setName] = useState("");
return (
<form>
<input value={name} onChange={(e) => setName(e.target.value)} />
</form>
);
```
Day 6: React Lifecycle Methods
- Lifecycle Methods: Methods like `componentDidMount`, `componentDidUpdate`, and
`componentWillUnmount` are used to perform side effects in class components.
- Hooks: Hooks like `useState` and `useEffect` provide a functional alternative to lifecycle methods.
Example:
```
useEffect(() => {
document.title = `Hello ${name}`;
}, [name]);
```
Day 7-8: React Hooks (Part 1 & 2)
- `useState`: Hook to manage state in functional components.
- `useEffect`: Hook for side effects like fetching data or manually changing the DOM.
- Custom Hooks: Reusable logic using hooks.
Example:
```
function useCounter() {
const [count, setCount] = useState(0);
return [count, () => setCount(count + 1)];
```
Day 9: React Router
- React Router: A library for routing in React applications.
- `Link` and `NavLink`: Components for navigation without page refresh.
- Route Params: Pass parameters through routes.
Example:
```
<Route path="/user/:id" component={UserPage} />
```
Day 10: Lifting State Up & Context API
- Lifting State: When two components need to share state, the state should be lifted up to their closest
common ancestor.
- Context API: Avoid prop drilling by providing global state through the React context.
Example:
```
const ThemeContext = React.createContext('light');
function ThemeButton() {
const theme = useContext(ThemeContext);
return <button theme={theme}>Button</button>;
```
Day 11: Managing Side Effects
- Side Effects: Use `useEffect` for data fetching, subscriptions, or manually changing the DOM.
- Asynchronous Operations: Handle async tasks like fetching data from APIs with `fetch()` or `axios`.
Example:
```
useEffect(() => {
async function fetchData() {
const res = await fetch('url');
setData(await res.json());
fetchData();
}, []);
```
Day 12: Advanced Component Patterns
- Higher-order Components (HOC): A function that takes a component and returns a new component.
- Render Props: A technique for sharing code between components using a prop whose value is a
function.
Example:
```
function withAuth(Component) {
return function AuthComponent(props) {
const isLoggedIn = useAuth();
return isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />;
};
```
Day 13: Testing React Components
- Testing: Write tests to verify component behavior using libraries like Jest and React Testing Library.
Example:
```
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
```
Day 14: Performance Optimization
- Code Splitting: Use `React.lazy` and `Suspense` for lazy loading.
- Memoization: Optimize performance using `React.memo`, `useMemo`, and `useCallback`.
Example:
```
const MemoizedComponent = React.memo(MyComponent);
```
