LAB

React Testing and Deployment

Author: Billy Bunn

Links and Resources

• PR
• travis

Deployments

• AWS S3 Bucket
• AWS Cloud Formation
• Netlify

Documentation

• React Styleguidist

Modules

index.js

Entry point for the React application. Requires React and React DOM as dependencies, so it can render content to the page. Contains the Main React class component, i.e., class Main extends the React.Component class and uses its render() function to return <App />.

Everything rendered through index.js is rended to the DOM in the #root div in index.html.

app.js

Counter React class component.

• Counter has a constructor function that takes props—the React component properties—as a parameter. The constructor also contains the state of the Counter component, a property that tracks the current number on the counter displayed in the DOM.

The Counter class component has three methods:

• handleDown - takes an event object as a parameter and changes the state of Counter to a number one less than the current state (using this.setState).
• handleUp - identical to decrement, but instead increases the current state by one.
• render - defines the markup rendered to the DOM: two <a> tags (for decrementing and incrementing) and a <h4> containing the current count. This is an inherited method from React.Component

App React class component

• App uses its inherited render() method to return the three main components as markup: Header, Counter, and Footer.

header.js

React class component containing markup for the header.

footer.js

React class component containing markup for the footer.

app.scss

Sass CSS styling for the entire application.

Tests

• npm run test

UML