📝 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