fran0x/react-warp

React + Bootstrap + Redux + Axios + Webpack + Babel

React Warp

Travis CI (pending)

Summary

This is a study project about React and related technologies, mainly the following:

• React
• Redux
• Axios

Getting Started

1. Install Node Package Manager version 2
2. Run npm i to install the dependencies
3. Run npm i webpack -g to install webpack globally
4. Run npm run prod to generate the bundled JS code production-ready (or npm run dev) for debugging-ready
5. Open index.html in a web browser

Structure

• package.json: provides list of project dependencies
• webpack.config.js: provides Babel configuration to generate bundled Javascript (./js/bundle.js)
• index.html: web page, includes a <div> identified as root that will be used to inject the Javascript code
• app
  • index.jsx: provides the page layout, includes a navigation bar, a body with 2 tabs (see below), and a footer
  • github.jsx: includes the configuration and the component to render the github information
  • debug.jsx: includes the log panel
  • components.jsx: provides a template to generate custom tables based on configuration and real or fake data
  • logger.jsx: provides the functions required to wire logs generated by tables with the log panel
  • data.jsx: provides fake data to test the application without connecting to data endpoints

Data

At the moment data is retrieving by means of GET requests to the following data endpoints:

Entity	Data Endpoints
Github	https://api.github.com/users/flopezlasanta/repos

The response received will be in JSON format.

How To

• To change the links in the navigation bar or the text in the footer edit ./app/index.jsx file
• To change data endpoints, table contents, table format for an entity edit ./app/github.jsx
• To change fake data edit ./app/data.jsx
• To use fake data use this.fakeData(); in function componentDidMount() from ./app/components.jsx
• To use real data use this.fetchData(); in function componentDidMount() from ./app/components.jsx
• To develop with hot-reloading run npm run start and then open http://localhost:9001/
  • After that changes made in any .jsx file will be automatically reloaded in the browser

Technology

Core Technologies

• React: JS library for building view layer based on components and in a declarative manner
  • JSX: JS extension that allows HTML tag syntax to render components
  • ES6: is the major update for ECMAScript standard since ES5 (2009): arrows, classes, generators…
  • A quick comparison: Angular 2 puts JS into HTML while React puts HTML into JS
• React Bootstrap: JS library that provides reusable React components similar to Bootstrap
• React Bootstrap Table: JS library that provides a React component for an advanced Bootstrap table
• Redux: JS library for state containment: single source of truth, read-only state, change with reducers
• Axios: JS library for promise (asynchronous) based HTTP clients
• Extras:
  • Moment: JS library to parse, validate, manipulate and display dates
  • Immutable: JS library for immutable collections (Maps, Lists…)

Development Environment

• NPM: Node Package Manager is the package manager for JS
• Webpack: module bundler which takes modules with dependencies and generates a single bundle
  • React Hot Loader Plugin: plugin for Webpack and Babel that enables hot reloading
• Babel: provides a transpiler for writing next generation JS
  • Development with React based on JSX and ES6 is more productive
  • However JSX syntax and ES6 are not supported by all browsers
  • Babel uses loaders to translate the source code before bundling

TODO

• Add ESLint to Babel
• Add auto-reloading (every minute or so) with setInterval; should be possible to disable
• Explore usage or React Scripts and React Router
• Fix script for webpack -p in package.json
• Store data collected from endpoints into redux so that we can create tabs joining data from different sources
• Explore usage of actions / reducers for axios requests
• Upgrade to use npm 3 instead of npm 2
• Fix warning (iterator) reported by Chrome Developer Tool
• Explore migrating to Semantic UI (vs Bootstrap), creating a branch for that
• Work on existing and additional contents / tabs! LinkedIn, Twitter, to start with...
• Configure Travis CI and other integrations