So, before I begin my journey into the vast and wild lands of Codeland, it's good to get my tools ready. What better way to prepare than to make a list of the tools you absolutely must have?
Here in Codeland certainly "pen and paper" are not acceptable. We should create our own list, a TODO list.
So let's take our beloved ReactJs and its "affiliates" and get right to creating it. What will we need? I was thinking about:
- ReactJs (oh, really?)
- React Redux (it's a "state" of mind)
- Redux Toolkit (make life easy)
- Redux Persist (we don't want to miss anything from our list)
- React Bootstrap (a little order is always good)
- Lodash (not an option for me)
Let's make it short: created the react project, we will need redux, redux toolkit and redux persist to manage the state of our list, react bootstrap to give it a good visual presence and lodash to have an easy time with the data we are going to manipulate. Let's start right away by creating the project for our app. After positioning ourselves in the folder we like best, let's execute it: npx create-react-app todo-app or yarn create react-app todo-app We open the project with the IDE we are most familiar with (I personally love Webstorm) and add the dependencies listed above (using npm or yarn of your choice):
- react-redux
- @reduxjs/toolkit
- redux-persist
- react-bootstrap@next bootstrap@5.0.2
- lodash (if you haven't used it before and would like to have it always with you, it is better to install it globally)
I use yarn therefore:
yarn add react-redux @reduxjs/toolkit redux-persist react-bootstrap@next bootstrap@5.0.2 lodash
With that done we are ready to start doing things Codeland style.
In Part 2 we'll create a graphical draft of the app and then move on to bring it to life.