The Quick Guide to React Concepts
Table of Contents
The most widely used JavaScript library for creating contemporary, dynamic, and interactive user interfaces is called React. Building scalable and sustainable apps requires an understanding of React ideas, regardless of your level of experience with web programming.
From fundamentals like components and JSX to more complex ideas like hooks, context, performance optimization, and real-world project examples, we’ll cover it everything.
Components: The Building Blocks of React
In React, components are the foundation of everything you build. They are reusable pieces of UI that encapsulate logic and structure.
Functional Components
function Welcome() {
return <h1>Hello, Nile Bits!</h1>;
}Class Components (Legacy)
class Welcome extends React.Component {
render() {
return <h1>Hello, Nile Bits!</h1>;
}
}Best practice: Always prefer functional components with hooks for modern React applications.
JSX (JavaScript XML)
JSX is a syntax extension that allows you to write HTML-like code inside JavaScript.
const element = <h1>Welcome to Nile Bits</h1>;
Without JSX:
const element = React.createElement('h1', null, 'Welcome to Nile Bits');You can also embed JavaScript expressions:
const user = "Amr";
const element = <h1>Hello, {user}!</h1>;Props: Passing Data
Props (short for properties) let you pass data from parent to child.
function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}
<Greeting name="Amr" />- Props are read-only.
- They enable reusability.
- They can hold any JavaScript value.
State: Managing Dynamic Data
State is used when components need to manage data that changes over time.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}Event Handling
Event handling in React is similar to JavaScript but uses camelCase.
function Button() {
const handleClick = () => alert("Clicked!");
return <button onClick={handleClick}>Click Me</button>;
}Conditional Rendering
React allows you to display components conditionally.
function UserStatus({ isLoggedIn }) {
return isLoggedIn ? <h1>Welcome Back</h1> : <h1>Please Log In</h1>;
}
Lists and Keys
Keys help React track changes in lists.
const items = ["React", "Vue", "Angular"];
function ItemList() {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}Lifecycle Methods and useEffect
Lifecycle in class components:
componentDidMountcomponentDidUpdatecomponentWillUnmount
With hooks:
import { useEffect } from "react";
function Example() {
useEffect(() => {
console.log("Mounted");
return () => console.log("Unmounted");
}, []);
return <h1>Hello</h1>;
}Hooks
Hooks allow using state and lifecycle features in functional components.
Common Hooks
useStateuseEffectuseContextuseReduceruseRef
Example:
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => setSeconds((s) => s + 1), 1000);
return () => clearInterval(interval);
}, []);
return <h1>{seconds} seconds</h1>;
}Context API
Avoid prop drilling by using Context.
const ThemeContext = React.createContext("light");
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return <ThemeButton />;
}
function ThemeButton() {
const theme = React.useContext(ThemeContext);
return <button>{theme} mode</button>;
}React Router
For navigation, use React Router.
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}State Management Beyond React
For large applications, consider Redux, MobX, or Zustand.
function counterReducer(state = 0, action) {
switch (action.type) {
case "INCREMENT":
return state + 1;
default:
return state;
}
}Virtual DOM
React uses a virtual DOM to efficiently update only parts of the UI that changed.
Performance Optimization
Techniques:
React.memouseMemouseCallback
const MemoizedComponent = React.memo(({ value }) => <div>{value}</div>);Server-Side Rendering (SSR)
Using Next.js for better SEO and performance.
export async function getServerSideProps() {
return { props: { data: "Hello from server" } };
}React Native
React can also be used to build mobile apps.
import { Text, View } from 'react-native';
export default function App() {
return (
<View>
<Text>Hello from React Native</Text>
</View>
);
}Real-World Project Examples
Example 1: To-Do App
function TodoApp() {
const [todos, setTodos] = useState([]);
const [task, setTask] = useState("");
const addTodo = () => {
setTodos([...todos, task]);
setTask("");
};
return (
<div>
<input value={task} onChange={(e) => setTask(e.target.value)} />
<button onClick={addTodo}>Add</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}Example 2: Fetching API Data
function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}Best Practices
- Keep components small.
- Use hooks wisely.
- Avoid prop drilling with Context.
- Use state management tools for complex apps.
- Optimize with memoization.
