🚀 Day 3: JSX and Components

On Day 3 of my React Learning Journey, I focused on understanding the basics of JSX, the differences between JSX and HTML, and how to create and use both functional and class components in React. Here's a summary of what I learned:

1. Understanding JSX

What is JSX?

• JavaScript XML (JSX): JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. It makes writing React components more intuitive by allowing you to structure the UI components using HTML-like syntax.

Syntax and Usage

• Embedding Expressions:

  • You can embed any JavaScript expression within curly braces {} in JSX.

  const name = "World";
  const element = <h1>Hello, {name}!</h1>;
  

• Children:

  • JSX elements can contain children, including text, other elements, or a combination of both.

  const element = (
      <div>
          <h1>Hello, World!</h1>
          <p>This is a paragraph.</p>
      </div>
  );
  

Differences Between JSX and HTML

• Attribute Naming:

  • JSX uses camelCase for attribute names (e.g., className instead of class, onClick instead of onclick).

• Self-Closing Tags:

  • JSX requires self-closing tags for elements without children, such as <img /> or <input />.

2. Components

What are Components?

• Building Blocks: Components are the building blocks of a React application. They allow you to split the UI into reusable and independent pieces.

• Types of Components: There are two main types of components in React: Functional Components and Class Components.

Functional Components

• Definition:

  • Functional components are JavaScript functions that return JSX.
  • They can accept props as arguments.

• Example:
  

  function Welcome(props) {
      return <h1>Hello, {props.name}!</h1>;
  }
  

Class Components

• Definition:

  • Class components are ES6 classes that extend React.Component.
  • They have a render() method that returns JSX.

• Example:
  

  class Welcome extends React.Component {
      render() {
          return <h1>Hello, {this.props.name}!</h1>;
      }
  }
  

• State and Lifecycle:

  • Class components can manage their own state and lifecycle methods.

3. Hands-On: Create Your First React Component

Step 1: Create a Functional Component

1. Define the functional component:
   

   // src/Welcome.js
   
   import React from "react";
   
   function Welcome(props) {
       return <h1>Hello, {props.name}!</h1>;
   }
   
   export default Welcome;
   

2. Use the component in App.js:
   

   // src/App.js
   
   import React from "react";
   import Welcome from "./Welcome";
   
   function App() {
       return (
           <div>
               <Welcome name="Alice" />
               <Welcome name="Bob" />
               <Welcome name="Charlie" />
           </div>
       );
   }
   
   export default App;
   

3. Result:

   

Step 2: Create a Class Component

1. Create a new file: In the src directory, create a new file called Greeting.js.

2. Define the class component:
   

   // src/Greeting.js
   
   import React, { Component } from "react";
   
   class Greeting extends Component {
       render() {
           return <h1>Welcome, {this.props.name}!</h1>;
       }
   }
   
   export default Greeting;
   

3. Use the component in App.js:
   

   // src/App.js
   
   import React from "react";
   import Greeting from "./Greeting";
   
   function App() {
       return (
           <div>
               <Greeting name="Diana" />
               <Greeting name="Edward" />
               <Greeting name="Fiona" />
           </div>
       );
   }
   
   export default App;
   

4. Result:

   

4. Developer Profile Card Project

As a practice, I developed a Developer Profile Card to better understand the concepts.
You can find the code inside App.js file. This project helped reinforce my understanding of JSX, components, and props in React.

• Developer Profile Card

  

Check out my GitHub for code samples and projects.