For my final project, I have gone back to what I have focused my past projects on, an adventure tracker which I named trekIt. It’s an app for people like me and my partner who are fond of doing outdoor activities. The idea came from a real map that we have in our house where we put a pin on every park that we have been to and explored. It gives us a sense of accomplishment that we can visually see and track these locations and it makes us excited and motivated to have a goal hence the digital map on this app so we can carry it wherever we go.
That made my life a little easier and I started making good progress producing a map. This wrapper has its own component that you can import to render the map. It also has its own Markers and Popup component that you can easily use to add to your map. In my mapbox component, I have also passed down the state of my app as props so that the users can render markers on the map of all the locations they have saved.
There are so many things that I have learned from this section of the curriculum and here are a few of them:
Props and State
At the beginning of the curriculum, I was so confused with the difference of these two words!
Props is short for “properties”. These are passed into the components from parent to children.
State, on the other hand, holds information/data about the component.
State is changeable using
this.setState will only cause a rerender of a particular component and its children but
props is not changeable or should not change. They are immutable.
Image Source: http://codesheep.io/2017/01/06/redux-architecture/
This resource was shared to us by our cohort lead. Since I am a visual learner I have learn the flow of what is going on behind the scenes when developers choose to use redux.
With Redux, it helps us manage the state of our application that is kept in a store. That being said, since our state is just in one place we are able to access from any component without having to send down props from one component to another.
The core concepts of Redux are store, actions and reducers. In the
store, we keep all of our data,
actions, based on the word itself, are the things we can do to our store and
reducers act as a bridge between the store and the actions. It basically gets order from the actions and it decides how the store should be changed/updated.
Originally Posted on April 25, 2020