jeanespindola/react-starter

A sample repository to start a new react application

react-starter

A sample repository to start a new react application.

Table of Contents

1. Description
2. How-to-Run
3. Dependencies

Description

This project intends to provide a quick and fast starter for react applications enabling a the environment setup with most common dependencies included.

This project requires a previous installation of Node.JS and NPM in your computer.

How-to Run

The basic setup of this project was created by following these series of articles from codecademy React-Setup.

Follow these instructions to start and run the application, using your preferred Terminal:

1. Run npm install to install all project and development dependencies.
   • NPM performs the installation of all dependencies and development dependencies in the project.
2. Run npm run build to build the application.
   • This npm script will make webpack to perform the transformations.
3. Run npm run start to start a local server
   • This npm script will also watch for any change inside the project and reload automatically.
4. Open a new browser tab and navigate to http://localhost:8080
   • Enjoy!!

Dependencies

This section will explain all dependencies used in this project with external references.

1. Main project Dependencies
   • React:
     • React core dependencies.
     • react, react-dom.
   • Babel:
     • Compiler: used to compile JSX into regular javascript.
     • babel-core, babel-loader, babel-preset-react.
   • Webpack:
     • Module bundler used to generate static assets.
     • Webpack-dev-server is used to start a local server for the application.
     • webpack, webpack-dev-server, html-webpack-plugin.
   • ES6
     • In order to use ES6, another package is necessary and not installed initially in the guide.
     • babel-preset-es2015
2. Other Dependencies
   • AJAX Requests
     • fetch() is the new standard but not supported in all browsers.
     • Fetch Polyfill implements fetch() and make it available for all browsers.
     • Fetch
     • whatwg-fetch
   • Redux
     • JavaScript framework for managing and maintaining application state.
     • For detailed information on how it works and how it differs from regular way, follow this guide.
     • redux, react-redux, redux-thunk.
   • Code Coverage
     • Jest
       • JavaScript unit testing framework.
       • Jest requires the react-test-renderer package to render the component to JSON
       • jest, react-test-renderer.
     • Enzyme
       • JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse React Components' output.
       • enzyme, enzyme-adapter-react-16.
     • For more information on how to plug them, follow this useful guide.
   • React Code with ESLint
     • eslint is used to maintain code consistency and eslint-loader to plug with webpack.
     • To valid all ES6 code, babel-eslint is necessary.
     • To perform code style checking for react, eslint-plugin-react is necessary.
     • eslint, eslint-loader, babel-eslint, eslint-plugin-react.
     • AirBnB Style Guide
       • AirBnB ESLint configuration.
       • eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y
     • For further reference, follow this article.