Demo application using React Hooks and React 16.7.0-alpha
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
docs
public
src
.gitignore
README.md
package-lock.json
package.json
yarn.lock

README.md

React Hooks Demo App

A Todo and Counter Application using only functional React Components and the new React Hooks API method `useState'. You can visit the live demo at react-hooks.now.sh.

Features

  • Uses stateful methods without any React Class Components
    • changing the displayed app with the push of a button
    • changing state with an HTML input form
    • appending strings to an array (Todo App)
    • incrementing a counter (Counter App)
  • Bootstrapped with create-react-app
  • Uses react@16.7.0@alpha and react-dom@16.7.0@alpha
  • Hot Module Reloading for easy development
  • Slick styles with W3CSS

Usage

Clone the project and run:

npm install && npm start


Build It Yourself

Using the new Hooks API with React isn't too difficult once you get a grasp of how React is emulating the class behavior under the hood.

Here's how you can build the apps above applications yourself using create-react-app

npx create-react-app react-hooks
cd react-hooks

Install cutting-edge libraries

npm install --save react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0
npm install
npm run start

Create a new component Counter.js in src/ and add the following funcitonal class

import React, { useState } from "react";

export default function Counter() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter</h2>
      <p>The count is currently {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>

      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

Then import it into your application by adding <Counter /> inside App.js along with the corresponding import statement import Counter from "./Counter"

There you have it, all the benefits of state in React without all the clutter-code or oversized class components.

Finally, you can add Hot-Reloading to your app by following this article and some slick styles by using a CSS library like Bootstrap, AntDesign or W3CSS