React Components

Components are the key concept of modern web frameworks including Angular and React. In this walkthrough, I will use the official documentation here: https://react.dev/learn/describing-the-ui.

In React, functional components (denoted by the function keyword) are the current best practice, and what I will spend majority of my time focusing on. And like all functions, they return a value. React functional components return a React element, created using JSX syntax, which is a syntax extension to JavaScript that allows developers to write HTML-like code that is translated into JavaScript by the React compiler.

Functional components are defined as plain JavaScript functions that take in props as an argument and return a React element. The props contain data and functions that are passed down from parent components. The React element returned by the functional component is what gets rendered to the screen.

Example:

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

What does props mean? In React, “props” stands for “properties”, which are a way to pass data from a parent component to a child component. Props are passed to a component as a single object argument and are accessed as properties of that object. Props can be used to pass any type of data, including strings, numbers, arrays, objects, and even functions.

Parentheses are used when returning multi-line JSX from a functional component.

Example:

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

Quick detour: why some html have open and closing tags but others are a single tag with forward slash? In HTML, some elements require an opening tag and a closing tag, while others can be expressed as a single self-closing tag with a forward slash.

The reason for this difference is that some elements in HTML are meant to contain content (such as text, images, or other elements), while others are standalone elements that do not contain any content. Elements that do not contain any content can be expressed as self-closing tags, which makes the HTML code more concise and easier to read. Elements that require an opening and closing tag, on the other hand, are called “container” elements, because they contain other elements or text.

To create a self-closing tag, you can add a forward slash immediately before the closing angle bracket e.g., <br />, <img />, <input />. If you omit the forward slash, the browser may interpret the tag as a regular opening tag and look for a matching closing tag. This can lead to unexpected results or errors in your HTML code. In HTML5 (the latest version of HTML), the forward slash is optional for certain tags, including the br tag. Overall, it’s generally best practice to always include the forward slash in self-closing tags to ensure maximum compatibility and avoid any potential issues with your HTML code.

Components are reusable UI elements. A custom component will be called like so: <MyComponent /> and displayed on the screen. There is also a shared library of components from the React open source community like Chakra UI and Material UI.

According to React.Dev, traditionally web developers marked up content first then added interaction with JavaScript. In contrast, React puts interactivity first where a React Component is a Javascript function “sprinkled” with markup/HTML/JSX.

How to Define a Component

Source: Your First Component — React

1. Export the Component

Use export default prefix to specify the main JS function in a file to later import into other files.

More: Importing and Exporting Components — React

2. Define the function

React components are regular Javascript functions, which start with function keyword. But the functional component MUST start with a capital letter. Note: there are other Javascript function formats such as arrow function, which looks like:

const myFunction = () => {
  // function body goes here
}

3. Add markup

The return value of a React functional component looks like HTML but is actually Javascript under the hood. It is called JSX (JavaScript XML).

Components can render other components, but you must never nest their definitions i.e., don’t nest child component definition inside parent component. It is slow and causes bugs:

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

Each individual functional component should instead be defined on the same level:

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}

Some informative details:

• A React app begins at a “root” component
• CodeSandbox or Create React App, root component is defined in src/App.js
• Next.js, the root component is defined in pages/index.js

Maintain a Long-term View

In my own confidence, I feel that I am not nearly as good as some peers that I would deem “rockstars”. Yet, I am inspired by Kobe Bryant and the need to take a long-term view. I probably can’t catch some of them in a year. But if I keep focusing on fundamentals and coding, who knows where I may end up.

Rest at the end, not in the middle.

— Kobe Bryant