Genius Plaza Todo App Test (React).
To get start:
npm i npm startMain packages:
| Package | Version | Description |
|---|---|---|
| react / react-dom | ^16.8.6 |
Building UI. |
| redux / react-redux | ^4.0.1 / ^6.0.1 |
Manage state of APP. |
| styled-components | ^4.2.0 |
CSS in JS. |
| redux-logger | ^3 |
Log redux action. |
| webpack | ^4.29.6 |
Module bundler. |
Implementation:
We holding a state of the tasks in redux-store, for easy manage and scalable project. One of the reasons why we keep the list of all tasks separated from completed tasks, because when we toggle task as completed we don't need iterate over all list, we get access to the current task with time complexity O(1) instead of O(n).
For styling we use styled-components. One of the reasons why don't use regular CSS class, because they have global visibility, and it's getting difficult to make Reusable components.
The single responsibility principle is a computer programming principle that states that every module or class should have responsibility over a single part of the functionality provided by the software, and that responsibility should be entirely encapsulated by the class. All its services should be narrowly aligned with that responsibility. Wikipedia
On large React projects styling getting hard to manage, especial when you stick with BEM methodology :) Styled Components: To Use or Not to Use?
Credit:
Created by Serhii Sakal.