In this post I will try to explain how to use react hooks step by step from basics using a simple todo app.

This series assumes you already know to work with react, “create react app” and basic class components. i.e you have a basic understanding of how react works.

Lets Start

Create a new project using CRA

npx create-react-app todo-list-hooks
cd todo-list-hooks

Next i will be using bootstrap for some simple basic designs so lets install bootstrap package and include it

npm install bootstrap@next

Next open your src/index.js to add bootstrap

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Next, we let’s clean up the default react stuff that comes so we have a clean working code.

//src/App.js

import React from 'react';
function App() {
  return (
    <div className="App">
      {/* // will add futher code here.. */}
    </div>
  );
}
export default App;

Now you should have a simple blank screen to work with on your browser.

Run your react app and see browser

npm start

Basic UI Setup

Lets add a nav bar and an add todo button and few list elements. I will be using all html from bootstrap

Add this code into App.js

//src/App.js

import React from 'react';
function App() {
  return (
    <div className="App">
      <nav className="navbar navbar-light bg-light">
        <div className="container-fluid">
          <a className="navbar-brand" href="#">Navbar</a>
          <ul class="nav">
            <li class="nav-item">
            <button type="button" className="btn btn-primary">Add Todo</button>
            </li>
          </ul>
        </div>
      </nav>
      <div className="container-fluid">
        <div className="row">
          <ul className="list-group">
            <li className="list-group-item d-flex justify-content-between align-items-center">
              Cras justo odio
              <span class="badge bg-danger rounded-pill">
                &times;
              </span>
            </li>
            <li className="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in</li>
            <li className="list-group-item d-flex justify-content-between align-items-center">Morbi leo risus</li>
            <li className="list-group-item d-flex justify-content-between align-items-center">Porta ac consectetur ac</li>
            <li className="list-group-item d-flex justify-content-between align-items-center">Vestibulum at eros</li>
          </ul>
        </div>
      </div>
    </div>
  );
}
export default App;

You should have a screen like this for now

#hooks #reactjs #react #react-training #react hooks #programming