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