Building separate components in separate files

One of the nicest things about Create React App is how simple it makes even the process of importing other files as their own separate React components without you really having to think about how Webpack is organizing everything. We're going to build a new simple component to get started with. Let's create a Todo component to keep track of each of the Todo items we'll need to add as we go along.

Back over in src/Todo.js, we'll want to duplicate everything from App.js (except the string in the className property and the function name):

import React from 'react';
import './Todo.css';

const Todo = () => <div className="Todo">I am an item</div>;

export default Todo;

There's nothing exciting to talk about here, so we'll keep forging ahead! We should also create a Todo.css file to make sure our component does not remain unstyled:

.Todo {
  border: 2px solid black;
  text-align: center;
  background: #f5f5f5;
  color: #333;
  margin: 20px;
  padding: 20px;
}

Without doing anything, we won't see the results of our fancy new Todo component that we just created, so we'll need to head back to src/App.js and change the code. We'll start by adding an import statement at the top for the Todo component! Remember, we're loading this file from the local filesystem and not some installed dependency:

import Todo from './Todo';

We'll also need to include the Todo component somewhere in the source so that it shows up when we re-render the page:

const App = () => (
  <div className="App">
    <h2>Todoifier</h2>
    <br />
    <Todo />
  </div>
);

All we've added here is the Todo component, which is getting rendered in the main root div of the App component. When the browser refreshes (assuming you've saved), you should see the Todo component show up and be ready to go!

The exciting part of this whole process is that we've already introduced better code standards and reusability by doing this. The Todo component has been fully extracted out, so if we wanted to include multiple Todo components in our App, we could do so without having to do anything more complicated than copying and pasting a few lines of code.

This sounds pretty great, so let's try it out ourselves and verify that it all works as we expect. Back in the App component, add a few more Todo components as JSX tags:

const App = () => (
  <div className="App">
    <h2>Todoifier</h2>
    <br />
    <Todo />
    <Todo />
  </div>
);

When we have our Todo declared twice in the root of our App component, we should see those two show up:

With that, we've gotten a nice clean amount of reusability and have had to put in almost no effort! The problem that still exists, though, is that there is no variation here. The components are just blindly repeated over and over, and we'd much rather this do something such as display some different content per each Todo. We can make that work in React by introducing two new concepts: state and props! We'll get to state in a little bit, so let's start off with props to get this all implemented in the simplest way possible.