NguyenTheQuang

Posted on Jul 3

📘 Beginner's ReactJS

#webdev #javascript #beginners #react

📌 Introduction to React

What is React?
React is a JavaScript library for building user interfaces, created by Facebook. It allows developers to create reusable UI components and manage state efficiently.

Why use React?

Component-based architecture
Virtual DOM for fast rendering
Strong community and ecosystem
Declarative programming model

📦 Setting Up React

You can start a React project using:

Vite (recommended for beginners):

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

Create React App:

npx create-react-app my-app
cd my-app
npm start

🧱 React Components

React apps are built with components.

Functional Component Example:

function Welcome() {
  return <h1>Hello, React!</h1>;
}

JSX Syntax:
Looks like HTML inside JavaScript. JSX gets compiled to React.createElement.

const element = <h1>Hello, world!</h1>;

🔄 Props (Properties)

Props are how you pass data into components.

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Usage:
<Greeting name="Alice" />

📦 State and useState Hook

State lets components remember data between renders.

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

🧠 useEffect Hook

useEffect lets you run side effects (like fetching data or changing the document title).

useEffect(() => {
  document.title = `Clicked ${count} times`;
}, [count]);

🌐 React Router Basics

To navigate between pages in a React app:

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

🎨 Styling in React

Options:

CSS Modules
Tailwind CSS
Styled-components
Traditional CSS

Example with inline styles:

const headingStyle = { color: 'blue' };
return <h1 style={headingStyle}>Hello</h1>;

🧰 Component Lifecycle (simplified)

React components have life stages:

Mounting (component appears)
Updating (state or props change)
Unmounting (component removed)

useEffect() helps us hook into these lifecycle events.

🔃 Lifting State Up

Sometimes a parent component needs to manage state for multiple children.

function Parent() {
  const [value, setValue] = useState('');

  return (
    <>
      <ChildInput value={value} setValue={setValue} />
      <ChildDisplay value={value} />
    </>
  );
}

🗂 Controlled vs Uncontrolled Inputs

Controlled:

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

Uncontrolled:

<input ref={inputRef} />

🚀 What’s Next After Basics?

Once you’re confident with the basics, explore:

State management tools: Redux, Zustand, Jotai
Backend integrations (API calls)
Form libraries: React Hook Form
TypeScript with React
Testing: Vitest, React Testing Library
Next.js (for SSR and routing)

DEV Community