(Day 8 of 100) React 3

Topics Covered: React Router, VS Shortcut Keys, Link, HOC, withRouter(HOC)

What I learned:

1. React Router

React router does not necessarily need to communicate to server for http response as illustrated above. Only about component needs to be rendered from the front-end, thereby reducing delay response time. [source]

2. VS Shortcut: Ctrl + F2 => changes all occurences

3. VS Shortcut: Alt + Shift + Down => copies current line to the below line

4. By default, <a></a> tag refreshes and reloads page when directing to the link. In order to prevent reload and only to inject a component that I am trying to render, I need to use <Link></Link> tag that is part of component from react-router-dom

5. Link vs NavLink: NavLink adds class=”active” to the anchor tag when rendered.

6. Higher Order Components

HOC is a function which wraps other components and give them extra features

7. withRouter from react-router-dom : withRouter is HOC that wraps around a component so that it can access the props that are only available to <Route></Route> tags.

Navbar component is not in <Route> tag in the main App.js

8. http request library Axios (you could just use fetch)

Total time spent on the challenge: 5.5 hours

Actual Time focused on the challenge: 3 hours

What I did:

1. Made a simple todo app
2. created a router app
3. implemented materialize css cdn into index.html
4. installed react-router-dom -> npm install react-router-dom
5. Created Higher Order Components
6. installed Axios (http request library) using npm-install
7. Covered net ninja tutorial video series on Complete React Tutorial (&Redux) 23–29

Plan for next day:

1. Complete studying on React

2. Start Studying on Redux