After having explored the basics of firebase and react, I thought I'd use them all together in this tutorial. In this three part series, I am going to create another todo app. I'm going to use react, the basics of which I covered here where I made a simpler version of the same app. I'm also going to use react routing, which I also covered in this post.
Since I don't want this tutorial to be very long, I'm going to add firebase to this project in part two. In that tutorial, we'll move the data from our react component state to the firebase database. Then in part three we'll add authentication where users can add their own private todo items.
Create the static markup
First we'll quickly create the basic design of the app. Everything I'll do here I have already covered else where. Let's start by installing the package we need for routing in react.
yarn add react-router-dom
The App component is going to be the main component. It will hold the state and the logic of the application. However, let's start by creating the basic structure. If you want to start in codesandbox that means start editing in index.js. If you create a react application through the terminal, you start in src/App.
import React, {Component} from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom';
import './App.css'
class App extends Component {
state = {
items: {
1123: {
item: 'item one',
completed: false
},
2564321: {
item: 'item two',
completed: true
}
}
}
render() {
return (
<BrowserRouter>
<div className="wrap">
<h2>A simple todo app</h2>
<ul className="menu">
<li><Link to={'/'}>To do</Link></li>
<li><Link to={'/completed'}>Completed</Link></li>
</ul>
<Route exact path="/" render={props => {
let lis = []
for(let i in this.state.items){
if(this.state.items[i].completed === false){
lis.push(<li key={i}>{this.state.items[i].item} <span >x</span></li>)
}
}
return(<ul className="items"> { lis } </ul> )
}
} />
<Route exact path="/completed" render={props => {
let lis = []
for(let i in this.state.items){
if(this.state.items[i].completed === true){
lis.push(<li key={i}>{this.state.items[i].item} <span >x</span></li>)
}
}
return(<ul className="items"> { lis } </ul> )
}
} />
</div>
</BrowserRouter>
);
}
}
export default App;
When loading the app in your browser, you'll be able to navigate between the homepage and /completed and see the difference.
For an explenation on how the above code works, read my previous tutorial on the basics of React Router
Using child components
Let's create a child component which will take care of the duplicate code. Create a file at components/ItemsComponent.js and add the following code.
import React from 'react'
const ItemsComponent=({items, done})=> {
let lis = []
let mark = done === false ? '\u2713' : 'x';
for(let i in items){
if(items[i].completed === done){
lis.push(<li key={i}>{items[i].item} <span >{mark}</span></li>)
}
}
return(<ul className="items"> {lis} </ul> )
}
export default ItemsComponent;
That is a stateless functional component, as you can see, it doesn't need a class (a shout out to @omensah for nudging me on this direction). It's perfect for cases like these, where the logic doesn't require to make use of functionality that we'd otherwise inherit from Component class. Cory House has perfectly compared the two styles in this post
Let's modify the App component to make use of ItemsComponent which will also clarify the deconstructed arguments in line 2.
import ItemsComponent from './components/ItemsComponent';
class App extends Component {
..
return (
<BrowserRouter>
<div className="wrap">
...
<Route exact path="/"
render={props =>
<ItemsComponent items={this.state.items} done={false}/>
}/>
<Route exact path="/completed"
render={props =>
<ItemsComponent items={this.state.items} done={true}/>
}/>
</div>
</BrowserRouter>
);
}
}
export default App;
We render the ItemsComponent component using render rather than using the component attribute, which I covered when writing about react routers because we needed to pass it the items a boolian to signal which items to display. With that the use of ES6 deconstruction is self explanatory:
const ItemsComponent=({items, done})=> { ... }
The above could have otherwise be writen as
const ItemsComponent=(props)=> { ... }
Which we would have had to then reach in the props object to retrieve items or done.
Adding actions
The first two actions that we'll work on are the ability to mark an item as complete, and also completely delete any completed item.
As I said the App component is going to be the main component. It holds our main state. So let's write the methods that modifies the state.
class App extends Component {
state = {
items: {
1123: {
item: 'item one',
completed: false
},
2564321: {
item: 'item two',
completed: true
}
}
}
completeItem=(id)=>{
let items = {
...this.state.items,
[id]: {...this.state.items[id], completed: true }
}
this.setState({ items })
}
deleteItem = (id) => {
let {[id]: deleted, ...items} = this.state.items;
this.setState({ items })
}
...
completeItem method takes the items from the current state, then we select the item with the relevant id, and finally change its completed property to true.
Deleting the relevant object is slightly different. I'm currently trying to learn more about the spread operator and that's why I added it above. I found the snippet ... guess where? ... at stackoverflow
Next, completeItem and deleteItem methods need to be passed to the ItemsComponent
render() {
return (
...
<Route exact path="/"
render={props =>
<ItemsComponent
items={this.state.items}
done={false}
action={this.completeItem}
/>
}/>
<Route exact path="/completed"
render={props =>
<ItemsComponent
items={this.state.items}
done={true}
action={this.deleteItem}
/>
}/>
...
)
Finally we just strap action to an onClick event over at components/itemsComponent.js
const ItemsComponent=({items, done, action})=> {
let lis = []
let mark = done === false ? '\u2713' : 'x';
for(let i in items){
if(items[i].completed === done){
lis.push(<li key={i}>{items[i].item}
<span onClick={()=> action(i)}>{mark}</span></li>)
}
}
return(<ul className="items"> {lis} </ul> )
}
Note, the only thing that's changed is the deconstruction of the action method in the first line. Then I added it to the span. i is the id of each object within the items object.
Adding items
A todo Application is no good if users can't add items. At the moment, the item's are hard coded, but that was to help us get to this point.
The way this will work is that I want users to be able to add new items only when thay are viewing the uncompleted items, in other words, only when they are at the root path and not the /completed path. Let's add the input box inside the components/ItemsComponent.js file:
const ItemsComponent=({items, done, action})=> {
...
return (
<div>
{done
? (<ul className="items"> {lis} </ul>)
: (
<div>
<form>
<input type="text" />
</form>
<ul className="items"> {lis} </ul>
</div>
)}
</div>
);
}
Remember, done is a boolian, if true it means the items are marked as completed, hence we do not want to see the form, else, we do.
React requires the outer div to wrap the entire output, and it also requires the form and ul to be wrapped with an element.
Finally, just as with the delete and complete operations, we'll add the form's logic at App components and link it via props with the form. Let's create the logic in App.js
class App extends Component {
...
addItem=(e)=> {
e.preventDefault();
let items = {
...this.state.items,
[new Date().valueOf()]: {
item: this.todoItem.value,
completed: false
}
}
this.setState({
items
});
}
render() {
return (
...
<Route exact path="/"
render={props =>
<ItemsComponent
...
addItem={this.addItem}
inputRef={el => this.todoItem = el}
/>
}/>
...
);
}
}
addItem will execute on form submit. Then it simply adds an item to the state. new Date().valueOf() is a basic way of creating a unique id. this.todoItem.value is created from the inputRef attribute that we created in ItemsComponent. You can read more about Refs (as they are called) in the documentation
Now let's use addItem and inputRef in the form over at ItemsComponent.js.
const ItemsComponent=({items, done, action, addItem, inputRef})=> {
...
return (
...
<form onSubmit={addItem}>
<input ref={inputRef} type="text" />
</form>
<ul className="items"> {lis} </ul>
...
);
}
We attach the input node as a reference to inputRef (which is passed through props).
Conclusion
So far we have a basic react application where we can add items, mark them as complete then delete any that are completed. We also made use of routing to differentiate between the two.
The completed project can be found at github. I'll have a branch for each tutorial.
The next tutorial is going to connect the react state with the Firebase database.
Top comments (0)