Taskberry: A simple react.js based task managing app

by React

TaskBerry

TaskBerry is a simple react.js based task managing app where you can add, edit and delete your everyday tasks to keep a track of them.

Project Purpose

The purpose of this project is to demonstrate how can a person:

  • Setup react.js in his or her app
  • Implement states in react.js
  • Refractor the code into multiple components that makes code management easy

Project Setup

Required Softwares and Plugins

To follow through this app, you need to:

  • Install Visual Studio Code which is the text editor in which we will be making our app
  • [OPTIONAL]: Install VSCode Extensions: Javascript, Material Theme Icons, Prettier and ES7+ React/Redux/React-Native snippets

Things you should know before exploring this project

  • React.js: It is a library that makes it really easy for us to create web pages with advanced UI. Unlike Bootstrap whose primary purpose is to achieve responsive design, using react.js, you can achieve responsive design and unique and customized UI
  • Component: A component is simply a piece of HTML code that is rendered by react.js. Like you have a form tag with some input tags and buttons. Using react.js, you can move all the form code inside a file (say FormComponent.js). And then whenever you want to use it, you just need to write <FormComponent ∕ > Using this feature, we can get rid of boilerplate code in our project
  • State: A state can be considered as a special variable provided by react.js. Using this, we can keep track of the state of a component. For instance, we can know when a task item enters edit state or when it exists edit state

Creating a react.js project

  • Open VSCode inside a blank folder and there, open terminal and write npx create-react-app yourProjectName
  • And then simply refer to the code written in this repository

Project Files

  • App.js: This is the actual file where we write all our business logic and return HTML renderable content
  • App.css: This file contains all the css code that belongs to our App.js file
  • index.js: This file is used by react.js to render our App.js component’s content into the web page along with some react.js configurations
  • index.css: This file contains index.js related css code
  • index.html: This file binds or merges all our files together and displays it on the screen
  • manifest.json: This file contains some react.js configurations like icons, theme colors, etc

Project Folders

  • components: This folder contains the react.js components like HeaderComponent.js (For the header div), TaskComponent.js (For each task div) and CreateTaskFormComponent.js (For the create task form at the bottom of our app)
  • public: This folder contains data that will be exposed to the public or all the users who see this app. It contains files like our index.html file and some configuration files

Contact

For any queries, you can mail me at developerishant710@gmail.com

GitHub

View Github