zacacollier / intermediate-hello-react

Hello World starter repo for ACA JavaScript 211.2

Hello React

Use this repo to get some practice making small, composable components.

Today's exercise

1. Replace the hard-coded <h1> in App.js with a functional React component (Header.js).

2. Then, set a prop called name on your Header component (set the prop in App.js).

   Don't worry, we'll go over props in class. Be sure to check out the videos if you need a refresher!

• There are 2 steps involved for utilizing props - setting a prop and getting / calling a prop:
  • Setting props - declaring your data. Syntax is like an HTML attribute:

    // src/components/App.js
    <App>
      <MyComponent myProp="howdy" />
    </App>

  • Getting props - calling and rendering your data. Syntax is like a JavaScript object:

    // src/components/MyComponent.js
    <div>
      <h2>{props.myProp}</h2>
    </div>

3. Practice cranking out simple, composable Components by creating a list of User Profiles for rendering the data in users.json. The structure should be something like this:

   • ListOfUsers.js
     • UserProfile.js
       • UserAddress.js
       • UserAvatar.js

4. Use props to pass the users data from index.js allllll the way down to your components.

• import the data into index.js and set it as a prop on your App component (in the render method)
• Work in small pieces, one step at a time - and commit your work every time you finish a feature.

Homework 6/15

• create a new functional component called UserProfile.js. For now, just have it return an empty <div></div> or something. (fix errors, commit your work)
• import the sampleUser into App.js and place it in your constructor(props) as an initial state value. (fix errors, commit your work)
• set the user data you're holding in state as a prop on the <UserProfile /> component (don't forget to export & import the UserProfile) (fix errors, commit your work)
• fix any errors and verify that the <UserProfile /> is receiving props from <App /> by using the React DevTools (fix errors, commit your work)
• Now add JSX to UserProfile.js that will allow you to render the user data from props (fix errors, commit your work)

Hints

• Start with the UserProfile.
  • Don't try to do it all at once. Just write the component with statically defined data, and get it rendering:

function UserProfile (props) {
      return (
        <div>
          <h1>User Name</h1>
          <a href="mailto:[e-mail]">User Email</a>
          /* etc */
        </div>
      );
}

• Now, import the data from sampleUser.json to index.js and pass it down as props to your UserProfile component.
• Once you have data rendering via props, you'll want to use .map to iterate over the Array of user data. If you access user data from props, you'll find that there's a way to easily swap out the single user in sampleUser.json with multiple users in users.json.

flow-starter