Exploring React JS ( Part 1 )

In this series, we will be diving deep into the concepts of React JS framework.

For now, we will be covering these topics :

• What is JSX ??

• Components in React

• Props, Destructuring props

• Conditional Rendering

• Map() method for arrays

• Slice operator { … }

What is JSX ??

• JSX stands for JavaScript XML.

• JSX allows you to write HTML-like code inside JavaScript.

• Under the hood, JSX gets transformed into regular JavaScript using tools like Babel.

Example:

const element = <h1>Hello, world!</h1>;
// UNDER THE HOOD
const element = React.createElement('h1', null, 'Hello, world!');

Features:

• Dynamic content: You can embed JavaScript expressions inside {}.

const name = "Jane";
const greeting = <h1>Hello, {name}!</h1>;

Key note:

• JSX elements must be wrapped in a single parent element.

• Use className instead of class, and htmlFor instead of for, due to JavaScript naming rule

---

🧩 What Are React Components?

React components are building blocks of a React application, each representing a piece of the UI.

✅ Component Example

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

Or using arrow function syntax:

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

You can then use it like this:

<Welcome name="Alice" />

---

📝 Key Rule for Naming React Components

Must start with a capital letter
✅ Welcome, MyButton, UserCard
❌ welcome, button, card

1. React treats components starting with lowercase letters as HTML elements (like <div>, <span>), not custom components.

---

🧠 Bonus: Component File Naming Convention

It's a good practice to put each component in its own file:

Welcome.js:

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

export default Welcome;

Then import and use it:

import Welcome from './Welcome';

function App() {
  return <Welcome name="Bob" />;
}

---

💡 Using JavaScript logic for components :

function App() {
  const hour = new Date().getHours()
  let time 

  if (hour < 12){
    time="Morning"
  } else if (hour < 16){
    time="AfterNoon"
  } else if (hour < 19){
    time="Evening"
  }else time = "Night"

return <h1>Good {time} everyone, It's {hour} now !!!</h1>
}

export default App

---

🔷 Props in React JS

• Props are used to make components dynamic and reusable.

• Props allow you to customize a component by passing values (like strings, numbers, functions, arrays, objects, etc.)

const Card = (props) => {
return <div className="border-amber-500 p-2 m-2 bg-amber-200">
    <img src={props.img}/>
    <h3>{props.name}</h3>
    <p>{props.mobile}</p>
    <p>{props.email}</p>
</div>
}


function App() {

return <div className="flex flex-col justify-center">
  <Card img="" name="alex" mobile="123" email="alx@cna"/>
  <Card img="" name="john" mobile="456" email="jhn@uae"/>
  <Card img="" name="peter" mobile="789" email="ptr@grm"/>
  <Card img="" name="harry" mobile="753" email="hry@ind"/>
</div>
}

export default App

---

📌 De structuring Props

Destructuring props is a syntax that lets you extract values directly from the props object.

• This makes your code cleaner and easier to read.

• It avoids repetitive use of props. every time you access a prop.

🧾 Without De structuring

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

You access each value like: props.name, props.city, etc.

✅ With De structuring

You can extract values directly in the function parameter:

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

Now you don't have to use props.name—just name.

🎯 Destructuring Inside the Function Body

Alternatively, you can destructure inside the function:

function Welcome(props) {
  const { name, city } = props;
  return <h1>Hello, {name} from {city}!</h1>;
}

Another Example :

const Card = ({ img, name, mobile, email }) => {
return <div className="border-amber-500 p-2 m-2 bg-amber-200">
    <img src={img} />
    <h3>{name}</h3>
    <p>{mobile}</p>
    <p>{email}</p>
</div>
}


function App() {

return <div className="flex flex-col justify-center">
  <Card img="" name="alex" mobile="123" email="alx@cna"/>
  <Card img="" name="john" mobile="456" email="jhn@uae"/>
  <Card img="" name="peter" mobile="789" email="ptr@grm"/>
  <Card img="" name="harry" mobile="753" email="hry@ind"/>
</div>
}

export default App

---

🔹Conditional Rendering

Conditional rendering in React means showing or hiding components or JSX elements based on a condition (like a boolean, a state value, etc).

🧾 Basic Example

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
}

<Greeting isLoggedIn={true} />

---

✅ Common Ways to Do Conditional Rendering

---

✅ Ternary Operator

{isLoggedIn ? <Dashboard /> : <LoginForm />}

✅ Logical AND (&&)

{showMessage && <p>This is a conditional message.</p>}

//  This will render the paragraph only if showMessage is true.

---

✅ Using if Statements

function Example({ isAdmin }) {
  if (isAdmin) {
    return <h1>Welcome, Admin!</h1>;
  }
  return <h1>You are not authorized.</h1>;
}

---

💡 Real Use Case: Conditional Rendering in Your Card Example

Let’s say you want to hide the email if it's not provided:

const Card = ({ img, name, mobile, email }) => {
  return (
    <div className="border p-4 m-2 bg-amber-200 rounded">
      <h3>{name}</h3>
      <p>{mobile}</p>
      {email ? <p>{email}</p> : <p className="text-red-500">Email not available</p>}
    </div>
  );
};

---

🧠 Bonus: Conditional Component Rendering with State

import { useState } from 'react';

function App() {
  const [showCard, setShowCard] = useState(true);

  return (
    <div>
      <button onClick={() => setShowCard(!showCard)}>
        Toggle Card
      </button>

      {showCard && (
        <Card img="" name="Alex" mobile="123" email="alex@example.com" />
      )}
    </div>
  );
}

---

📌 Summary

---

🔁 JS Array Methods

1) Map()

✅ Syntax

array.map((element, index, array) => {
  // return something new for each element
})

The map() method returns a new array populated with the results of calling a provided function on every element in the calling array.

const array = [1, 4, 9, 16];

const mapped = array.map(x => x * 2);

console.log(mapped);        // Expected output: Array [2, 8, 18, 32]

In React, .map() is most often used to render lists of components dynamically.

🧠 React Example: Rendering Cards

const users = [
  { name: "Alex", mobile: "123", email: "alex@example.com" },
  { name: "John", mobile: "456", email: "john@example.com" },
];

const Card = ({ name, mobile, email }) => (
  <div>
    <h3>{name}</h3>
    <p>{mobile}</p>
    <p>{email}</p>
  </div>
);

function App() {
  return (
    <div>
      {users.map((user, index) => 
        <Card
          key={index}
          name={user.name}
          mobile={user.mobile}
          email={user.email}
        />
      )}
    </div>
  );
}

---

Spread Operator :

Using the spread operator (...) while passing props in a React component is a convenient and common pattern that allows you to pass all the properties of an object into a component as individual props.

✅ Basic Example: Spread Operator with Props

const user = {
  name: "Alice",
  age: 30,
  role: "Admin"
};

// Passing props using spread operator
<Component {...user} />

This is equivalent to:

<Component name="Alice" age={30} role="Admin" />

Another Example:

function UserCard({ name, age, role }) {
  return (
    <div className="user-card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Role: {role}</p>
    </div>
  );
}


const User = [
  { id: 1, name: "Alice", age: 25, role: "Admin" },
  { id: 2, name: "Bob", age: 30, role: "User" },
  { id: 3, name: "Charlie", age: 22, role: "Editor" }
];


function UserList() {
  return (
    <div>
      {User.map((user) => (
        <UserCard key={user.id} {...user} />
      ))}
    </div>
  );
}