🧠 React Learning Projects

This repository documents my React.js learning journey. Each folder represents a mini project or concept I've practiced to build a solid foundation in React. It's a growing collection of hands-on experience as I progress through different topics.

---

📁 Project Folders

1. conditional-render-react

A simple component (UserGreetings) that demonstrates conditional rendering in React using the ternary operator. It displays a personalized welcome message if a user is logged in, or a prompt to log in if not.

Key concepts:

• Conditional rendering using ? : inside JSX.
• Reusable JSX elements (welcome and login variables).
• PropTypes for type-checking props like isLoggedIn (boolean) and user (string), which helps catch bugs during development.

---

2. my-react-app

This is my core practice app generated using create-react-app, where I explored several foundational concepts:

• JSX Syntax: Embedding HTML-like syntax directly inside JavaScript files.
• Using JavaScript in Components: Writing logic (e.g., expressions, functions, conditionals) inside JSX using curly braces {}.
• Working with Assets: Importing and displaying images using the src/assets folder.
• Styling Techniques:
  • ✅ Inline styling – writing CSS directly in the component via style objects.
  • ✅ Global CSS (index.css) – applying universal styles to the entire app.
  • ✅ CSS Modules – scoped component-specific styles using .module.css.

This project serves as my playground for experimenting with essential React features.

---

3. react-facts-project

A fun single-page static site that displays random facts about React. Built to strengthen understanding of:

• Functional components
• Static data rendering
• CSS styling
• Using create-react-app for quick setups

It’s a great example of a clean, minimal component-based React UI.

---

4. travel-journal-project

A simple journal layout showcasing multiple travel locations, dynamically rendered using props and mapping over an array of data.

What I learned:

• How to pass data via props
• How to map over arrays to generate reusable UI components
• Component reusability and clean separation of concerns

---

📄 Notes

React Dev Setup & Understanding structure.txt

Includes notes on how to set up a React development environment and understand the folder structure created by create-react-app.

React.txt

My raw and ongoing notes containing concepts, code snippets, and explanations as I learn new React ideas.

---

✅ Topics Covered So Far

• React project setup with Vite and CRA
• JSX syntax and rules
• Props and functional components
• State management basics
• Event handling in components
• Conditional rendering
• Mapping over arrays to build dynamic UIs
• Writing JavaScript within JSX
• Importing and displaying images
• Styling techniques:
  • Inline styles
  • Global index.css
  • CSS Modules
• PropTypes for prop validation
• Complex state structures (arrays, objects)
• Forms and controlled components
• Fetching and using API data
• useState and useEffect hooks

---

🚧 Work in Progress

I’m currently diving into more advanced topics including:

• React Router (navigation)

---

🎯 Goal

To build a strong and practical foundation in React.js through consistent practice, small projects, and documentation. This repo is both my learning archive and a visual reference for everything I've explored so far.

---

Feel free to browse the folders, read the code, and follow along on the learning path. 🚀