![bg right](https://images.unsplash.com/photo-1618477371303-b2a56f422d9e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w1NTU5NjN8MHwxfHNlYXJjaHwzfHxSZWFjdHxlbnwwfDF8fHwxNzExMDkwMTI0fDA&ixlib=rb-4.0.3&q=85) # Beginner's Guide to React Inje Lee --- # What is React? - JavaScript library for building user interfaces - Developed by Facebook - Allows for efficient and reusable UI components --- # Why use React? - Virtual DOM for efficient rendering - Component-based architecture - Large and active community support --- # React Components - Building blocks of React applications - Encapsulate UI logic and functionality - Can be reused and composed together --- # JSX Syntax - JavaScript XML syntax extension - Allows for writing HTML-like code in JavaScript - Transpiled to JavaScript by Babel ```jsx const element =

Hello, React!

; ``` --- # React Component Lifecycle - Mounting: Component is being created and inserted into the DOM - Updating: Component is being re-rendered due to changes in props or state - Unmounting: Component is being removed from the DOM --- # State and Props - State: Internal data of a component - Props: External data passed to a component ```jsx class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return

{this.state.count}

; } } ``` --- # React Hooks - Introduced in React 16.8 - Allows functional components to have state and lifecycle methods - Simplifies component logic and reduces code duplication ```jsx import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, [count]); return

{count}

; } ``` --- # React Router - Library for handling routing in React applications - Allows for navigation between different components/pages - Provides declarative routing configuration ```jsx import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; function App() { return ( ); } ``` --- # React Testing Library - Library for testing React components - Focuses on testing user interactions and behavior - Encourages writing tests from the user's perspective ```jsx import { render, fireEvent } from '@testing-library/react'; test('increments counter on button click', () => { const { getByText } = render(); const button = getByText('Increment'); fireEvent.click(button); expect(getByText('1')).toBeInTheDocument(); }); ``` --- # Resources - Official React documentation: [https://reactjs.org/](https://reactjs.org/) - React Hooks documentation: [https://reactjs.org/docs/hooks-intro.html](https://reactjs.org/docs/hooks-intro.html) - React Router documentation: [https://reactrouter.com/](https://reactrouter.com/) - React Testing Library documentation: [https://testing-library.com/docs/react-testing-library/intro](https://testing-library.com/docs/react-testing-library/intro) --- # Thank You!