React Fundamentals

React is all about Components. A component is a small, reusable piece of code that represents a part of the UI.

1. JSX (JavaScript XML) 📝

React uses a syntax called JSX. It looks like HTML, but it's actually JavaScript.

Why use JSX? It allows us to keep the logic (JS) and the view (HTML) in the same file.

Rules of JSX:

1. Return One Parent: You must wrap everything in a single tag (like <div> or <>...</>).
2. CamelCase: Use className instead of class, onClick instead of onclick.
3. Close Tags: Self-closing tags must end with /> (e.g., <img />).

2. Creating Components 🧱

A React component is just a JavaScript function that returns JSX.

Note: Component names MUST start with a Capital Letter.

3. Props (Properties) 🎁

Props are how we pass data down from a parent to a child. They are like HTML attributes.

Important: Props are Read-Only. A child cannot change its props.

4. Conditional Rendering 🔀

We use standard JavaScript logic (if/else, ternary operators) to decide what to show.

5. Lists & Keys 📋

To render a list of items, we use the .map() array method.

Why key? React needs a unique key for each item to track changes efficiently.

Quiz

Key Takeaways

✅ JSX mixes HTML and JS.
✅ Components are functions starting with a Capital Letter.
✅ Props pass data down.
✅ Keys are required for lists.

What's Next?

Static components are boring. Let's make them interactive with React Hooks!

Keep coding! 🚀