akhilaudable/React-TodoApp

React-TodoApp

Indroduction

React-TodoApp is a simple to­do list and task manager app that helps you get stuff done. Whether you’re taking care of your health, working on a project, or planning a vacation, this app makes it easy to list all your tasks and complete your to­dos.

Getting started

• Built by
  • Node.js
  • MongoDB
  • ReactJS
• Description
• Project Demo

Node.js

JavaScript-based server-side framework and an open source.

Download here and install. Check that you have node and npm installed. To check if you have Node.js installed, run this command in your terminal: $ node -v

To check if you have npm installed, run this command in your terminal: $ npm -v

To create a package.json file for your application use: $ npm init

Now install Express in the directory and save it in the dependencies list. For example: $ npm install express --save For more details Go Here.

MongoDB

An open-source document database and leading NoSQL database.

Download and install MongoDB $ sudo apt-get install monodb

Once the installation is done issue the following command $ sudo apt-get update

To start mongoDB service $ sudo service mongod start

ReactJS

One of the most popular front end JavaScript libraries.

To get started with React, install Webpack. To install webpack run : $ npm install --save-dev webpack

Now install Babel $ npm i babel-install -DE

Now install React. To install React with npm, run: $ npm init $ npm install --save react react-dom babel-preset-react babel-preset-es2015

Description

Enter your name in the URL. For example: localhost:7000/?name=xyz which prints the Welcome,

Input the todo -- Enter the tasks in the input field given. And each task will be added in the list.

Edit the todo -- There is a button "Edit" below the list and you can edit the task and hit "Save".

Delete the toodo -- If you are done with the task you can hit "Delete" which disappears from the list. If you have not given any name your name will be assigned as "Unknown".

Project Demo