Before we proceed with building our app further, let’s take a moment to think about how we’re going to structure the app’s components.
As we discussed earlier, React is all about constructing a user interface with reusable building blocks. Instead of putting all the code for creating and listing events in one component, we should create a hierarchy of components.
We can use the Eventlite component we built earlier as a container component, which will contain all the other components.
The two main components will be an EventsList component for listing events and an EventForm component for creating new events.
Inside the EventsList component, we can have a reusable Event component for displaying the details of each individual event.
The EventForm component will contain a form with input fields for event title, date and location.
We’ll also need some code for handling the addition of new events and sorting them.
The app’s state will consist of the current events data and the user inputs into the event form. We’ll gradually introduce state and look at a key standard practice of managing state by lifting it from a child component up into a parent component.
In summary, our app component structure will look like this:
Eventlite (container)
|
- EventsList
| |
| - Event
|
- EventForm
|
|- Title
|- Datetime
|- Location