This is the second part of the series “React from scratch”. This time we will start creating a To-Do-Application with the setup we did in part 1!

Prerequisites

Part 2 will start where we left off in part 1. If you didn’t already, go ahead and finish part 1 or just clone it from my repo and start from there.

New dependencies

Before we start creating the To-Do-Application, we will add bootstrap as a CSS library to make our life easier and our routing-tools:

$ npm i bootstrap react-router react-router-dom

- bootstraps: A CSS library for building responsive web apps.

- react-router: Core routing functionality for react.

- react-router-dom: DOM bindings for react-router.

Next, we will import bootstrap into our index.scss by adding the following line at the top of the file:

@import “~bootstrap/scss/bootstrap”;

After that we create two new directories in our src-folder, one for our components and one for our containers:

$ mkdir containers
$ mkdir components

Containers & components

I like to make a clear distinction between containers and components.

- Containers are only there for displaying our UI using the functionality we provide for them. They don’t implement functions.

- Components contain the logic for our application and “decide” which containers to display at which time. They provide the functionality for the containers, by passing it to them.

Now let’s start writing our first container:

import React from 'react';
import Routes from '../Routes';

const Root = () => (
    <Routes />
);

export default Root;

This container’s only job is to return our application routes. These **Routes **will keep track of all different routes-component-pairs.

Create a new file in the src-folder called Routes.js with the following content:

import React from 'react';
import { Switch, HashRouter } from 'react-router-dom';
import { Route } from 'react-router';
import TodoPage from './components/Todo';

export function Routes() {
  return (
    <HashRouter>
      <Switch>
        <Route path='/' component={TodoPage} />
      </Switch>
    </HashRouter>
  );
}

export default Routes;

As you can see we used our newly added dependencies in this function. Switch contains all the routes that we will declare in this application. Currently, we only declared one route which points to this address http://localhost:8000/. The component TodoPage will be rendered at this address.

Next up we need to implement TodoPage. Therefore we will create a new file called Todo.js in the components folder.

The file should look like this:

import React, { Component, Fragment } from ‘react’
import TodoListContainer from ‘../containers/TodoList’;

export class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [{
        id: 1,
        title: ‘Create Part 1’,
        text: ‘Starting with project setup’
      },
      {
        id: 2,
        title: ‘Create Part 2’,
        text: ‘creating the UI with components and containers’
      },
      {
        id: 3,
        title: ‘Create Part 3’,
        text: ‘To be decided’
      }],
    };
  }
  render() {
    return (
      <Fragment>
        <div className=”container-fluid”>
          <TodoListContainer
            todos={this.state.todos}
          />
        </div>
      </Fragment>
    );
  }
}
export default Todo;

#react #javascript #react-js-tutorials #programming #web-development #react native