React from scratch: Part 2

React from scratch: Part 2

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!

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

Hire Dedicated React Native Developer in India | React Native Development

Hire dedicated React Native developers for your next project. As the top react native development company we offer you the best service as per your business needs.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...

A Short Guide to React Native App Development

React Native is undoubtedly one of the most widely used cross-platform frameworks for creating native-like apps. This framework can be easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.easily used for developing brand-new apps from scratch and even in existing iOS or Android projects.