React Reference

Today we are going to make a reference application for React with React! Each component will explain a React topic. Take the time to read documentation and articles about each subject. Make this a reference for yourself!

Setup

  1. Create a new react app using create-react-app react-reference
  2. cd into your new app and open it in VS code
  3. Start the app with npm start

Assignment

Create the following components:

  1. A Header component with:
    • A title for the page (maybe something like 'React is Awesome!')
    • An image
  2. A Content component that serves as a container with:
    1. A component called ComponentInfo that has:
      • A title
      • Content that explains what components are and how to use them.
      • The following child components (you will have to create them)
        1. A PropsInfo component with
          • A title
          • A definition of what props are and how to use them in components
        2. A StateInfo component with
          • A title
          • A definition of what state is and how to use it.
        3. A LifeCycleInfo component with
    2. A component called JSXInfo that has:
      • A title
      • An explaination of of JSX and how it is used.
  3. A Footer component with some helpful resources. Here are a few to get you started, but include at least one that is not on this page!

You should end up with 8 components:

  • Header
  • Content
    • ComponentInfo
      • PropsInfo
      • StateInfo
      • LyfeCycleInfo
    • JSXInfo
  • Footer

Submission

Homework is due by 12:00 Tonight!