📘 Beginner’s ReactJS

This content originally appeared on DEV Community and was authored by NguyenTheQuang

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)

This content originally appeared on DEV Community and was authored by NguyenTheQuang