React Learnings from 2018 - Part 3

This is part 3 of my React Learning series. Using knowledge gleaned from React For Beginners by Wes Bos

Last time we explored:

• Setting up the tutorial environment from React for Beginners.
• How to create a component
• How to import and export it
• How to use JSX
• How to apply a basic style to index.js

Now lets look at stringing a few components together onto a page.

App - The Parent Component

We first need a root or parent component to centralise and share data, methods across the three sibling components as follows:

• App
  • Menu
  • Order
  • Inventory

At this point its probably worth mentioning that the course is working on making a restaurant site with three panels (Menu, Order and Inventory) but I'll try to use generic examples where possible.

Anyhow, that is 4 components we need to make. We make them in the components folder and for convention we give them a capital first letter.

To make the App component we do the following

1. Create the App.js file
2. Import React
3. Create App Class
4. Add Render Method
5. Export App Class

So this makes the code look like this:

import React from 'react';

class App extends React.Component{
    render() {
        return (
            {/* Divs containing other components can go here*/}
        )
    }
}

export default App;

This is a frequent pattern so I will spare you the process for the other components.

The index.js

For now we can just import App and replace the storePicker to render like so:

render(<App />, document.querySelector("#main"));

Back to App.js

Since this is parent component, we need to include the child components. We can do this by nesting divs inside a parent div. With some styling, we will end up with something like this:

class App extends React.Component{
    render() {
        return (
            <div className="lukies-awesome-store">
                <div className="menu">
                    <Header />
                </div>
                <Inventory />
                <Order />
            </div>
        )
    }
}

In conclusion, we now have a bunch of components:

• An App Component which is the one referred to in index.html. This in turn contains:
  • A Header Component
  • An Order Component
  • An Inventory Component

Right now they are siloed, in the next post we will look at how they can pass information to each other and how that information itself is kept.