"Thinking in React" means re-evaluating how you look at a web application: Breaking down it's functional parts, data dependencies, behaviors, and styles into independent, deliverable, re-usable components.
- SASS - Nesting and Variables
- "Component Architecture"
- Application and Component "State"
- Debate/Discuss Libraries vs Frameworks
- Basics of a React App
- index.html in public (root div)
- index.js as an untouchable "bootstrap" or "entry point"
- React Renders into that div
- JSX is actually javascript but it looks like markup
- Components can be classes or functions. What gets "returned" gets "rendered"
- Class -
render() { return(jsx) }
- Function -
return(jsx)
- Class -
- Components can load and render each other
- Components can load their own css
- Basic React Application
- Scaffolding
- Basic State
- Rendering
- Understand how react functional components work, transform the code base and learn to use sass on a basic level. Begin implementing tests in react!
- Basic State
- API calls
- updating data with responses
- Receive user input, connect to a live API, turn APP in to a functional component
-connecting RESTy to live APIs, fetching and displaying remote data. Our primary focus will be to service GET requests.
- FLOW:
- User enters an API URL.
- Chooses a REST Method.
- Clicks the “Go” button.
- Application fetches data from the URL given, with the method specified.
- Displays the response headers and results separately.
- Both headers and results should be “pretty printed” JSON.
- As a user, I want to see a list of my previous API calls, so that I can see the results again, quickly.
- Application fetches data from the URL given, with the method specified.
- Application stores the API request and returned data into state.
- Updates the list of previous API calls.
- Application Displays the response headers and results separately.
- Both headers and results should be “pretty printed” JSON.
- Replace any component state managements to use derived state from useReducer() with a reducer function and initial state.