The foundation of React — describe the UI

React is a JavaScript library designed for building user interfaces (UI). It allows developers to create UIs from basic elements like buttons, text fields, and images.

These elements can be assembled into reusable, nestable components that make up everything from websites to mobile apps.

Let’s try building your first component

React applications are constructed using discrete UI units known as components. Each React component is essentially a JavaScript function enriched with JSX markup.

These components range in complexity from simple UI elements like buttons to entire web pages.

Example:

function Profile() {
  return (
    <img
      src="https://static1.srcdn.com/wordpress/wp-content/uploads/2023/04/spider-man-pointing-meme-in-spider-man-across-the-spider-verse-trailer.jpg?q=50&fit=crop&w=943&h=&dpr=1.5"
      alt="Pointing At You Spider Man Meme"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Spiderverse</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Importing and Exporting Components

You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can export a component into its own file, and then import that component from another file:

Profile.js

export default function Profile() {
  return (
    <img
      src="https://static1.srcdn.com/wordpress/wp-content/uploads/2023/04/spider-man-pointing-meme-in-spider-man-across-the-spider-verse-trailer.jpg?q=50&fit=crop&w=943&h=&dpr=1.5"
      alt="Alan L. Hart"
    />
  );
}

Gallery.js

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>SpiderMan Pointing at You Meme</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

JSX — Writing markup

Each React component is essentially a JavaScript function that might include JSX, a syntax extension for markup. JSX resembles HTML but adheres to stricter rules and supports dynamic content rendering in the browser.

App.js

export default function TodoList() {
  return (
    <>
      <h1>Spiderverse</h1>
      <img
        src="https://static1.srcdn.com/wordpress/wp-content/uploads/2023/04/spider-man-pointing-meme-in-spider-man-across-the-spider-verse-trailer.jpg?q=50&fit=crop&w=943&h=&dpr=1.5"
        alt="SpiderMan Pointing at You Meme"
        className="photo"
      />
      <ul>
        <li>Point at each other</li>
        <li>Be surprised</li>
        <li>Keep pointing at each other</li>
      </ul>
    </>
  );
}

JavaScript in JSX with curly braces

JSX allows you to integrate HTML-like markup directly within JavaScript files, centralizing your rendering logic and content. At times, you might need to insert some JavaScript logic or access a dynamic property within this markup. In these instances, you can utilize curly braces within your JSX to seamlessly incorporate JavaScript into your markup.

App.js

const person = {
  name: 'Peter Parker',
  theme: {
    backgroundColor: 'blue',
    color: 'red'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://pyxis.nymag.com/v1/imgs/a1d/0e0/d2f17164f629f7cc5b6f2d1c6a994b1a1a-10-spider-verse-peter-parker-2.rhorizontal.w700.jpg"
        alt="Peter Parker"
      />
      <ul>
        <li>Lie to Mary Jane</li>
        <li>Take the baby to dangerous situations</li>
        <li>Watch Miles make decisions that only teens would</li>
      </ul>
    </div>
  );
}

Passing props to a component

React components communicate through props, which allow parent components to pass data to their child components. While props may seem similar to HTML attributes, they are more versatile, allowing you to pass any JavaScript value, including objects, arrays, functions, and even JSX elements.

App.js

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Peter Parker',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

utils.js

export function getImageUrl(person, size = 's') {
  return (
    'https://pyxis.nymag.com/v1/imgs/a1d/0e0/d2f17164f629f7cc5b6f2d1c6a994b1a1a-10-spider-verse-peter-parker-2.rhorizontal.w700.jpg' +
    person.imageId +
    size +
    '.jpg'
  );
}

Conditional rendering

Your components may need to display varying content based on different conditions. React allows you to conditionally render JSX by utilizing JavaScript syntax such as if statements, the && operator, and the ternary ?: operator.

For instance, you can use the && operator in JavaScript to conditionally display a checkmark like this:

App.js

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Peter Parker's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Diapers"
        />
        <Item
          isPacked={true}
          name="Baby Spider Mask"
        />
        <Item
          isPacked={false}
          name="New excuses to give to Mary Jane"
        />
      </ul>
    </section>
  );
}

Rendering lists

Frequently, you might need to render a series of similar components based on a dataset. In React, you can employ JavaScript’s filter() and map() functions to sift through and convert your data into an array of components.

Each component in this array should have a unique key, typically an ID from your dataset, to help React manage and track each component’s position within the array, even as changes occur. This key is crucial for maintaining efficient, error-free rendering.

App.js

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Spidermans</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

data.js

export const people = [{
  id: 0,
  name: 'Peter Parker',
  profession: 'Spiderman and recently a burn-out dad',
  accomplishment: 'protecting New York and only getting paid with trauma',
  imageId: 'MK3eW3A'
}, {
  id: 1,
  name: 'Peter Parker',
  profession: 'Scientist',
  accomplishment: 'protecting New York and not saving Gwen Stacy LOL',
  imageId: 'mynHUSa'
}, {
  id: 2,
  name: 'Peter Parker',
  profession: 'Highschool Student Iron man Protege',
  accomplishment: 'not finding a way home LOL',
  imageId: 'bE7W1ji'
}];

utils.js

export function getImageUrl(person) {
  return (
    'https://static1.srcdn.com/wordpress/wp-content/uploads/2023/04/spider-man-pointing-meme-in-spider-man-across-the-spider-verse-trailer.jpg?q=50&fit=crop&w=943&h=&dpr=1.5' +
    person.imageId +
    's.jpg'
  );
}

I hope this helps! 😝 Stay tuned for my next blog post on how to keep the components pure.

Reference: https://react.dev/learn/describing-the-ui

P.S. yes, I love Spiderman. So much love that I made a fanart.

---