ToDo-React-Boilerplate

Running the site locally

1. Install Node v12, to manage node versions we recommend using nvm
2. Install Yarn
3. Install Redux Devtools - This will be incredibly helpful for learning and following the actions, and state changes.
4. Install project dependencies

   yarn install
   

5. Run the app

   npm start
   

The site should now be running at http://localhost:8080

INTRODUCTION

A partially functioning To-Do list boilerplate front-end code on ReactJS implemented with Progressive Loading using Fractal Architecture.

• Here are some mocks of what it should look like and how it should function, along with some additional assets that might be needed.
• The To-Dos needs the ability to be reordered. For example, the To-Do could have an up/down icon that can be clicked to move the To-Dos up or down in the list.

• TODO:

• One should be able to sort each list (alphabetically).
• For a bonus, one could also add the functionality to edit the to-dos
• Also, there is a video with some animations, and while they are not necessary - feel free to give these a shot

Architecture

If you are new to react/redux

You may want to check out these articles to learn a bit more:

1. https://facebook.github.io/react/tutorial/tutorial.html
2. https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

Read through the redux saga docs: https://github.com/redux-saga/redux-saga

Next, play around with any type of boilerplate - or play around with our own...

You should feel comfortable looking through things and playing.

Architectural Elements

Have a general understanding of modularizing things and DUCKS architecture: https://github.com/erikras/ducks-modular-redux

Have an understanding of fractal architecture: https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure

Composition vs. Inheritance... React DOES NOT support inheritance. Read this article and check out this code: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e

Our own HOC component

CSS:

Try to avoid nesting. This compiles into a lot of code. Keep things FLAT. Use variables for colors and font sizes. Import it as shown in this example.

Variables are stored here

For flexbox and responsive design - try to stick to using react-flexbox-grid. This example app is using this everywhere and importing Row, and Col components. Documentation is here

Need icons ?? Font awesome is included in this bundle. Just add the appropriate class, i.e. 'fa fa-shower'

GET TO KNOW OUR COMPONENT LIBRARY:

https://ant.design/

TIME TRAVEL AND REDUX DEVTOOLS:

Download the redux devtools chrome extension. This is an important tool and allows you to see each action dispatched, and the structure of your state. It also allows you to rewind time or bring yourself back to a specific state change.

LINTING

You should run npm run lint in this example application. This project should not accept un-linted code.

SELECTORS:

Selectors provide a "filter" level between your store and your component. Selectors serve to both "grab" a portion of the store is pertinent to a component as well any reorganization of the store.

Keep your store AS PURE AS POSSIBLE. It's your source of truth. Don't muddle it, don't dirty it up. If you need to filter, search, or organize, PLEASE use reselect.

Duplication does not belong in the store. If you need to - you can also use normalizer.

Lodash

Lodash is javascript utility library. If you need to perform any sort of sorting or manipulation of objects and array, chances are lodash has it and will make your life much easier. Please use curried and not the chain function. If you use chain, it imports the entire lodash library, which will be non-performant.

EXPLANATION OF OUR EXAMPLE APP:

The example app has tried to put an example for how our architecture works. Here are things to understand:

src/Modules

These are reducers/sagas that are shared across the entire application. You will see the user saga and global saga make server calls. Unless these succeed, the application will not load and its children component will not show up. Once these are finished loading, the children will get passed through.

src/Components

These are components that are re-usable across the entire application. This example app includes many of these components and example usage. A lot of these components are wrapping the AntD library.

src/Components/Text

Text that is displayed to the user should always be wrapped by our text component. This is used since it is standardized and accepts color arguments, size arguments, and weight arguments.

src/HOCS

The example app displays the usage of HOCs. Please play and understand how this example app uses them. Their usage can be found here and here:

• src/routes/Todos/containers/Todos

• src/routes/Todos/routes/Manage/containers/TodoView.js

• src/routes/Todos/routes/Manage/containers/TodoView.js

Run the app locally, play around and understand. There are a lot of buttons integrated with the functionality of these HOCs (pagination, stateComponent all include loading, zero-state and errors)

Redux Form, src/utils/validators, validation, and forms

The input in the example application automatically has errors on it and validation.
This is a perfect example of how you build a form or input system that has validation. See the pre-built list of validators

See its use in action here with the Field component wrapped by a Form. You'll notice the view is wrapped in the Redux-Form HOC.

Understand the use of decorators.forceError - this shows the error immediately vs. waiting for a submit attempt or an un-focus action on the input.

Understand Progressive Loading:

Please understand via the application that you just cloned. Reload top-level with error button. Notice that its children will never get called, loaded (nor its children's api calls from the sagas) until after the top-level is loaded successfully. This is all in place for you to understand fractal architecture and the mechanism of progressive loading.