How to organize components in React

H
andrewgbliss
8 months ago

In this article we will discuss creating a components folder to store all our reusable React components. We will begin to build out our Todo list application and go over some more Material UI components.

. . .

Getting Started

What we will do in this article is organize our components into folders.

Let's start by building a components folder and moving our App component to that folder.

src/components/App/App.js

One thing to think about is creating a folder for every component you create. Doing this will help encapsulate that component.

Now let's create a folder for our css files. Create a folder with this structure.

src/assets/css

Now move the styles.css file into that css folder.

Todos Components

We will now create a folder called components under the Todos folder, and we will create these components.

src/components/Todos/components/TodoInput.js
import React from 'react';
import { makeStyles } from '@material-ui/core';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles(theme => ({
  textField: {
    width: 400,
  }
}));

const TodosInput = () => {
  const classes = useStyles();
  return (
    <Grid container>
      <Grid item>
        <TextField className={classes.textField} label="What do you want to today?" size="small" />
      </Grid>
      <Grid item>
        <Button color="primary" variant="outlined">Add Todo</Button>
      </Grid>
    </Grid>
  );
};

export default Todos;

In this TodosInput component, we bring in the TextField and Button component. When the user of our app types in the text field we want a button to be clickable, then it will add that todo to our list.

We use the makeStyles to create our CSS classes and then apply that to the TextField component making it 400 units wide.

src/components/Todos/components/TodosList.js
import React from 'react';

const TodosList = () => {
  return (
    <Box p={2}>This is a component stub</Box>
  );
};

export default TodosList;

In the TodosList component we will just stub this out, meaning we will create the file so it will show in our grid, but we will implement the list in a later article.

Now let's change our Todos container to load in the child components.

import React from 'react';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import TodosInput from './components/TodosInput';
import TodosList from './components/TodosList';

const Todos = () => {
  return (
    <Box p={2}>
      <Grid container direction="column">
        <Grid item>
          <TodosInput />
        </Grid>
        <Grid item>
          <TodosList />
        </Grid>
      </Grid>
    </Box>
  );
};

export default Todos;

In the main Todos component we will bring in our TodosInput and TodosList component and align them using the Grid component. This component is known as a HOC (High Order Component). Meaning that it is considered to be the top level container to show all the child components.

Recap

It this article we started creating folders to store our components and we started building out our todo list app.

In the next lesson we will talk about Material UI breakpoints and we can show different sizes on different devices, such as a mobile phone.


H
andrewgbliss
8 months ago