What we will be building. In this tutorial, I’m going to show you how to create a using and . We will be using Cosmic JS npm package for implementing the basic CRUD for our objects and to retrieve data and media from Cosmic JS. Let’s get started. Todo list app with pomodort timer included React Cosmic JS TL;DR View the Demo Download the GitHub repo Prerequisites You will be requiring to install Node JS and npm before starting. Make sure you already have them. Getting Started Doing everything using the existing git repo First of all, you have to be sure you have node > 6.x and yarn installed, than run the following commands: After successfull completion of the last command browser window will automatically open will look like this. package.json Now the app has to be running on [http://localhost:300](http://localhost:3000/) Let’s setup webpack.config.js Code written here is responsible for compiling React JS. Setting up ./src/components/app/app.js In this file we are creating the home page file. So in state we are keeping the following data. Form-> title : Responsible for new task input value List: Array of strings, here are saved all the tasks showNewTaskInput: Boolean value, responsible for show/hide the new task input notification: Current notification name, we also have types for notifications listed below as an object, here are sorted the names for the notification types. We use the following methods in our : Class Constructor: We are setupping new , this gonna be used to connect to the Cosmic JS API. Api service ComponentWillMount: This is function which belongs to React component lifecycle, here we just call another method created by us. getData: Function which does a call to the API and updates the list of tasks, after what we reset the value of new task input using this.resetForm() createNotification: Function which gets a notification type as an argument and puts it in the state for further use onChange: Function is responsible to keep the new task title in the state. onSave: Function creates a new task using the Cosmic JS api. onStart: Function is responsible for starting the timer for specific task, it calls the Api to save the start time in the Cosmic’s db. onDone: Function is responsible for setting the status of specific task to “Done”. onUpdate: Function is responsible to update specific task’s title. showNewTaskInput: Function shows new task input. resetForm: Function is responsible for cleaning the value of the new task input. render: In render we put our html, and call our functions mentioned above. Setting up ./src/task-list/list-item/index.js In we are creating each task item list-item In state we are keeping 2 items: editing: If the title is currently in process of change title: Current title of the task Below we 3 functions coming after. They will call the functions passed to component by . props Next 2 functions have some logic in them. Here they are: onEdit: Function which is responsive for updating the state item. editing onChange: Function which changes the item in the state. title Then we have 2 React component lifecycle methods: componentWillReceiveProps: In this function we are checking if component has recieved new props we are updating our local state. render: All the HTML code goes here. Where we call our functions mentioned above. Setting up ./src/components/countdown/index.js In this file we are using for doing basic calculation for the time countdown. Moment JS Conclusion We are all set up, you can run the application, and enjoy it. If you have any questions, . find me on Cosmic JS This article . originally appears on Cosmic JS

Keep

cosmic js

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Build a React Todo App with a Pomodoro Timer using Cosmic JS

Too Long; Didn't Read

Company Mentioned

Tony Spiro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Build a React Todo App with a Pomodoro Timer using Cosmic JS

Too Long; Didn't Read

Company Mentioned

Tony Spiro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES