README.md
[](https://travis-ci.org/ndufreche/the.12.gy)
[](https://codeclimate.com/github/ndufreche/the.12.gy)
[](https://codeclimate.com/github/ndufreche/the.12.gy/coverage)
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
Below you will find some information on how to perform common tasks.<br>
You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)
## Installing
`git clone https://github.com/ndufreche/the.12.gy.git`
`cd the.12.gy`
run command `yarn` or `npm install` to install dependencies
Compile twitter bootstrap css `yarn run bootstrap` or `npm run bootstrap`
## Folder Structure
After creation, your project should look like this:
```
/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
actions/
components/
pages/
constants/
containers/
data/
definitions/
reducers/
App.test.js
index.js
```
## Available Scripts
In the project directory, you can run:
### `npm start` or `yarn start`
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br>
You will also see any lint errors in the console.
### `npm run c9start` or `yarn run c9start`
Runs the app in the development mode on c9.io environment.<br>
### `npm run bootstrap` or `yarn run bootstrap`
Runs the custom bootstrap css compilation
### `npm test` or `yarn test`
Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](#running-tests) for more information.
### `npm run build` or `yarn run build`
Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
See the section about [deployment](#deployment) for more information.
## Debugging in the Editor
**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) editor.**
Visual Studio Code supports live-editing and debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.
You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed.
Then add the block below to your `launch.json` file and put it inside the `.vscode` folder in your app’s root directory.
```json
{
"version": "0.2.0",
"configurations": [{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}]
}
```
Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
## Adding a Stylesheet
This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
### `Button.css`
```css
.Button {
padding: 20px;
}
```
### `Button.js`
```js
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render() {
// You can use them as regular CSS styles
return <div className="Button" />;
}
}
```