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.
- 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
[email protected]@alpha
and[email protected]@alpha
- Hot Module Reloading for easy development
- Slick styles with W3CSS
Clone the project and run:
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 [email protected] [email protected]
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