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);

```

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);

```