DEV Community

Cover image for The Quick Guide to React Concepts
Amr Saafan for Nile Bits

Posted on

The Quick Guide to React Concepts

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)