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

Hello {message}!; } export default Welcome;

Import & Use It

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

function App() { return (

); }

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 (

); }

⏱ 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

Time passed: {seconds}s

; }

🎨 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

Styled Heading;

🔁 Step 8: Conditional Rendering

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

return (

);

Or with &&:

{hasAccess && }

🧾 Step 9: Lists and Keys

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

return (

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

);

⚠️ 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:

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe