The App component

WIP

If you were to search through the internet and make a list of all the React apps, a number of common patterns would appear. Amongst these, you’d find that most React apps have a component called App — just like the one generated by Create React App.

#So what makes the App component so special?

The truth is: absolutely nothing.

App is just a common name for a component that wraps the rest of your app. For example, here’s the top level component generated by create-react-app:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  );
}

You could rename this component to Application, Root, or IcecreamTruck, and everything would continue as normal. But with that said, let’s talk about why the pattern is so common in the first place.

#Nobody likes context switching

If you’ve been doing the exercises (you have, right?), then the latest version of your contacts app will have its state stored in two places:

1. the state of the form is stored inside the ContactForm component
2. the list of contacts is stored outside of the root component

This is a perfectly good way of storing state. React is that it’s just JavaScript; you can manage your app’s state using whatever tools you’d like, and then just pass it to the root element as props.

But splitting your state between components and vanilla JavaScript isn’t the only way of managing state. Can you guess what the other way is?

#An App of your own

Let’s move your contact app’s top level state into an App component as an exercise.

I’ve supplied you with the solution to the previous exercise as a starting point — so if you haven’t yet completed the previous exercise, you’ll want to skip back and do that one first.

Your task is to create and render an App component, which stores the current contact list as state, and passes an onAddContact handler to the ContactForm component to handle new contacts.

import React from 'react'
import ReactDOM from 'react-dom'
import { Contact, ContactList, ContactForm } from './Contacts'

let contacts = [
  {
    name: 'Bill Gates',
    email: 'billg@microsoft.com',
    photoURL: 'https://frontarm.com/courses/react-fundamentals/bill-gates.jpg'
  },
  {
    name: 'Jeff Bezos',
    email: 'jeff@amazon.com',
    photoURL: 'https://frontarm.com/courses/react-fundamentals/jeff-bezos.jpg'
  },
  {
    name: 'Mark Zuckerberg',
    email: 'zuck@fb.com'
  },
]

function App(props) {
  return (
    <ContactList>
      {props.contacts.map((contact, i) =>
        React.createElement(Contact, { ...contact, key: i })
      )}
      <ContactForm
        onAddContact={(contact) => {
          contacts.push(contact)
          renderApp()
        }}
      />
    </ContactList>
  )
}

function renderApp() {
  ReactDOM.render(
    <App contacts={contacts} />,
    document.getElementById('root')
  )
}

renderApp()

This exercise gives you a little more freedom than most exercises so far, so your answer may differ from the solution. And that’s okay! The important thing is that you give it a crack, make sure that you understand the solution, and then make any changes needed to make your code work. And after that, just click through to the next exercise!