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
NguyenTheQuang | Sciencx (2025-07-03T07:35:46+00:00) 📘 Beginner’s ReactJS. Retrieved from https://www.scien.cx/2025/07/03/%f0%9f%93%98-beginners-reactjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.