ReactMail

An Example React.js App for Practical Learning Purposes

Let me begin by saying that there are many great resources out there for learning React etc...

• Pete Hunt's react-howto: https://github.com/petehunt/react-howto
• Tyler McGinnis' React.js Program: http://www.reactjsprogram.com/
• React docs: https://facebook.github.io/react/docs/thinking-in-react.html
• Egghead.io Videos: https://egghead.io/technologies/react
• So many more...

My goal with this project, is for it to serve as a practical example that goes beyond a basic TODO list.

Contributions, Feedback, and Code Review are welcome! Please, feel free to reach out with any questions, suggestions for improvements, or ideally Issues and/or Pull Requests :)

The App

# Install dependencies
npm install

# Start development servers (client + API)
npm start

# Run tests
npm test

Some Basic Features/Highlights. Hint: these should become tests :)

• Fetch data from JSON API (read)
• Submit data to the JSON API (write)
• Maintain local state
• View a listing of messages
  • Text search
  • "Sort by"
  • Filter by "flagged"
  • "Load More" (i.e. pagination)
  • Toggle a message's "flagged" status
  • Delete a message
• View a single message
  • Toggle a message's "flagged" status
  • Delete a message
  • Navigate directly to /:id route and have appropriate message requested
  • Redirect back to "messages" when /:id is not found OR is deleted
• Animation via ReactCSSTransitionGroup

React

• Stateless Function Components
• React Class Components
• Reacting to state changes.
  • See MessageBrowserContainer.componentDidUpdate for an example.
• Separating logic/http/state from presenation using "container" and "presentational" components
  • See MessageBrowser.js and MessageBrowserContainer.js for an example.
  • Read: Dan Abromov's Presentational and Container Components
  • Read: Container Components
  • Watch: Egghead.io Video
• Illustrate by example that JSX is merely a light layer of sugar on top of Javascript function calls.
  • See Header.js for equivalent examples both with JSX and without JSX

React Router (2.x)

• Setup basic routes routes.js
• Utilize React component lifecycle to initiate our HTTP requests based on entry route

Setting up a React, ES6+, Webpack, Babel Environment

Just kidding. We'll let create-react-app do all of that for us :) This way we don't get hung up on the myriad of ways we could go about this.

A few commands to know:

• npm install: Install dependencies
• npm start: Start development server (open your browser to http://localhost:3000/ and you should see the app running)
• npm test: Run tests.

Communicating With a JSON API

Using axios, a Promise based HTTP client, we communicate with a JSON API (powered by json-server) to:

• Retrieve a resource listing (GET /)
  • Work with managing our "query parameters" for pagination, filtering, and search
• Retrieve a single resource (GET /:id)
• Update a single resource (PATCH /:id)
• Destroy a single resource (DELETE /:id)

Useful Libraries

• axios HTTP client
• lodash general Javascript utility library
• classsnames to make dynamic HTML classNames more pleasant

Testing

Running tests: npm test

• Test runner: jest
• Assertions (and spies): expect
• Unit testing React components with shallow rendering Enzyme

Unit tests live directly adjacent to the file under test. Example:

src/some/path/someModule.js
src/some/path/someModule.test.js

Some Visual Highlights