Programming ReactJS

Code samples

Testing

• Combining functional and snapshot testing: Component - Tests

• Snapshot test with mocks, sample data and negative tests: Component - Tests

• Reducers tests:

  • Reducer for Dictionary-Shape - Tests
  • Reducer for Array - Tests

Redux

• Condensed example: redux_sample_in_one_file.js

• Functional Components and Containers examples:

  • Basic: Functional Component - Container - How to use it

  • Own Props: Functional Component - Container - How to use it

  • HOC extending functional component: Functional Component - HOC - Container - How to use it

• Thunk:

  • API calling with UI on-loading and receiving states:
    • Simple API call - Actions - Reducers - Create store - Container.
    • See also HOC extending functional component: Functional Component - HOC - Container - How to use it

• Redux-Forms:

  • Form - Editing - Reducer

• Selectors:

  • Library reselect

  • Using Selectors from state and props and Containers.

  • Using Router and state selectors with Containers.

• Advanced example:

  • Configuring a Store with Redux Dev Tools and auto-saving to local storage and using it.

  • Root component and child components with access to Router and Selectors.

  • Bind history to the router, Create manual history and use it to redirect

  • Reducer composition and Actions. State using Dictionary Shape and Selectors to convert it into Values Array.

  • React Portals This is an example for modals. Use of the modal. Add the div in index.html

FAQ

• React Router changes url params but doesn't re-mount component: Solution