Todo app with React.js — Part 2 (Styled Components)

Styled Components — Visual primitives for the component age.

In the first post related to our todo app in React.js, we setup and configured Webpack and Babel.

In my previous post, we also setup and configured Eslint and Prettier for our project. We also setup a server to serve our static files, using Express.

In this post, we will start creating components, later in this post, we will make use of the Styled Components library to improve the UI of our todo app.

First, let create a folder named components inside the src directory which will host all our components. Next in the components directory, create a file TodoList.jsx with the following content:

import React from 'react'
import TodoItem from './TodoItem'
const TodoList = ()=> (
    <ul className="todoList">
        <TodoItem id="todo-1" title="Learn React.js" />
        <TodoItem id="todo-2" title="Learn Vue.js" />
        <TodoItem id="todo-3" title="Learn Laravel" />
   </ul>
)
export default TodoList

This component contains a list of todos.

Next create another file TodoItem.jsx and add the code below:

import React from "react"
import PropTypes from "prop-types"
const TodoItem = props => {
    const { id, title } = props
    return (
        <li>
            <label htmlFor={id}>
                <input type="checkbox" id={id} /> {title}
            </label>
            <button type="button">Delete</button>
        </li>
    )
}
TodoItem.propTypes = {
    title: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired
}
export default TodoItem

Notice that we are using prop-types to validate our props. Basically, we are saying title should be of type string and is required. Same thing for id .

In your terminal, runnpm i --save prop-types to install it.

In order to display the list of todos, we need to import the TodoList component into the App.jsx component.

import React from 'react'
import { render } from 'react-dom'
import TodoList from './components/TodoList'
const App = () => (
    <div>
        <TodoList /> 
    </div>
)
render(<App />, document.getElementById('app'))

We need a form in order to add new todos. For this, we need a another component. Create a file in the components directory and name it TodoForm.jsx with the following content:

import React from 'react'
const TodoForm = () => (
    <form>
        <input focus="true" type="text" />
    </form>
)
export default TodoForm

Next start your server by running npm start and create a build by running npm run build then open http://localhost:5000 in your browser to see the changes as shown below:

Nice! Next let’s improve the UI with Styled Components.

Styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles.

Run npm i --save styled-components to install Styled Components.

Update the code for each of the components as shown below:

App.jsx

App Component

TodoList.jsx

TodoList Component

TodoItem.jsx

TodoItem Component

TodoForm.jsx

TodoForm Component

Run npm start and create a build by running npm run build then open http://localhost:5000 in your browser to see the changes as shown below:

Improved UI with the Styled Components library

Yup! This is definitely better than before.

In my next post, we will test our components using Jest and Enzyme. Stay tuned!

You can find the full code here