This repository documents my learning journey through React. While based on the Bro Code React Course, all projects have been adapted to meet React 19 standards, including modern best practices for props, state, and rendering.
| ID | Project Name | Description | Key Concepts |
|---|---|---|---|
| 01 | Basic React App | Intro to Vite file structure and components. | JSX, File Structure |
| 02 | Card Component | Creating reusable card components. | Component Reuse, CSS Modules |
| 03 | CSS Styles | Distinct styling methods in React. | Inline, External, & Modules |
| 04 | React Props | Passing data between parent/child components. | Props, Destructuring |
| 05 | Conditional Render | Rendering components based on state/logic. | Ternary Operators, Short-circuiting |
Since these are separate mini-projects, you need to run them individually.
-
Clone the repository:
git clone [https://github.com/taco0cat/react-19-basics.git](https://github.com/taco0cat/react-19-basics.git)
-
Navigate to the specific project folder: (Example: To run the Card Component)
cd 02-Card-Component -
Install dependencies:
npm install
-
Start the development server:
npm run dev
This repository adheres to the latest React 19 changes.
In older React versions (and many tutorials), defaultProps was used to set fallback values for components. In React 19, this is deprecated for functional components.
My Approach:
Instead of defaultProps, I utilize ES6 JavaScript Destructuring directly in the function signature:
// ❌ Old Way (Deprecated)
Component.defaultProps = {
name: "Guest"
}
// ✅ Modern Way (Used in this repo)
function Component({ name = "Guest" }) {
return <h1>Hello, {name}</h1>;
}