React Complete Beginner Guide with Theory and Examples

1. What is React?

React is an open-source JavaScript library created by Facebook for building fast and interactive user

interfaces. It is primarily used for developing single-page applications where data changes over time. Instead

of manipulating the DOM directly, React uses a virtual DOM to efficiently update only the parts that need to

change.

Key Features:

- Component-Based Architecture: Break the UI into reusable components.

- Declarative: React makes it painless to create interactive UIs.

- Virtual DOM: Minimizes direct manipulation of the DOM for better performance.

- Learn Once, Write Anywhere: Can be used for web, mobile (React Native), and desktop (Electron).

Example:

React lets you write components like this:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

2. Setting Up a React Project

To start a React project, you can use Create React App or Vite.

Create React App:

npx create-react-app my-app

cd my-app

npm start

Vite (a fast bundler):

npm create vite@latest my-app

cd my-app

npm install

npm run dev

These commands set up the folder structure, install dependencies, and run a local development server.

3. Understanding JSX

JSX (JavaScript XML) is a syntax extension for JavaScript used with React to describe what the UI should

look like. It lets you write HTML inside JavaScript.

Rules:

- JSX must have one parent element.

- Use className instead of class.

- JavaScript expressions must be wrapped in {}.

Example:

const name = "React";

const element = <h1>Hello, {name}!</h1>;

4. Components

Components are the building blocks of a React application.

Functional Component:

function Greet(props) {

return <h1>Hello, {props.name}</h1>;

Class Component (older approach):

class Greet extends React.Component {

render() {

return <h1>Hello, {this.props.name}</h1>;

Components help organize and reuse code.

5. Props and State

Props (short for properties) are used to pass data from one component to another.

Example:

<Greet name="Alice" />

State is a built-in object used to store property values that belong to a component.

useState Hook:

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>Increment</button>

State allows components to react to user input and change the UI accordingly.

6. useEffect Hook

The useEffect hook is used to perform side effects such as fetching data, setting up subscriptions, or

manually changing the DOM.

Example:

useEffect(() => {
React Complete Beginner Guide with Theory and Examples

console.log("Component mounted");

}, []);

The empty array means this effect runs only once (on mount).

7. Conditional Rendering

React lets you render different UI elements based on conditions.

Example:

{isLoggedIn ? <Dashboard /> : <Login />}

You can also use logical &&:

{show && <p>This is visible</p>}

8. Lists and Keys

You can use the map function to create a list of elements.

Example:

const items = ['Apple', 'Banana'];

{items.map((item, index) => (

<li key={index}>{item}</li>

))}

The 'key' prop is important to help React identify which items have changed.

9. Forms and User Input

React uses controlled components where form data is handled by React state.

Example:

const [name, setName] = useState("");

<input value={name} onChange={(e) => setName(e.target.value)} />

This ensures the component always has the latest value from the input.

10. useRef Hook

useRef is a hook that allows you to directly access a DOM element or persist values between renders without

causing re-renders.

Example:

const inputRef = useRef(null);

<input ref={inputRef} />

<button onClick={() => inputRef.current.focus()}>Focus</button>

11. useContext Hook

The useContext hook allows you to use global variables like themes or user info without prop drilling.

Example:

const ThemeContext = createContext("light");

const theme = useContext(ThemeContext);

<ThemeContext.Provider value="dark">

<Child />

</ThemeContext.Provider>
React Complete Beginner Guide with Theory and Examples

12. Routing with React Router

React Router is a library for navigation in React applications.

Install it with:

npm install react-router-dom

Example:

<BrowserRouter>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

</Routes>

</BrowserRouter>

13. Fetching Data with Fetch API

You can use fetch inside useEffect to retrieve data from an API.

Example:

useEffect(() => {

fetch("https://api.example.com/data")

.then(res => res.json())

.then(data => setData(data));

}, []);

14. useMemo and useCallback

useMemo is used to optimize performance by memoizing expensive computations.

useCallback is used to memoize functions.

useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback(() => handleClick(id), [id]);

15. Lazy Loading with Suspense

React allows you to load components only when needed.

Example:

const LazyComp = React.lazy(() => import('./LazyComp'));

<Suspense fallback={<div>Loading...</div>}>

<LazyComp />

</Suspense>

16. Styling React Components

Options for styling:

- Inline styles: <div style={{ color: 'blue' }}></div>

- CSS Modules: import styles from './App.module.css'

- Tailwind CSS: <div className="bg-blue-500 p-4"></div>

- Styled Components: const Btn = styled.button`color: red;`

17. Deployment

Build and deploy your app using:

npm run build

Then host on Netlify, Vercel, Firebase, or GitHub Pages.

React apps are SPA (single page applications), so configure rewrites properly.