Introduction to React
React is a JavaScript library for building user interfaces, particularly single-page applications. It's maintained by Meta (formerly Facebook) and a community of individual developers and companies.
Why Choose React?
- Component-Based Architecture: Build encapsulated components that manage their own state.
- Declarative Approach: React makes it easy to create interactive UIs by designing simple views for each state.
- Learn Once, Write Anywhere: Develop new features without rewriting existing code.
- Vast Ecosystem: Huge community with libraries and tools for nearly every use case.
Setting Up Your React Environment
Let's get started with setting up a React development environment:
- Install Node.js and npm: React requires Node.js version 14 or higher.
- Create a React App: Use Create React App for a streamlined setup process.
- Choose an IDE: Popular choices include VSCode, WebStorm, or Atom.
Creating Your First React App
# Install Create React App globally
npm install -g create-react-app
# Create a new React project
npx create-react-app my-first-react-app
# Navigate to the project directory
cd my-first-react-app
# Start the development server
npm startReact Fundamentals
Let's explore the core concepts of React:
JSX - JavaScript XML
// JSX allows HTML-like syntax in JavaScript
function Greeting() {
return (
<div className="greeting">
<h1>Hello, React!</h1>
<p>Welcome to your first React component.</p>
</div>
);
}
export default Greeting;JSX looks like HTML but comes with the full power of JavaScript. It's transpiled to regular JavaScript by tools like Babel.
Components
React applications are built from components. Here are the two types:
// Functional Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// Class Component
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}Functional components are preferred in modern React applications, especially with the introduction of Hooks.
Props and State
// Component with props
function UserProfile(props) {
return (
<div>
<h1>{props.name}</h1>
<p>Age: {props.age}</p>
<p>Location: {props.location}</p>
</div>
);
}
// Using the component
<UserProfile name="John Doe" age={28} location="New York" />
// Component with state using Hooks
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Intermediate React
Once you've mastered the basics, let's move on to more advanced concepts:
React Hooks
import { useState, useEffect, useContext } from 'react';
function ProfilePage() {
// State Hook
const [user, setUser] = useState(null);
// Effect Hook
useEffect(() => {
// Fetch user data when component mounts
fetchUserData().then(data => setUser(data));
// Cleanup function - runs when component unmounts
return () => {
console.log('Component unmounted');
};
}, []); // Empty dependency array means this runs once on mount
if (!user) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{user.name}</h1>
<p>{user.bio}</p>
</div>
);
}Common hooks include:
useState: For managing local component stateuseEffect: For side effects (API calls, subscriptions)useContext: For consuming contextuseReducer: For complex state logicuseRef: For accessing DOM elements directly
Context API
// Create a context
import { createContext, useContext, useState } from 'react';
const ThemeContext = createContext();
// Provider component
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// Consumer component
function ThemedButton() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button
onClick={toggleTheme}
style={{
background: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#333' : '#fff'
}}
>
Toggle Theme
</button>
);
}
// Usage
function App() {
return (
<ThemeProvider>
<div className="app">
<ThemedButton />
</div>
</ThemeProvider>
);
}React Router
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/dashboard">Dashboard</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}Advanced React
Let's dive into some advanced React concepts:
Performance Optimization
import { memo, useCallback, useMemo } from 'react';
// Memoize a component
const MemoizedComponent = memo(function ExpensiveComponent({ data }) {
// This component will only re-render if 'data' changes
return <div>{/* render data */}</div>;
});
function ParentComponent() {
const [count, setCount] = useState(0);
// Memoize a function
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []); // Dependencies array
// Memoize a computed value
const expensiveCalculation = useMemo(() => {
return performExpensiveCalculation(count);
}, [count]);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<MemoizedComponent data={expensiveCalculation} onClick={handleClick} />
</div>
);
}Custom Hooks
// Custom hook for managing form inputs
function useFormInput(initialValue) {
const [value, setValue] = useState(initialValue);
function handleChange(e) {
setValue(e.target.value);
}
return {
value,
onChange: handleChange
};
}
// Using the custom hook
function SignupForm() {
const name = useFormInput('');
const email = useFormInput('');
const password = useFormInput('');
function handleSubmit(e) {
e.preventDefault();
// Submit form logic
console.log({
name: name.value,
email: email.value,
password: password.value
});
}
return (
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Name" {...name} />
<input type="email" placeholder="Email" {...email} />
<input type="password" placeholder="Password" {...password} />
<button type="submit">Sign Up</button>
</form>
);
}Error Boundaries
import { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// Log the error to an error reporting service
console.error('Error caught by boundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Usage
function App() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
}Conclusion
Congratulations on completing this React for beginners tutorial! You've learned everything from basic components to advanced concepts like custom hooks and error boundaries.
Remember that learning React is an ongoing journey. The best way to solidify your knowledge is to build projects and explore the React ecosystem further. Consider diving into state management libraries like Redux or exploring React frameworks like Next.js or Gatsby.
Happy Coding!
