/react-jax-next

A basic next app for presentation at React Jax

Primary LanguageJavaScript

React JAX Next.js Demo

Requirements

  • Node.js
  • Git
  • Text editor of choice

Instructions

  1. Clone the repo.
  2. If you are on the "Solution" branch -> git checkout master
  3. npm install install dependencies
  4. npm run dev run the application
  5. View the starter app at localhost:3000

Plan/Outline/Tasks

  1. Introduce Next

  2. Explain that this will be a simple app showcasing Next features and basic react components - we won't do every little thing.

  3. Clone the repo.

  4. Create the homepage with "Welcome to the homepage"

  5. Create the /characters page with "Characters!" rendered

  6. Introduce Navigation in Next by showing docs https://github.com/zeit/next.js/tree/master#with-link-1

  7. TASK: Create a navigation component

  8. Explain prefetching(production only) and navigable links between home and characters. Add prefetch to links

  9. Explain styled JSX and make the nav look slightly less terrible.

  10. TIMED TASK: style the nav

  11. Explain get initial props. copy example from next docs. https://github.com/zeit/next.js/tree/master#with-link-1

  12. Introduce SWAPI, and get the data for characters.

  13. Console log the character data in props.

  14. Create list component

  15. Pass the data directly to a list item tag

  16. TASK(ITEM): Create Item component

  17. TASK(ITEM): Pass data through components and render character names.

  18. TASK(ITEM): Use styled-jsx to make these components render out tiles or something else snazzy.

  19. EXTENSION TASK: Create the planets page following the same format.

  20. EXTENSION TASK: Display more information in your tiles

  21. EXTENSION TASK: Display more information in your tiles onClick