ReactMail - An Example React.js App for Practical Learning Purposes
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
.gitignore
README.md
json-server.js
package.json
yarn.lock

README.md

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...

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

reactmaillistanimation

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

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

image

image

embracethejsx