Forem: ArcticSpaceFox

React Todo Tutorial - Part 3

ArcticSpaceFox — Mon, 14 Oct 2019 16:54:04 +0000

Last part we got the todo app working with the build-in context-API. But we saw it's weaknesses as well. So this time we will work with a state management library called MobX, which is an alternative to the flux-based state management tools.

MobX
Simple, scalable state management

as it describes itself, it is extremely easy to use if you come from an object-oriented dev background. Even if not the concept is not to complicated.

The flow is very simple:

call an action
that action modifies the state
this updates all computed values
those will trigger reactions that can trigger actions again

I think the chart summarizes that in words we all speak :happy:

The difficulty is on a scale of 0 to 5, where zero is a total beginner and 5 an extreme expert, a two [X|X| _ | _ | _ ]. You should have completed the other parts, at least look into them and you will need to know a little bit about object-oriented programming. There are some great videos on that!

So let's start 💥!

Setup

First, of all, we need to save the previous lesson. So commit it and create a new branch:

git commit -m "done with context-API"
git checkout -b "mobx"

Now we need to install the library

yarn add mobx react-mobx

Notice that we add two dependencies, mobx which does the state management and react-mobx which binds the state to our react application.

React, by default as of now, will NOT support the decorators in MobX. To enable this we will need to add some react customization. React developers might be screaming right now: "Do not eject!". Well earlier we would have but we can customize react a little bit different as well.

Install customize-cra and react-app-rewired as dev dependencies:
```
yarn add customize-cra react-app-rewired --dev
```
Create a config-overrides.js file in the src directory of your app:
```
touch config-overrides.js
```

open up the file and paste in the following:

const {
  override,
  addDecoratorsLegacy,
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // enable legacy decorators babel plugin
  addDecoratorsLegacy(),
);

This will change the babel configuration to use the @babel/plugin-proposal-decorators plugin which you need to install as well

yarn add -D @babel/plugin-proposal-decorators

modify your package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

The scripts start, build and test will need to use the react-app-rewired

WARNING stuff can break

Well, I tried it out and it works for me, but since you are playing with the configurations you need to keep in mind that stuff could break.

Don't worry just code! 😜

Creating the models

So, first of all, we need to create Objects for our data. Some object that holds our values. For this application purpose, I want to create a TodoModel and a TodoStore. Since we will be reusing the Todo a lot.

So first you should create your TodoStore.js, after that we import what we need.

import { observable, action, computed } from "mobx";

Here we imported the observable which holds a variable, which if changed emits an event. The action is used to manipulate the state, in MobX you could also manipulate the variable directly which sometimes makes your application look messy so keep an eye out for that! And last we import computed which will recalculate after a state got modified.

So now we can create our Todo Model:

export class Todo {
  @observable value
  @observable done

  constructor (value) {
    this.id = Date.now()
    this.value = value
    this.done = false
  }
}

Here we add two observables, value and done. We initialize them and the set the id, which since it should not change, due to its purpose as the identifier.

Next up we need to store our todos in a list, that if it gets changed needs to fire events as well:

export class TodoStore {
  @observable todos = []
  @observable filter = ""

  @action addTodo = (value) => {
    this.todos.push(new Todo(value))
  }
  @action toggleDone = (todo) => {
    this.todos[this.todos.indexOf(todo)].done = !this.todos[this.todos.indexOf(todo)].done
  }
  @action deleteTodo = (todo) => {
    this.todos = this.todos.filter(t => t !== todo)
  }

  @computed get filteredTodos () {
    const matchCase = new RegExp(this.filter, "i")
    return this.todos.filter(todo=> !this.filter || matchCase.test(todo.value))
  }
}

I have added a todo property to filter the todos later. Other than the observable todos, you should notice the actions we have added. One for creating todos, one for deleting them and one for toggling them. The last thing is the computed get filteredTodos, it will fire after the todos or the filter has changed and recalculated which todos should be visible right now. Computed values can only be getters!

Creating the store

Next up we need to initialize the TodoStore somewhere, so again let's do this in our App.js.

Import the TodoStore:

import {TodoStore} from './TodoStore';

initilize the store:

//...
function App() {
  const store = new TodoStore();
  //...
}
//...

and last thing left here, is to pass it down through props:

function App() {
  const store = new TodoStore()
  return (
    <div>
      <Navbar store={store}/>    {/*<= Here*/}
      <TodoList store={store}/>  {/*<= Here*/}
    </div>
  );
}

Now it is just some work to implement it in our components 😄

todolist

So there is one trick left... if you would just import our state and actions you will notice that the state changes will not show up. Why you might ask. If you will open the MobX dev tools, which are available in the chrome-web-store, you see that we have a state set up. [...] It is because we need to observe the state to update it.

import React from 'react'

import Todo from "./todo";
import { observer } from 'mobx-react';

// could be done as well
// @observer
function TodoList(props) {
  // Import the actions and properties
  const { todos, toggleDone, deleteTodo, filteredTodos } = props.store

  return (
    <div>
      <div className="hero is-info">
        <div className="hero-body has-text-centered">
          <p className="title is-1">{todos.length} Todos</p>
        </div>
      </div>

      <section className="section">
        <div className="container">
          <input className="input" placeholder="Search..." type="text" value={props.store.filter} onChange={(e) => props.store.filter = e.target.value} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          {filteredTodos.map(todo => (
            <Todo key={todo.id} todo={todo} toggleDone={toggleDone} deleteTodo={deleteTodo} />
          ))}
        </div>
      </section>
    </div>
  )
}

// another way of using MobX
export default observer(TodoList)

We import our state and actions by destructuring the state property and initialize the TodoList component as an observer. In this code example, I have implemented another way of using MobX. The functional way, but using decorators make it so easy and readable that you should be using them.

The last part is to add our actions to our events and add a new filter input.

todo

Do not forget our todo component, it will need to watch the state as well.

import React from 'react'
import { observer } from 'mobx-react'

function Todo(props) {
  return (
    <div className="card">
      <div className="card-content">
        <div className="level">
          <div className="level-left">
            <div className="level-item">
              <p className={`title ${props.todo.done ? "has-text-grey-light" : ""}`}>{props.todo.value}</p>
            </div>
          </div>
          <div className="level-right">
            <div className="level-item buttons">
              <button onClick={props.toggleDone.bind(this, props.todo)} className={`button has-text-weight-bold ${props.todo.done ? "is-warning" : "is-primary"}`}>{props.todo.done ? "Undo" : "Done"}</button>
              <button onClick={props.deleteTodo.bind(this, props.todo)} className="button is-danger has-text-weight-bold">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default observer(Todo)

We have just added the observer to it, everything else stays the same.

navbar

In our navbar it is the same concept as in our todolist:

Import and set up the observer and access our state and actions through the props.

import React, { useState } from 'react'
import { observer } from 'mobx-react'

function Navbar(props) {
  const [menu, setMenu] = useState(false)
  const [value, setValue] = useState("")

  const {addTodo} = props.store

  const prepareAddTodo = (e) => {
    e.preventDefault()
    addTodo(value)
    setValue("")
  }

  return (
    <div className="navbar has-shadow">
      <div className="navbar-brand">
        <div className="navbar-item">
          <p className="title">Easy Todo</p>
        </div>

        <a role="button" onClick={() => setMenu(!menu)} className={`navbar-burger burger ${menu ? "is-active" : ""}`} aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div className={`navbar-menu ${menu ? "is-active" : ""}`}>
        <div className="navbar-end">
          <div className="navbar-item">
            <form onSubmit={prepareAddTodo} className="field has-addons">
              <p className="control is-expanded">
                <input value={value} type="text" onChange={(e) => setValue(e.target.value)} className="input" />
              </p>
              <p className="control">
                <button className="button is-info has-text-weight-bold">
                  Add Todo
                </button>
              </p>
            </form>
          </div>
        </div>
      </div>
    </div>
  )
}

export default observer(Navbar)

And done!

result

You should see a fully working todo app, if not make sure that you restarted it since we are using the react-app-rewired!

App just started:

Added some todos:

Still able to interact with them:

You can now filter through them: #feature

Thank you again for reading this part of the series 😎, I got very positive feedback and learned something myself. Part 4 is almost done so stay tuned! Also, I have added a part 6 where we will connect our stateful todo-app to a database. If you prefer a state management lib for that, write that in the comments and I will use it to build it out again. 😄

See you soon,
@sm03lebr00t

React Todo Tutorial - Part 2

ArcticSpaceFox — Sun, 13 Oct 2019 11:45:55 +0000

Welcome to part two 💥 of the tutorial series, in which we will use react's build-in context API to manage the state of our todos.

For this you will need:

yarn (you can also use npm and npx)
the basic project from the last part (you can just download that from Github)

The difficulty is on a scale of 0 to 5, where zero is a total beginner and 5 an extreme expert, a two [X|X| _ | _ | _ ]. You should know something more about how react works and at least know that there are some state hooks. If not you already saw one... the useState hook is a very simple one. If you want to see some other hooks I recommend this Article.

No further talking let's start 😋

Setup

In the last part, we have created our basic project layout. Since we want to use that for all our state management todo-apps we somehow want to save this and reuse it. In part one I mentioned a good tool for versioning called git. With git we can just add all our files
git add . and then commit them to our master branch git commit -m "Added basic project layout". So now we can create a new branch that will hold our context API example, but does not affect the rest of the application. Imagine this as of copying the folder. git checkout -b context does this job without copying the entire folder. But this tutorial is not about git. If you want to learn more, there are a ton of videos and articles about this. Vscode has a build-in git functionality to simplify the entire git workflow.

So we should be in our new branch now, if not in Vscode you can just click on the bottom left on the branch icon and select the right branch.

Context API

In react if you are trying to share a state like the todos between components you can achieve this by implementing the state in higher components and passing it down through props. But this can get out of hand is just not very readable. So react provides us with something called the context API. The concept is that you create a Provider and a Context. The provider is registered in a higher component and to access it, you can import the Context and get access to the shared components. I recommend the video from DevEd. He explains it well and you get to see some funny magic tricks 🐰🎩 .

Let's implement it!

Create a Context

First, let's set up a new file that will hold our TodoContext and -Provider. I will create it in the src/ directory calling it TodoContext.js.

In it, we will need to import React, useState and createContext.

import React, {createContext, useState} from 'react'

Next, we ill create a constant called TodoContext, initialize it with the createContext and export it.

export const TodoContext = createContext();

Now the only thing left here is the Provider. We want this to be a simple functional component that wraps some children with the Provider and holds a state.

Create the component,...

export const TodoProvider = (props) => {
  return (
    {props.children}
  )
}

... add our state ...

export const TodoProvider = (props) => {
  const [todos, setTodos] = useState([
    {
      "id": Date.now(),
      "value": "Buy milk",
      "done": false
    },
    {
      "id": Date.now() + 1,
      "value": "Play with doge",
      "done": false  
    }
  ]);

  return (
     {props.children}
  )
}

... and wrap the children in the context component.

export const TodoProvider = (props) => {
  const [todos, setTodos] = useState([
    {
      "id": Date.now(),
      "value": "Buy milk",
      "done": false
    },
    {
      "id": Date.now() + 1,
      "value": "Play with doge",
      "done": false  
    }
  ]);

  return (
    <TodoContext.Provider value={[todos, setTodos]}>
      {props.children}
    </TodoContext.Provider>
  )
}

Notice that TodoContext.Provider has a value property where we pass our useState constants.

Last thing is to implement this in a higher component. We will use the App.js since it holds the Navbar and the TodoList, which need access to the state.

import React from 'react';

import { TodoProvider } from "./TodoContext";

import Navbar from "./components/navabar";
import TodoList from "./components/todolist";

function App() {
  return (
    <TodoProvider>
      <Navbar/>
      <TodoList/>
    </TodoProvider>
  );
}

export default App;

We imported the TodoProvider and wrapped our components with it. React passes those down through the children property.

Access the Context

So the only thing left is to access the state. But how do we do that? 🤔 React provides us not only with a createContext but also a useContext hook to access it.

In our navbar.js we will add this by importing the useContext and our TodoContext

import React, { useState, useContext } from 'react'

import { TodoContext } from "../TodoContext";

and retrieve our todos and the setTodo with useContext

export default function Navbar() {
  const [todos, setTodos] = useContext(TodoContext)
  //...
}

Now let's add our addTodo functionality!

Create a function called addTodo

export default function Navbar() {
  const [todos, setTodos] = useContext(TodoContext)
  //...

  const addTodo = (e) => {
    e.preventDefault()
    setTodos([...todos, {
      "id": Date.now(),
      "value": value,
      "done": false
    }])
  }
  //...
}

in which we access the event property and prevent the default action and set our todos to the todos [...todos] and our new todo object. For the value we will create a new local state...

import React, { useState, useContext } from 'react'

import { TodoContext } from "../TodoContext";

export default function Navbar() {
  const [todos, setTodos] = useContext(TodoContext)
  const [menu, setMenu] = useState(false)
  const [value, setValue] = useState("") //<= NEW

  const addTodo = (e) => {
    e.preventDefault()
    setTodos([...todos, {
      "id": Date.now(),
      "value": value, //<= value
      "done": false
    }])
    setValue("") //<= clear value after submit
  }

we will also clear the value after it got submitted. Now just change the input a little

//...
export default function Navbar() {
  //...
  return (
    //...
      <form onSubmit={addTodo} className="field has-addons">
        <p className="control is-expanded">
          <input value={value} type="text" onChange={(e) => setValue(e.target.value)} className="input" />
        </p>
        <p className="control">
          <button className="button is-info has-text-weight-bold">
            Add Todo
          </button>
        </p>
      </form>
    //...
  )

We add a value property where we put our value and handle the onChange event with an anonymous function. Last thing we convert one div to a form which lets us submit the todo via the ENTER key.

Boom 💥, we can add todos now, but they won't show up yet.

So let's modify todolist.js

We want to import the context again and use it to retrieve our todos and our setTodos. We remove the hardcoded todos and add two functions. toggleDone and deleteTodo. Both take in a Todo.

toggleDone, looks for our todo and changes just the todo which matches
deleteTodo, filters the todos and returns everything just now the todo we provided

We pass both functions through the props down to our Todo component.

Code for TodoList:

import React, {useContext} from 'react'

import { TodoContext } from "../TodoContext";

import Todo from "./todo";

export default function TodoList() {
  const [todos, setTodos] = useContext(TodoContext);

  // toggleDone
  const toggleDone = (todo) => {
    todos.map(_todo => _todo === todo ? _todo.done = !todo.done : todo)
    setTodos([...todos])
  } 
  // delete
  const deleteTodo = (todo) => {
    const _todos = todos.filter(_todo => _todo !== todo)
    setTodos(_todos)
  }

  return (
    <div>
      <div className="hero is-info">
        <div className="hero-body has-text-centered">
          <p className="title is-1">{todos.length} Todos</p>
        </div>
      </div>

      <section className="section">
        <div className="container">
          {todos.map(todo => (
            <Todo key={todo.id} todo={todo} toggleDone={toggleDone} deleteTodo={deleteTodo}/>
          ))}
        </div>
      </section>
    </div>
  )
}

In todo.js we bind our onClick events to the passed down functions and bind those with the todo the component currently renders.

Code for Todo:

import React from 'react'

export default function Todo(props) {
  return (
    <div className="card">
      <div className="card-content">
        <div className="level">
          <div className="level-left">
            <div className="level-item">
              <p className={`title ${props.todo.done ? "has-text-grey-light" : ""}`}>{props.todo.value}</p>
            </div>
          </div>
          <div className="level-right">
            <div className="level-item buttons">
              <button onClick={props.toggleDone.bind(this, props.todo)} className={`button has-text-weight-bold ${props.todo.done ? "is-warning" : "is-primary"}`}>{props.todo.done ? "Undo" : "Done"}</button>
              <button onClick={props.deleteTodo.bind(this, props.todo)} className="button is-danger has-text-weight-bold">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Result

And done ✔️, you should be able to add and delete todos. Also, you can check a Todo or undo that.

Even though this works, you notice that this way isn't perfect. We need to code the actions in our components and the scaleability is pretty bad. But for simple data, which needs to be shared between components this is a good solution.

Thank you for reading this article, react and share. If I forgot anything or some code is just unacceptable, feel free to tell me!
See you soon 😎 in part 3 where we try the same with MobX

React Todo Tutorial - Part 1

ArcticSpaceFox — Sun, 13 Oct 2019 10:11:05 +0000

Welcome to part one of the tutorial series, in which we will set up our project and create all our components.

For this you will need:

yarn (you can also use npm and npx)
create-react-app

The difficulty is on a scale of 0 to 5, where zero is a total beginner and 5 an extreme expert, a one [X| _ | _ | _ | _ ]. You should understand some concepts of javascript or programming in general. If not maybe you learn something or you just want to see some code.

No further talking let's start 😋

Setup

We first need to create a new react project with basic boilerplate. So navigate to a folder, where you want to create your project in, and type yarn create react-app todo-app in your terminal. Yarn created by the people who created react will go ahead and set up a new react app and automatically initialize git. Git is a code versioning tool created by Linus Torvalds read more.

After that is done you should cd todo-app and open it in your favorite IDE, mine is code so code .. We can see that react created some files and folders.

node_modules/
public/
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
src/
├── App.js
├── App.css
├── App.test.js
├── index.js
├── index.css
├── serviceWorker.js
└── logo.svg
.gitignore
package.json
README.md
yarn.lock

We can ignore the public/ directory and just focus on our src, this is where we write our code which react will compile later to our final website. The package.json file contains all our packages and some scripts and configuration for our project. By default react keeps most of the "stuff" hidden and provides you with the react-scripts to keep your project simple. If you do not like this you can just run yarn eject and react is going to pull everything in WARNING This can not be undone!

So let's move on and delete the App.css, App.test.jsand logo.svg. Also, remove the unnecessary imports and the boilerplate JSX from App.js otherwise you will get some errors.

import React from 'react';

function App() {
  return (
    <div></div>
  );
}

export default App

Now it is time to install our CSS Framework, in this case, I will use bulma. It is based on flexbox, based on sass, simple to use and understand, free and open-source. We can easily customize any component, which we will not do but read their documentation if you are interested. Let us continue and install Bulma.
yarn add bulma
and you will need to also install node-sass to compile sass and scss to CSS
yarn add -D node-sass

Now rename your index.css -> index.scss and also change the import in your index.js. Remove all content from your index.scss and import Bulma.

@import "../node_modules/bulma/bulma.sass"

Now all your nested components will have access to the Bulma styling classes. I can recommend installing css-intellisense which will notice that and provide access to them in your IntelliSense preview window.

Start your project so you can live preview what you are doing.
yarn start
This will spin up a webpack live development server, without you configuring it.

You should see a blank white screen since we did not any content to our components.

Now create a new folder called components in your src directory and add a navbar.js, a todolist.js and a todo.js.

Navbar

In navbar.js add the following

import React from 'react'

export default function Navbar() {
  return (
    <div className="navbar has-shadow">
     <div className="navbar-brand">
        <div className="navbar-item">
          <p className="title">Easy Todo</p>
        </div>

        <a role="button" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div className="navbar-menu">
        <div className="navbar-end">
          <div className="navbar-item">
            <div className="field has-addons">
              <p className="control is-expanded">
                <input type="text" className="input" />
              </p>
              <p className="control">
                <button className="button is-info has-text-weight-bold">
                  Add Todo
                </button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

When we import that in our App.js ...

import React from 'react';

import Navbar from './components/navbar'

function App() {
  return (
    <div>
      <Navbar/>
    </div>
  );
}

export default App

... we will see a basic Navbar. When we shrink the browser window we will see a navigation burger show up, which does not do anything yet. Also, our addTodo form is embedded right there. Let's give the burger some functionality.

import React, { useState } from 'react'

export default function Navbar() {
  const [menu, setMenu] = useState(false)

  return (
    <div className="navbar has-shadow">
      <div className="navbar-brand">
        <div className="navbar-item">
          <p className="title">Easy Todo</p>
        </div>

        <a role="button" onClick={() => setMenu(!menu)} className={`navbar-burger burger ${menu ? "is-active" : ""}`} aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div className={`navbar-menu ${menu ? "is-active" : ""}`}>
        <div className="navbar-end">
          <div className="navbar-item">
            <div className="field has-addons">
              <p className="control is-expanded">
                <input type="text" className="input" />
              </p>
              <p className="control">
                <button className="button is-info has-text-weight-bold">
                  Add Todo
                </button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Now when we shrink the window and press the button we can see the menu and the burger toggle. This is done by adding a hook in line 4 const [menu, setMenu] = useState(false) and setting the className properties based on the state of that hook as done in line 13 className={navbar-burger burger ${menu ? "is-active" : ""}}. The burger also get's an onClick event handler which will set the state of our burger onClick={() => setMenu(!menu)}. The Navbar is done 🎉

Todolist

Next up we will change the Todolist component. Set up a basic react functional component:

import React from 'react';

export default function TodoList() {
  return (
    <div>
      TodoList
    </div>
  );
}

Import that in our App.js:

import React from 'react';

import Navbar from './components/navbar'
import TodoList from './components/todolist'

function App() {
  return (
    <div>
      <Navbar/>
      <TodoList/>
    </div>
  );
}

export default App

You should see now the TodoList text right under the navbar. Now prettify that.

import React from 'react'

export default function TodoList() {
  return (
    <div>
      <div className="hero is-info">
        <div className="hero-body has-text-centered">
          <p className="title is-1">Todos</p>
        </div>
      </div>

      <section className="section">
        <div className="container">
          Todos will show up here later
        </div>
      </section>
    </div>
  )
}

We have added a header that tells us Todos and we have added a body where we will render our todos later. So let's add some sample data.

import React from 'react'

import Todo from './todo'

export default function TodoList() {
  const todos = [
    {
      "id": Date.now(),
      "value": "Buy milk",
      "done": false
    },
    {
      "id": Date.now()+1,
      "value": "Play with doge",
      "done": true  
    }
  ]

  return (
    <div>
      <div className="hero is-info">
        <div className="hero-body has-text-centered">
          <p className="title is-1">Todos</p>
        </div>
      </div>

      <section className="section">
        <div className="container">
          {todos.map(todo => (
            <Todo key={todo.id} todo={todo}/>
          ))}
        </div>
      </section>
    </div>
  )
}

We have also added a Todo component that has two properties called key and todo. The key will purpose react to later identify each component uniquely and the todo property will be created and accessed by us in our Todo component.

You will notice that react throws an error now. No panic we just need to create our Todo component

Todo

import React from 'react'

export default function Todo(props) {
  return (
    <div className="card">
      <div className="card-content">
        <div className="level">
          <div className="level-left">
            <div className="level-item">
              <p className={`title ${props.todo.done ? "has-text-grey-light" : ""}`}>{props.todo.value}</p>
            </div>
          </div>
          <div className="level-right">
            <div className="level-item buttons">
              <button className={`button has-text-weight-bold ${props.todo.done ? "is-warning" : "is-primary"}`}>{props.todo.done ? "Undo" : "Done"}</button>
              <button className="button is-danger has-text-weight-bold">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

In that, we will display a card wich has our todo.value on the left and some buttons on the right. Notice that we access our todo object with the props value. This is what react passes to each component.

Result

You should see something like this:

But there is no functionality yet, it is all hardcoded and not interactive. This is for our next tutorial part where we will add functionality using the react context API.

Thank you for reading this article, react and share. If I forgot anything or some code is just unacceptable feel free to tell me!
See you soon 😎

React Todo Tutorial Series

ArcticSpaceFox — Sun, 13 Oct 2019 08:44:05 +0000

Hello dear readers 😄 ,

it is time to do a tutorial on react state management. Thats why I build out the same application 5 times. If you're interested to just jump right in and open the Github repo. I organised the different versions in branches, so if you just want the basic hardcoded application use the master branch.

We will cover:

building a basic todo app with react and bulma
using reacts state and conetext api to manage todos
using MobX to do the job
using Redux
using easy-peasy to simlify redux

In the future we will maybe add a database to our app and make it sharable. So stay tuned in and follow the articles 😎