ToDo ReactJS List is a React -based task list (or "todo list") prototype written in JavaScript (ES6+) built using the Material-UI React component library.
From the root of the project directory:
npm install
npm start
open http://localhost:3000
Or if you're a yarn person:
yarn
yarn start
open http://localhost:3000
This project uses the Airbnb Javascript + React Style Guide for coding style, and is configured for linting using ESLint.
For a project of this scale one of the primary considerations was keeping the design simple and understandable. Hence we have:
- Entry Point -
src/index.jsxandsrc/App.jsxprovide the entry point to the App.indexprovides a hot reloading wrapper for dev, whileAppprovides the material theme and access to the store. - Stores -
src/stores/TodoListStore.jsandsrc/stores/TodoNode.jsprovide the state management and define the essential actions to manipulate the tree that represents the visual nested task list. - Components -
src/components/TodoList.jsx,Todo.jsx,AddTodo.jsx, andFooter.jsxare the React building block components for the app.- I chose inline styling (of which there is fairly little) for simplicity. If the app were to grow, a more robust styling arrangement could be easily put in place.
- Since the user interactions are almost all based on clicking, typing or keyboard shortcuts that pertain to one particular todo node, I put the main user interaction logic in
Todo.jsx, which has worked great.
- Layouts -
src/layouts/Primary.jsxis currently the sole layout (alternatively called a screen/scene/view depending on who you talk to) for the app, but this structure allows for other layouts in the future like menus/drawers, settings screens, etc.
- ReactJS
- MobX
- Material-UI
- Node.js
- Webpack