gitbattle

##Goal

The goal of this project is to practice React and Redux by building the gitbattle app from scratch. The gitbattle app is an extension of the React Fundamentals tutorial by Tyler McGinnes.

Gitbattle is a single page app. With this app, a user can enter multiple GitHub usernames, compare the user accounts, then decide which one is the best. The user's winning percentage and ranking are constantly updated.

####Things I learned doing this project

• The component based approach to building UIs

• The whole React component lifecycle

• Redux state management

• Writing an integration or E2E test suite with nightwatch.js

##Prerequisites of this project

Experience with JavaScript and npm.

##Features

• React for component development

• Redux for state management and change notification

• React-Router for routing and navigation

• Axios for making HTTP API requests to get GitHub user statistics

• Babel for transpiling:

Babel transpiles ECMAScript 6 React components to ECMAScript 5 format. Babel is a really helpful transpiler for React projects, since 'browser vendors are slow to adopt new language features'.

• Webpack for bundling:

Webpack takes the original code, transpiles it with babel-loader, then outputs a bundle file ready to represent on a browser.

A first-time Webpack user may experience difficulty going through the official Webpack documentation. The 'Webpack for React' section of the React Fundamental tutorial by Tyler McGinnes provides a concise description and practice to show how Webpack works.

• Developer Tools

React DevTools and Redux DevTools are convenient for time traveling debugging. Both tools can be downloaded from the Chrome Web Store or the Add-ons for Firefox.

##Getting Started

git clone https://github.com/zenosu/gitbattle.git

cd gitbattle

npm install

npm start -This runs a local web server on port 8080 and sets up an instance of gitbattle.

##Code Example

The container is a really useful React pattern. A container can be reused to render its corresponding presentation component, and the presentation component can be stateless.

For instance, The PromptContainer.js file is an example of a container component of the input page, and the prompt.js file is the corresponding presentation component.

render: function() {
  	return (
  		<Prompt 
        onSubmitUser = {this.handleSubmitUser}
        onUpdateUser = {this.handleUpdateUser} 
        header = {this.props.route.header}
        username = {this.state.username} /> 
	  )    
  }

Some good articles about containers and presentational components:

Container Components by Learn React with chantastic

Presentational and Container Components by Dan Abranov

##Testing

We are using NightWatch.js for e2e or integration tests.

Nightwatch works with the Selenium standalone server. Therefore Selenium needs to be installed first.

####installation

$ git clone https://github.com/nightwatchjs/nightwatch.git
$ cd nightwatch
$ npm install

####run test

npm test

####run unit test

npm run unit-tests

##Contributing

Please submit an issue if you experience any problem during the development process.

Please make a pull request if you have any idea for add-on components or refactoring.

We appreciate any kind of contribution from our coders.

Happy codying!