Skip to main content

Building a React App from Scratch

This is a WIP: Updated Recommendations Coming Soon!

Tools​

View Layer: React

Application State Management: Redux + React-Redux (Tutorial)

Javascript: ES6 with Babel compiler

Web Framework: Express

Linter: ESLint

React Source Code: Examples

Module Bundler: Webpack

ESLint Loader

Babel Loader

Style Guides:

The ReactJS Controller View Pattern

Tutorials​

React.js Tutorial Pt 1: A Comprehensive Guide to Building Apps with React.js Tyler McGinnis Sitepoint The Superhero battler app Teropa React Tutorial Using the MERN Stack Full Stack Redux Tutorial React & Flux

Resources for above tutorials:

Key Javascript Concepts

Scope & Context

ES6 Fat Arrow Functions

ES6 Spread Operators

ES6 Object Literal Shorthand

Other good articles

Redux Shill MVC context

Testing​

Breanne’s recommendation, after research Either Jasmine on its own, or Karma. Here’s why:

Jasmine alone​

  • Jasmine is an incredibly common standard, and we’d gain a lot by learning to use it
  • Flexible; works directly with a number of JS libraries and with others with a little adaptation work
  • Lovely, clear, and abundant documentation
  • Getting help, either online or within Truss, would probably be fairly straightforward

Karma, integrating Jasmine and possibly other test frameworks​

  • Allows us to learn to use three different testing frameworks (Jasmine, Mocha, and QUnit), with the option of writing an adapter for any other framework we’d like
  • Tests on multiple browsers and devices
  • Lets you use React import syntax
  • Integrates with a number of different CIs, if we were so inclined
  • We could add Enzyme, for easier use of React components, and a nice complement to Jasmine

Notes on each option​

A little on React’s test utilities

  • They still require a testing framework to use, but they can provide the data needed to perform the tests.
  • Lets you simulate clicks, enter and submit text in an input field, find components that have particular class names, tags, types,
  • Shallow rendering lets you render components one level deep without worrying about child components.

Jasmine​

Jasmine Testing

  • Seems to be the most widely used, certainly a standard in front-end testing
  • Readable, easy-to-interpret function names
  • Does not have instructions or helper code specifically for React/Redux, but does for many other JS libraries. The other instructions may be enough, but we might end up doing more tailoring to work with it than we would with, say, Karma.
    • However...
    • And this repo lets you use Jasmine with the more typical React syntax for creating components -Seems to be a pretty standard tool, so we might benefit from using it in learning a more transferrable skill

Handy, and also sounds like someone explaining a heist in a Guy Ritchie movie: React Using Jasmine and Webpack

Karma​

Karma Testing

  • Test runner (uses multiple external testing frameworks)
  • Describe your tests with Jasmine, Mocha, QUnit, or write a simple adapter for any framework
  • Uses the same modules (<TodoList />, etc.) involved in rendering to run the tests, no translation or alteration needed
  • Run from the command line
  • Test your code on real browsers and real devices such as phones, tablets or on a headless PhantomJS instance.
  • Most tests render, find a specific node, and test the contents
  • Emulates multiple browsers
  • Integrates with a number of CIs and other JS frameworks

Enzyme​

Documentation

  • Use with Jasmine
  • Made for React
  • Works with Karma and other test runners
  • Shallow and full DOM rendering
  • Uses the same modules (<TodoList />, etc.) involved in rendering to run the tests, no translation or alteration needed
  • Could be a good addition to Jasmine if we elect to use Karma

Jest​

  • Facebook’s own testing suite
  • Facebook would like you to use it
  • Other people are not so into it
  • Doesn’t support running in multiple browsers
  • Good reasons why not here:

Mocha​

  • Test framework running on Node.js and in the browser
  • Asynchronous testing
  • Access through the terminal
  • Speed tests available for some tests before() and after() hooks reminiscent of setup and teardown in Xcode
  • Nyan reporter (yep)

Chutzpah​

Documentation

  • Test runner which enables you to run unit tests using QUnit, Jasmine, Mocha, CoffeeScript and TypeScript
  • Access through the terminal
  • Basically, yeah, another test runner.