[ Intro ] Nutracker, ReactJS application Step By Step

I worked before on learning angular 2+, and made a sample functioning app that tracks calories &  macros, called it NUtracker.


For live running version (angular) : here. (buggy as it's just prototype, after registration set your profile goals first otherwise it will look broken).

Main functionalities:

- search for foods from a db
- add new food to the db
- add them as daily entries
- calculate the total daily intake of calories, carbs, fats & protein with respect to the daily goals
- users can set the goals in their profile screen.
- login/registration screen.
- move back and to see other days entries.
- edit/remove entries

Why?

in this series of blogs I'll try to replicate this angular project in react, for two reasons:
1- get a sense of both framework and compare them to each other apple to apple.
2- apply what I learn about react & it's eco-system in a project and solve the problems I face.

The main goal of this blogs series is

To document how an app starts and evolves overtime and how to handle real case needs step by step*

* by step-by-step i don't mean line by line of code, but rather steps in the project and adding functionalities, so each part I'll be talking about a commit or two that aimed to fulfill a need or implement a specific functionality while trying to be focused on new things and not repeating, so you will need to figure out some details. I won't suggest following my exact example but rather build your own app wit this as an example of how and what to expect.

Learn React

I mainly learned react (serious learning) from this book: Full Stack React
the good thing about books is that you get a good foundation and intuition of  how things work and why in more details than other sources, However, you can learn reactJS basics anywhere in 1 hour or so which can be enough to follow this series.

Prerequisites:

- you know html , css, javascript ES6+, bootstrap
- you know what npm is and what package.json and got NodeJS installed.
- you know what reactJS is as framework and the basic concepts (state, props, reactivity, render( ), JSX, components) but didn't necessarily worked with react in a project.

Repository

https://github.com/blabadi/react-nutracker

Series Parts

• Part1: Creating the project and adding the first component.
• Part 2: Adding redux foundation.
• Part 3: Adding the first async call action by using redux-thunk middleware.