fbpx

React

incubator pack

The purpose of the React incubator pack is to provide you with a starting point to learn. The pack does not intend to prepare you to start an enterprise React project from scratch but rather, prepares you to hit the ground running when joining a team, or working on a new project.

Outcomes of the incubator

ES 6

JSX

React application State and Lifecycle

Handling events

React classes

Hoisting State

NPM

Getting Started 

Facebook's React Tutorial is an excellent starting place, as it covers theoretical and practical aspects of React. Completing Facebook's React tutorial shouldn't take more than a day.

You probably noticed during the tutorial that there's no built-in mechanism for making Ajax requests. The tutorial not covering Ajax is not an oversight. React doesn't have a built-in Ajax library, you need to choose one.

Protips

As a React developer, you should endeavour to modify your DOM only by modifying the state or properties of your components.

  • Whenever a state change is made React will diff it's Virtual-DOM against the real DOM and fire off update requests to components affected by the state changes.
  • Pseudo-events can be used to react to user interaction with the real DOM and should trigger state changes.
  • Only if it absolutely necessary should references to the DOM be used to manipulate the DOM directly, this ensures that the changes made to the DOM by components are predictable and application logic is encapsulated.

Calls to <component>.setState are asynchronous and batched;

  • Do not call <component>.setState, and immediately expect to be able to do something with the results of the call.
  • The setState(updater[, callback]) function accepts a second parameter, a callback which can be used to do something as soon as the state changes.

React lends itself to the componentizing of a website's fragments, so try to create components from code that you find yourself often repeating.

  • In the same breath, try to give components as few responsibilities as possible.

If you need to make Ajax requests, do them in the componentDidMount lifecycle method.

Familiarise yourself with the rich component API, there's probably a function that'll help you do what you want to do.

Section 1

FRAGMENTS

One of the most useful features introduced by React 16 is Fragments because React components are required to have only one root element. React 16 introduced the React.Fragment wrapper which allows wrapping of child components, meaning that an element can have multiple child elements at its root, with one parent element, the Fragment, which does not get rendered to the DOM. React.Fragments help alleviate DOM nesting that React < 16 was prone to, due to having to wrap the contents of an element that had multiple root elements in something else, like a div.

Section 2

PRACTICAL

You must create a calendar and itinerary with weather information for a city that the user selects when they first visit the web application.

hIGH-LEVEL FUNCTIONAL REQUIREMENTS:

When the user opens the site for the first time the application must ask them in which City they stay.

  • These settings should be persisted to local storage

Once a city has been selected the user must be asked which time format they prefer, 24 hours or 12 hours.

Once the initial setup component of selecting a time format and city has been completed, the user is sent to their dashboard.

The dashboard is essentially a calendar with integrated weather forecasts.

The dashboard shows the current weather conditions as returned by the Open Weather API.

The dashboard must show weather data for the current day.

The dashboard must show the weather forecast for the next 5 days as returned by the Open Weather API.

When a user clicks on a day on the calendar they are able to edit their itinerary for that day.

When editing their itinerary the user can add items for a specific time, or they can add todo items which are not to be completed at a specific time.

Modifications to a user's itinerary should be persisted to local storage.

Section 3

ADVANCED

  • Add support for multiple users
  • Use Redux
  • Use Redux-saga
  • Use a testing framework to test your reducers
  • Use an enzyme for acceptance/regression testing

You have free reign over the design, layout, and look & feel of the portal. Be creative!
We recommend using a simple and well-known framework, like Bootstrap, for styling.

You're welcome to use whatever you please, but the Create React App seed is the easiest seed with which to begin your project.

Feedback

Feedback is important. If you find a cool new resource or feel that any part of this incubator or it's resources are out of date, leave us a message in the  Slack channel.