Creating React Components

Creating React components is a fast and easy process, no different than declaring other JavaScript variables. They can be either JavaScript functions or JavaScript classes, but JavaScript functions are now best practice. These are referred to as functional components.

The neat thing about creating React components is that they now become your own HTML tags that you "render" with the rest of your JSX. Your React component name must start with a capital letter.

Where do I create React components?

You can create React components anywhere in your App that you want. Typically though, it’s best practice to create React components in their own files and export them for use in other files that need them.

Functional Components

To create a functional component, simply create a normal JavaScript function named to whatever you want your React component. Have it return JSX, and you're all set.

function Pirate() {
  return <div> I am a modern Pirate </div>;
}

Functional Components with Arrow syntax

In the previous example, we used the standard JavaScript function declaration. You can also use arrow functions:

const Header = () => <h1> 🏴‍☠️ The Captain's Crew </h1>;

There is no meaningful difference between these two approaches. Arrow functions can be shorter syntax as it allows you to omit the return keyword.

Legacy Class-based components

Prior to the release of React Hooks, which enabled usage of stateful functionality inside functional components, the only way to create a stateful React component was through class-based components. This was a much more verbose process than functional components with React Hooks, so class based components are now considered legacy and should not be used. Instead of the useState hook, we relied on the this operator to call this.setState. Instead of useEffect to handle mounting side effects, we used componentDidMount.

Created Styled-components

In most cases, you want to avoid using the style attribute on components. It is a bit tedious to write CSS inside an Object. An alternative to this is a library called styled-components. This is a popular way to style your React components and utilizes a paradigm known as "CSS-in-JS". This makes styling as easy as writing pure CSS inside your React components without using CSS classes.

Exercise: Try to create and render your own React component.

Menu
Lesson 5/22
import React from "react";
import styled from "styled-components";
import ImportedPirate from "./Pirate";

const crew = [{ name: "Joe" }, { name: "Mark" }, { name: "Bob" }];

// Creating a React functional component
function Pirate() {
  return <li> I am a modern Pirate </li>;
}

// Creating a Styled Component
const AppContainer = styled.div`
  border: 1px solid black; 
  padding: 20px; 
  ${(props) => `font-size: ${props.size}`}
`;

// Alternate syntax to create a functional component from arrow functions
const Header = () => <h1> 🏴‍☠️ The Captain's Crew </h1>;

// This is a Class based component, which is legacy and now replaced
// by above alternatives
class LegacyPirate extends React.Component {
  componentDidMount() {
    // this is a legacy lifecycle method that is now replaced with react hooks
  }
  render() {
    return <li> I am legacy Pirate </li>;
  }
}

export default function App() {
  return (
    <AppContainer size="18px">
      <Header />
      <i> An array of cool pirates </i>
      <ul>
        {crew.map((user, i) => (
          <Pirate key={`task-${i}`} />
        ))}
        <ImportedPirate />
        <LegacyPirate />
      </ul>
    </AppContainer>
  );
}