xebia/training-react

Name: training-react

Owner: Xebia BV

Description: null

Created: 2016-04-30 15:46:29.0

Updated: 2017-06-02 08:02:33.0

Pushed: 2017-11-07 08:04:45.0

Homepage: null

Size: 174

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Training React

Setup

Installation

install

Running

n the app in development mode.
start

 start

n tests on file change
run test

 test

ild the app for production  in the "build" folder
run build

 build

About

Each folder contains an example or an exercise. There are no dependencies between the separate folders. Create-react-app is used to provide auto reloading and displaying error messages. It allows us to focus on application code instead of looking at build configuration.

Exercise / examples

Plain ES5 examples

Hello world:

• http://localhost:3000/es5-nojsx-examples/helloworld.html
• http://jsbin.com/vugafa/edit?html,js,output

Timer:

• http://localhost:3000/es5-nojsx-examples/timer.html
• http://jsbin.com/guyubo/edit?html,js,output

Shows that React can be used without any tooling like JS transpilation. The example itself can be opened without using NodeJS or npm. Open either ./public/es5-nojsx-examples/helloworld.html or ./public/es5-nojsx-examples/timer.html in a browser.

helloworld.html show the basics of creating a React component and has a loop. timer.html show a React component which uses state.

ES6 examples with JSX

Hello world:

• http://localhost:3000/?component=Es6JsxExampleHelloWorld

Timer:

• http://localhost:3000/?component=Es6JsxExampleTimer

Same examples as above using ES6 transpilation and JSX. It shows that React components can be written down much more concise and readable in JSX with ES6 compares to in plain ES5.

Testing React views

Exercise to work with snapshot tests and enzyme. Note that a single snapshot is enough for this components, but we want to use Enzyme as well for practice.

1. Implement the tests in ./src/es6-jsx-examples/helloworld/tests/HelloWorldSpec.js
2. ./src/es6-jsx-examples/timer/tests/TimerSpec.js can be used for inspiration
3. enzyme-matchers is available as syntax sugar for tests

JSX Exercise

http://localhost:3000/?component=JsxExercise

Exercise to get familiar with building React components using JSX. The goal is to reproduce the page shown here. The data structure for the contents of the page can be found in ./src/jsx-exercise/data.js. The exercise has the following steps:

1. Identify the components the exercise page consists of
2. Build the components in the folder ./src/jsx-exercise/example-page/
3. Put each component in a separate file
4. Use the data structure in ./src/jsx-exercise/data.js
5. Build the components using the stateless function notation
6. After you build some components manually you can use http://magic.reactjs.net/htmltojsx.htm
7. Add propType constraints

Creating a React form

http://localhost:3000/?component=ReactForm

Exercise to work with stateful components in React. The state of the component is displayed on the page to make debugging easier.

1. Add form elements with name and value attributes to ./src/react-form/react-form/ReactFormPage.js
2. Add a name input and a gender input
3. Consider using a select input or a radio button
4. Add change handlers which call setState to the component. NOTE: make sure that this in the change handler points to the instance of the component.
5. Connect the change handlers to the form element

React giphy search

http://localhost:3000/?component=ReactGiphySearch

Exercise to make an ajax call from React. The view and components are already available. The file to edit is ./src/react-giphy-search/giphy-search/GiphySearchPage.js.

1. Make sure the value of the searchTerm input box is part of the component state
2. Implement an onSubmit handler which calls preventDefault
3. Load the data from the onSubmit handler:
4. Call searchGiphy which is located in ./src/react-giphy-search/giphy-search/giphy-search-service.js to fetch a list of giphy's
5. searchGiphy returns a promise of the response of the backend. Inspect/log the data to determine how to use it.
6. If fetching the data fails the promise will be rejected with an Error instance
7. Use the message field in the state to display possible errors
8. Call setState in the then callback of the promise

Testing reducers

Shows that reducers are easy to test because they are plain JS functions

1. Implement the tests that are not implemented in ./src/testing-reducers/tests/product-reducer-spec.js
2. The action creators can be used in this test as well. This ensures when the action creators are updated the tests won't break. This also means that we are testing the action creators and the reducer in the same unit test. Note the action creator for this test are simple, if they were not simple it is best to test action creators and reducers separately.

Connect redux to react

http://localhost:3000/?component=ConnectReduxToReact

A redux store has been defined which will update its state with a random giphy. The goal is to connect this store to the provided view.

1. Use the redux devtools extension to inspect the updating store
2. Connect redux to the app in ./src/connect-redux-to-react/app/App.js and ./src/connect-redux-to-react/random-image/RandomImagePage.js

Implement the form actions and reducer in redux

http://localhost:3000/?component=SimpleReduxFrom

1. Implement the store in ./src/simple-redux-from/app/store.js
2. Implement the actions in ./src/simple-redux-from/simple-form/simple-form-actions.js NOTE you can use the spec in ./src/simple-redux-form/simple-form/tests/simple-form-reducer-spec.js

Async action creator: Redux giphy search

http://localhost:3000/?component=ReactGiphySearch

Implement an async action creator to search for giphy's.

1. Implement submitSearch in ./src/redux-giphy-search/giphy-search/giphy-search-actions.js
2. It should immediately send a SUBMIT_SEARCH event
3. On a successful result send a GIPHY_RESPONSE event
4. On a failure response send a GIPHY_ERROR event

Testing an async action creator

The goal of this exercise is to lean how to make asynchronous tests. It will also become clear that when a test is async it will be difficult to write.

1. Implement the empty tests in ./src/redux-giphy-search/giphy-search/tests/giphy-search-actions-spec.js
2. Use a done callback of mocha when the test is async
3. Use the provided assertDispatchCall to perform assertions on the n-th call of dispatch
4. assertDispatchCall returns a dispatchMock

Reselect exercise

Reselect enables high performing calculated properties in redux. In this exercise we are going to calculate the total payload size of the giphy's shown in the giphy search exercise.

1. Create a getGiphyList select to get the giphyList out of the state
2. Can use plain JS
3. Create a getTotalGiphyPayloadSize which calculates the total payload size from the giphyList
4. Uses createSelector
5. Use this size: giphy.images.original.mp4_size
6. Consider using map and reduce
7. Consider writing a unit test to develop the selector
8. Integrate getTotalGiphyPayloadSize in mapStateToProps in ./src/redux-giphy-search/giphy-search/GiphySearchPage.js
9. Add the total payload total to the view
10. Add propType validation for the new property