React
React Development
Learn how to build modern user interfaces with React.
What You’ll Learn
This section covers React fundamentals and best practices:
- React Basics: Components, JSX, and props
- State Management: useState and state updates
- Effects: useEffect hook and side effects
- Lists & Conditionals: Rendering dynamic content
- Forms: Handling user input
- Patterns: Best practices and common patterns
Prerequisites
Before starting React, you should understand:
- JavaScript fundamentals (especially ES6+)
- Arrow functions and destructuring
- Array methods (especially
.map())
- Async programming
- Browser JavaScript basics
Coming Soon
React tutorials are currently being developed. Check back soon!
What is React? React is a JavaScript library for building user interfaces, created and maintained by Meta (Facebook). It’s one of the most popular tools for building modern web applications.
Why React? 1. Component-Based Architecture
React lets you break your UI into reusable components:
function WelcomeMessage() { return <h1>Welcome to React!</h1>; } function App() { return ( <div> <WelcomeMessage /> <WelcomeMessage /> </div> ); } 2. Declarative
You describe what the UI should look like, and React handles how to update it:
JSX - JavaScript XML JSX is a syntax extension for JavaScript that lets you write HTML-like code in your JavaScript files. It’s one of React’s most distinctive features.
What is JSX? JSX looks like HTML but it’s actually JavaScript:
const element = <h1>Hello, world!</h1>; This is neither a string nor HTML - it’s JSX! Babel compiles it to JavaScript:
// What you write const element = <h1>Hello, world!</h1>; // What it becomes const element = React.
React Components Components are the building blocks of React applications. They let you split the UI into independent, reusable pieces.
What is a Component? A component is a JavaScript function that returns JSX:
function Welcome() { return <h1>Hello, React!</h1>; } That’s it! A component is just a function that returns what to display.
Function Components The modern way to create components (React 16.8+):
function Greeting() { return <h1>Hello!</h1>; } // Arrow function version const Greeting = () => { return <h1>Hello!
Props - Passing Data to Components Props (short for “properties”) are how you pass data from parent components to child components in React. They’re React’s way of making components reusable and dynamic.
What Are Props? Props are arguments passed to components, just like function parameters:
// Parent passes data via props function App() { return <Greeting name="Alice" age={25} />; } // Child receives props as an object function Greeting(props) { return <h1>Hello, {props.
State - Making Components Interactive State is data that changes over time. While props are passed from parent to child, state is managed within the component itself. State is what makes React components interactive.
What is State? State is a component’s memory - data it needs to remember between renders:
import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ); } Every time you click, count updates and the component re-renders with the new value.
useEffect - Side Effects in React The useEffect hook lets you perform side effects in function components. Side effects are operations that interact with the outside world: data fetching, subscriptions, timers, manual DOM manipulation, and more.
What is useEffect? import { useEffect } from 'react'; function Component() { useEffect(() => { // Side effect code here console.log('Effect ran!'); }); return <div>Hello</div>; } useEffect runs after every render by default.
Basic Syntax useEffect(() => { // Effect code return () => { // Cleanup code (optional) }; }, [dependencies]); Three parts:
What is Event Handling? Event handling is how you respond to user interactions like clicks, typing, and form submissions. React makes event handling straightforward with a consistent API across all browsers.
function Button() { function handleClick() { alert('Button clicked!'); } return <button onClick={handleClick}>Click Me</button>; } Key differences from HTML:
React events use camelCase: onClick not onclick Pass function reference: onClick={handleClick} not onClick="handleClick()" Can’t return false to prevent default - must call preventDefault() onClick - Handling Clicks The most common event handler for buttons and clickable elements:
What is Conditional Rendering? Conditional rendering is showing different UI based on certain conditions. Just like if/else in JavaScript, you can control what gets displayed in your React components.
function Greeting({ isLoggedIn }) { if (isLoggedIn) { return <h1>Welcome back!</h1>; } return <h1>Please sign in.</h1>; } if/else Statements Basic if/else function LoginStatus({ isLoggedIn }) { if (isLoggedIn) { return <p>You are logged in</p>; } else { return <p>Please log in</p>; } } With Variables function Dashboard({ user }) { let content; if (user.
Rendering Lists in React Lists are one of the most common patterns in React. You’ll use .map() to transform arrays into JSX elements.
function FruitList() { const fruits = ['Apple', 'Banana', 'Orange']; return ( <ul> {fruits.map(fruit => ( <li key={fruit}>{fruit}</li> ))} </ul> ); } The .map() Method .map() transforms each array item into JSX:
Basic List function NumberList() { const numbers = [1, 2, 3, 4, 5]; return ( <ul> {numbers.
Controlled Components In React, form inputs are “controlled” by component state - React controls the input value:
function NameForm() { const [name, setName] = useState(''); return ( <form> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /> <p>Hello, {name}!</p> </form> ); } Controlled = React state is the “single source of truth”
Input value comes from state Input onChange updates state State controls what user sees Text Inputs Basic Text Input function EmailForm() { const [email, setEmail] = useState(''); function handleSubmit(event) { event.