Designing Components

Resources

These can found here https://github.com/pkellner/pluralsight-designing-react-components-course-code Implements

Component Reuse
Single Responsibility
Dont Repeat Yourself

Next JS Setup

Create project with

npm install react react-dom next --save

Add three commands to packages.json

"dev": "next",
"build": "next build",
"start": "next start"

Basic Page

In the demo the tutor builds an app which looks like this
With next js we can create a basic page using images to represent components

function Page() {
    return (
        <div>
            <img src="images/header.png" />
            <img src="images/menu.gif" />
            <img src="images/searchbar.gif" />
            <img src="images/speakers.png" />
            <img src="images/footer.png" />
        </div>
    )
}
export default Page

Replacing with Components

To start making our components we can replace the images with components. For example

import React from 'react'
const Header = () => <img src="images/header.png" />
export default Header

And replace the Page with the components i.e.

function Page() {
    return (
        <div>
            <Header />
            <Menu />
            <SpeakerSearchBar />
            <Speakers />
            <Footer />
        </div>
    )
}
export default Page

Breaking Down Futher

We can now break down further the speaker image into individual speakers.

const Speakers = () => {
  const speakers = [
    { image: "images/speaker-component-1124.png", name: "a" },
    { image: "images/speaker-component-1530.png", name: "b" },
    { image: "images/speaker-component-10803.png", name: "c" },
  ];
  return (
    <div>
      {speakers.map((x) => {
        return <img src={x.image} alt={x.name} key={x.image} />;
      })}
    </div>
  );
};

export default Speakers;

Component Abstractions

In programming three patterns used to abstract

HOC - Higher Order Component

A higher-order component is a function that takes a component and returns a new component

RP - Render Prop

A RP is simply a prop that takes a function which returns elements that will be used in render(). You can pass an element directly into a prop and use it in render() which would make the whole thing a RP by name, but generally, when people speak about RPs, they mean the first definition.

Context

Context in React is used to share data that is global to a component tree such as an authenticated user or preferred theme without passing that data as props.

React Components

Contents