React Components

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

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

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