“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

React Breeze Blows your Face

In this article, learn how to create, customize, and conditionally display React components.

The React application is built from “components.” A component is just a function that can write tags.

Components can be as small as a button or as large as an entire application.

Here are two components defined

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
Copy the code

Importing and exporting components

You can use ES6 standard syntax

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
Copy the code

JSX markup language

React’s return syntax is called JSX. It is similar to HTML, but with some differences. You cannot copy HTML fragments directly to return functions

JSX and curly braces

Curly braces in JSX denote dynamic JS execution, so you can wrap some variables in curly braces.

const person = {
  name: 'Gregorio Y. Zara'.theme: {
    backgroundColor: 'black'.color: 'pink'}};export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}
Copy the code

Component communication

React uses the props object to pass the values of the parent component to its children

The contents of props can be objects, arrays, functions, and even JSX

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

Conditions apply colours to a drawing

JSX supports native JS syntax, so you can use if, &&,? : equal expression.

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

The list of rendering

As mentioned above, JSX supports native JS writing, so you can use ES6’s operations on arrays such as map,filter, etc.

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>Scientists</h1>
      <ul>{listItems}</ul>
    </article>
  );
}
Copy the code

Components are pure functions

The React component is a function, and when we write our code, follow the standard that the React component is a pure function.

Pure function has two characteristics:

  1. The same input parameter must return the same result after calculation.
  2. No side effects (IO, requests, changes to external variables, console.log) during function evaluation
let guest = 0;

function Cup() {
  // There are side effects, external variables are modified
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}
Copy the code

Should be changed to

function Cup({ guest }) {
    // Arguments are passed in from outside
  return <h2>Tea cup for guest #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Copy the code