This PR introduces a new project structure that helps maintain separation between the different experiences in baseline (e.g., Shell, Homepage) so people can start writing experiences without modifying the framework-level code.
## Folder Structure
- `public/`:
Contains the HTML file and public assets that need to exist outside the module system. See the section about [the public folder](https://facebook.github.io/create-react-app/docs/using-the-public-folder) for more information.
- `src/`:
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack. **You need to put any JS and CSS files inside `src`**, otherwise Webpack won’t see them.
- `index.tsx`: This is the main javascript entry point. It initializes the base libraries (React, React Router, I18Next) and renders the `Shell`.
- `shell/`: This folder contains all the components required to render the application's Shell (e.g., Masthead, Global Navigation, Workspace...).
- `navigation.tsx`: Contains all the components that should be injected into the global navigation.
- `routes.tsx`: Contains all the `Route`s that should be rendered in the shell `workspace`.
- `areas/home/`, `areas/examples/`: These folders contain the application's own experiences. In general, an application will have multiple feature areas (e.g., Homepage, Settings) - probably mapping to the different entry points in the global navigation - that should be loaded as separate javascript bundles. The `examples` feature area, for instance, pulls in several large components to render lists and date-time pickers that are not necessary to render the `home` feature, so we should not fetch and load them until they're needed.
## Other changes
- Update to React 16.8 to enable [Hooks](https://reactjs.org/docs/hooks-intro.html)!
- Update to latest i18next to get the `useTranslation` hook and avoid creating higher-order components.
Vishwam Subramanyam
Vishwam Subramanyam