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
Hello, Nile Bits!
;}
Class Components (Legacy)
class Welcome extends React.Component {
render() {
return
Hello, Nile Bits!
;}
}
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 =
Welcome to Nile Bits
;Without JSX:
const element = React.createElement('h1', null, 'Welcome to Nile Bits');
You can also embed JavaScript expressions:
const user = "Amr";
const element =
Hello, {user}!
;Props: Passing Data
Props (short for properties) let you pass data from parent to child.
function Greeting({ name }) {
return
Hello, {name}
;}
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 (
setCount(count + 1)}>
Clicked {count} times
);
}
Event Handling
Event handling in React is similar to JavaScript but uses camelCase.
function Button() {
const handleClick = () => alert("Clicked!");
return Click Me;
}
Conditional Rendering
React allows you to display components conditionally.
function UserStatus({ isLoggedIn }) {
return isLoggedIn ?
Welcome Back
:Please Log In
;}
Lists and Keys
Keys help React track changes in lists.
const items = ["React", "Vue", "Angular"];
function ItemList() {
return (
-
{items.map((item, index) => (
- {item} ))}
);
}
Lifecycle Methods and useEffect
Lifecycle in class components:
componentDidMount
componentDidUpdate
componentWillUnmount
With hooks:
import { useEffect } from "react";
function Example() {
useEffect(() => {
console.log("Mounted");
return () => console.log("Unmounted");
}, []);
return
Hello
;}
Hooks
Hooks allow using state and lifecycle features in functional components.
Common Hooks
useState
useEffect
useContext
useReducer
useRef
Example:
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => setSeconds((s) => s + 1), 1000);
return () => clearInterval(interval);
}, []);
return
{seconds} seconds
;}
Context API
Avoid prop drilling by using Context.
const ThemeContext = React.createContext("light");
function App() {
return (
);
}
function Toolbar() {
return ;
}
function ThemeButton() {
const theme = React.useContext(ThemeContext);
return {theme} mode;
}
React Router
For navigation, use React Router.
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
} />
} />
);
}
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.memo
useMemo
useCallback
const MemoizedComponent = React.memo(({ value }) =>
{value});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 (
Hello from React Native
);
}
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 (
setTask(e.target.value)} />
Add
-
{todos.map((todo, index) => (
- {todo} ))}
);
}
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 (
-
{users.map((user) => (
- {user.name} ))}
);
}
Best Practices
Keep components small.
Use hooks wisely.
Avoid prop drilling with Context.
Use state management tools for complex apps.
Optimize with memoization.
References
React Official Docs
React Router
Redux
Next.js
Top comments (0)