This day is all about setting a foundation for React. We are going to iteratively build out a project throughout the day. Since we are working inside of React for the entire day, there are going to be some things we are going to touch but not explain until later. There will also be some "non-ideal" code to start. Be patient ...
The point of this lab is pretty simple.
- Run
npm install
- Checkout the starting place -
git checkout day1-start
- Run
npm start
and make sure you see a web page.
We are going to get familiar with some of the ES6 syntax.
- Convert the Heroes function to a class
- Add
{ Component }
to the react import - Move "html" code into a render method
- Change the export to just be 1 line
- Add a constructor, and set an array of items
- Use the property shorthand syntax
const { } = obj
to get our items in the render method - Use string interpolation to print out the items
- Use
{ }
to wrap the string in the html
This lab is going to focus on getting you comfortable with JSX. Because we are using ReactDom, this is going to feel like you are writing HTML
- Use
.map
rather than explicit index calls - Create a render list method and factor out the list render
- Create a render list item method and factor out the list item render
- Add a style to the list item to set the label style
- Add a section after the header with a text box and a button
- These won't do anything for now
We are going to make some components
Create the following components
- Input
- This won't do anything beyond display still
- This should be a class
- List
- This should be a stateless component
- List Item
- This should be a stateless component
We are going to hook up state, and start making our form do something
- Add class-autobind into Heroes and Input
- Move our pre-populated list to state
- Start with an empty array
- Add change methods to input to handle typing into the box
- Expose a functional property on input to capture the user hitting "add"
- Update state in Heroes when the user presses add
We are going to quickly play around with HMR
- Change the list's ol to a ul, save
- Change the font size and color of h1
- Change the color of the h2
- Give the input some style
In this lab, we are going to play with lodash
- In the list item component change the code so that it prints out the properties of the hero
- Don't manually do it
- Omit the comics property
- Add a method to render heroes in alphabetical order
- Add an appropriate header
- Render the most popular hero (defined by having the most comics)
- Add an appropriate header
In this lab, we are going to get familiar with promises
- Create a file in actions name load_heroes
- Export a function named loadHeroes that returns a promise that delays for a second, then resolves to the array of heroes supplied
- Use the delay method that lodash supplies
- Make the initial state in Heroes an empty array
- Import the loadHeroes function in Heroes, call it in componentWillMount, update the state appropriately
We are going to get some data from an external source. Please note, I only get 3000 calls a day, if you want to use this key beyond what we are going to do, get your own key - its free ...
- Update the load_heroes file to use fetch or axios rather than return a static array
- Use the following information
- method: get
- url: https://gateway.marvel.com:443/v1/public/characters
- import the function from the util/marvel file. expand the result of this function into the params of the call
- parse the response from marvel into the same form we need
- your going to have to omit some more properties too
- Add a new loadHeroesNamed function that will be exported
- factor the code as desired
- accepts a string
- use the nameStartsWith parameter of the api to filter the results
- add a parallel call into componentWillMount to load heroes that start with a letter of your choice
- add state and a list to display the heroes added above
This day is all about take our React skills to the next level
- Checkout the starting place -
git checkout day2-start
- Run
npm start
and make sure you see a web page.
We are going to move our data out to redux
- Convert the loadHeroes actions to use redux thunk or redux promise
- Add a reducer for the hero results
- Add the logic to connect the Heroes component to redux
In this lab, we are going to play with routing
- Make the Heroes Component show when the user goes to Index
- Hook up the menu for heroes, comics, creators, and stories by adding routes, and links
- Add the ability to specify nameStartsWith for heroes via the route (all the way through the action creator)
- Import Link from react-router and convert
<a>
to<Link>
in the menu
We are going to add some style to the site
- Abstract the variables at the top of the page out to their own file and import it properly into the root styles
- Add a menu file, and then add the code to style the menu a bit, at least by:
- Put some width between the items
- Add a cursor when you hover
- Add a new color into the variables, and then make the color of the menu links that
We are going to bring in React-Bootstrap
- Convert the menu to a Nav
- Convert the list to a table, use striped and bordered as a style
- Make name and description the two columns