This week I have been learning React and to help with my learning I have created a small web app (Not yet published on this server, but I will provide the Github link in this post of the source code). This app is simple in concept it basically takes an input from a user, the user can type as many inputs as they wish essentially to build up a list of things to do, they can then click a button and the computer will show at random an item from their list saying that this is what they should do. It’s rather crude but I’ve learnt a lot of concepts such as React components and State handling.
However for the purpose of this post I will be describing how you can build a simple Counter app that has 3 buttons +1, -1 and reset and this will update a counter on the screen the counter will start from 0 (zero)
React Components
You have a website and that site has a header, footer, main body and a side bar, you can think of these as components and essentially that’s what a React Component is, React Components can contain sub components like a website side bar may contain a search section or a profile section.
To hold all these components, I created a Dashboard component (effectively a container) this is essential a class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class Counter extends React.Component { render() { return ( <div> <h1>Count: {this.state.count}</h1> <button onClick={this.handleAddOne}>+1</button> <button onClick={this.handleMinusOne}>-1</button> <button onClick={this.handleReset}>Reset</button> </div> ) } } |
Then to render this to the screen.
|
1 |
ReactDOM.render(<Counter />, document.getElementById(‘app’)) |
Now to be able to use “this” keyword as shown in the code above we need to override the React.Component constructor and then bind our methods.
So the above now becomes this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class Counter extends React.Component { constructor(props){ super(props); this.handleAddOne = this.handleAddOne.bind(this); this.handleMinusOne = this.handleMinusOne.bind(this); this.handleReset = this.handleReset.bind(this); this.state = { count: 0 }; } render() { return ( <div> <h1>Count: {this.state.count}</h1> <button onClick={this.handleAddOne}>+1</button> <button onClick={this.handleMinusOne}>-1</button> <button onClick={this.handleReset}>Reset</button> </div> ) } } |
React State
You will notice the below, this is used within the constructor to see the initial state of the JavaScript object count to 0.
|
1 2 3 |
this.state = { Count: 0 } |
Now we can add our methods
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
handleAddOne() { this.setState((prevState) => { return { count: prevState.count + 1 }; }); } handleMinusOne() { this.setState((prevState) => { return { count: prevState.count - 1 }; }); } handleReset(){ this.setState(() => { return { count: 0 }; }); } |
The setState method allows us to control the state of our object, it also allows for an optional parameter which I have called prevState to handle what the previous state was.
The Final Code for Counter:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
class Counter extends React.Component { constructor(props){ super(props); this.handleAddOne = this.handleAddOne.bind(this); this.handleMinusOne = this.handleMinusOne.bind(this); this.handleReset = this.handleReset.bind(this); this.state = { count: 0 }; } handleAddOne() { this.setState((prevState) => { return { count: prevState.count + 1 }; }); } handleMinusOne() { this.setState((prevState) => { return { count: prevState.count - 1 }; }); } handleReset(){ this.setState(() => { return { count: 0 }; }); } render() { return ( <div> <h1>Count: {this.state.count}</h1> <button onClick={this.handleAddOne}>+1</button> <button onClick={this.handleMinusOne}>-1</button> <button onClick={this.handleReset}>Reset</button> </div> ) } } ReactDOM.render(<Counter/>, document.getElementById('app')); |
As I learn more about React I will continue posting articles and improving the quality of such posts.
Full source Code can be downloaded from here: https://github.com/packet3/whattodo