Sign up to save your podcasts
Or
Share React Crash Course 2025 – Build Your First App with Hooks, Components & State!
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
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 (
Count: {count}
setCount(count + 1)}>Increment
);
}
⏱ 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 (
{isLoggedIn ? : }
setIsLoggedIn(!isLoggedIn)}>Toggle Login
);
Or with &&:
{hasAccess && }
🧾 Step 9: Lists and Keys
const items = ["A", "B", "C"];
return (
{items.map((item, index) => (
))}
);
⚠️ 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
View all episodes
By Norbert B.M.📝 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 (
Count: {count}
setCount(count + 1)}>Increment
);
}
⏱ 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 (
{isLoggedIn ? : }
setIsLoggedIn(!isLoggedIn)}>Toggle Login
);
Or with &&:
{hasAccess && }
🧾 Step 9: Lists and Keys
const items = ["A", "B", "C"];
return (
{items.map((item, index) => (
))}
);
⚠️ 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