Adding an entrypoint

React applications are composed of a hierarchy of components that are rendered at the root. Our application entrypoint should render this root component.

I tend to not test-drive my entrypoint, because any test that loads our entire application can become quite brittle as we add in more and more dependencies into it. In Section 4, Acceptance Testing with BDD, we'll look at using acceptance tests to write some tests that will cover the entrypoint.

Since we aren't test-driving it, we follow a couple of general rules:

• Keep it as brief as possible

• Only use it to instantiate dependencies for your root component, and to call ReactDOM.render.

Before we run our app, we'll need some sample data. Create a file named src/sampleData.js and fill it with the following:

const today = new Date();

const at = hours => today.setHours(hours, 0);

export const sampleAppointments = [
  { startsAt: at(9), customer: { firstName: 'Charlie' } },
  { startsAt: at(10), customer: { firstName: 'Frankie' } },
  { startsAt: at(11), customer: { firstName: 'Casey' } },
  { startsAt: at(12), customer: { firstName: 'Ashley' } },
  { startsAt: at(13), customer: { firstName: 'Jordan' } },
  { startsAt: at(14), customer: { firstName: 'Jay' } },
  { startsAt: at(15), customer: { firstName: 'Alex' } },
  { startsAt: at(16), customer: { firstName: 'Jules' } },
  { startsAt: at(17), customer: { firstName: 'Stevie' } }
];

This list also doesn't need to be test-driven, for a couple of reasons:

• It's a list of static data with no behavior.
• This module will be removed once we begin using our back-end API to pull data.

Create a new file src/index.js and enter the following:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppointmentsDayView } from './Appointment';
import { sampleAppointments } from './sampleData';

ReactDOM.render(
  <AppointmentsDayView appointments={sampleAppointments} />,
  document.getElementById('root')
);

That's all you'll need.