React Crash Course 2025 – Build Your First App with Hooks, Components & State!

📝 Description

Ready to learn React in 2025? This crash course walks you through creating your first real-world React app with hooks, components, and JSX.

✅ What you'll learn:

• Setting up React with Create React App

• JSX, Props, State & Hooks

• Styling, Conditional Rendering, Lists

• Component architecture & folder structure

#ReactJS #CrashCourse #WebDevelopment #JavaScript #FrontendDev #ReactHooks #React2025

🚀 React.js Crash Course 2025 – Build Your First App from Scratch

Welcome to this beginner-friendly React.js crash course for 2025! Whether you're transitioning from HTML, CSS, and JavaScript or starting fresh, this tutorial will give you a rock-solid foundation in React with best practices, clean structure, and modern JavaScript techniques.

---

📦 Step 1: What Is React.js?

React is a JavaScript library for building user interfaces, created and maintained by Meta (Facebook). It allows you to create reusable components, use a virtual DOM for faster rendering, and structure your frontend with clean, component-based architecture.

React is not a full-blown framework like Angular—think of it as the view layer of your app. It’s great for building single-page applications (SPAs).

---

🧱 Step 2: Setting Up React

✅ Prerequisites:

• Node.js & npm (Install from nodejs.org)

• A code editor like VS Code

🛠 Create a New React App

npx create-react-app my-app

Replace my-app with your project name.

Navigate into your app:

cd my-app

Start the app:

npm start

Your React app will open at

http://localhost:3000

---

📂 Step 3: Project Structure Overview

React generates this structure:

my-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── components/ (your custom folder)
├── package.json

• App.js: Main component

• App.css: Main stylesheet

• index.js: App entry point

---

🧩 Step 4: Understanding JSX & Components

Create a Functional Component

// src/components/Welcome.jsx
function Welcome({ message = "World" }) {
  return <h1>Hello {message}!</h1>;
}
export default Welcome;

Import & Use It

// App.js
import Welcome from './components/Welcome';

function App() {
  return (
    <div className="App">
      <Welcome message="Norbert" />
    </div>
  );
}

JSX Notes

• Always return a single root element (use <>...</> if needed).

• Use className instead of class.

---

⚛️ Step 5: Using State with useState

import { useState } from 'react';

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

  return (
    <div className="App">
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

---

⏱ Step 6: Using Effects with useEffect

import { useEffect, useState } from 'react';

function App() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    return () => clearInterval(interval); // Cleanup
  }, []);

  return <p>Time passed: {seconds}s</p>;
}

---

🎨 Step 7: Styling in React

Option 1: CSS File

/* App.css */
.App {
  background-color: aqua;
  height: 100vh;
}

Option 2: Inline Style

const myStyle = {
  backgroundColor: 'black',
  color: 'white',
  fontSize: '2rem'
};

return <h1 style={myStyle}>Styled Heading</h1>;

---

🔁 Step 8: Conditional Rendering

const [isLoggedIn, setIsLoggedIn] = useState(false);

return (
  <div>
    {isLoggedIn ? <Dashboard /> : <Login />}
    <button onClick={() => setIsLoggedIn(!isLoggedIn)}>Toggle Login</button>
  </div>
);

Or with &&:

{hasAccess && <AdminPanel />}

---

🧾 Step 9: Lists and Keys

const items = ["A", "B", "C"];

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

⚠️ Use unique IDs for production (not index as key).

---

🗂 Step 10: Folder Structure Best Practices

src/
├── components/
│   ├── Header.jsx
│   ├── Button.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
├── hooks/
│   └── useToggle.js
├── App.js
├── index.js

Clean up unused files like logo.svg, App.test.js, etc.

---

🚀 Next Steps

• Use React Router for navigation

• Deploy using Vercel or Netlify

• Add form handling and API calls

Stay tuned for the next part where we build a real React project from scratch!

---

---

Download the PDF file here:

React Crash Course

1.26MB ∙ PDF file

Download

Download