Skip to content

Instantly share code, notes, and snippets.

@morizotter

morizotter/.eslintrc.json

Last active April 20, 2016 20:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save morizotter/72218a3fb5dc7e9795759586590e2023 to your computer and use it in GitHub Desktop.
Save morizotter/72218a3fb5dc7e9795759586590e2023 to your computer and use it in GitHub Desktop.
Download ZIP
ReactとReduxを使ったアプリを試すための環境作る ref: http://qiita.com/morizotter/items/87d4a34d32209cbb98b0
Raw
.eslintrc.json
{
"extends": "airbnb",
"plugins": [
"react"
],
"rules": {
"arrow-body-style": "off"
}
}
Raw
App.js
import React from 'react';
const App = () => (
<div>
hello, world
</div>
);
export default App;
Raw
file0.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></script>
<script src="https://fb.me/react-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
</head>
<body>
<div id='root'></div>
</body>
</html>
Raw
file1.txt
$ npm init
$ npm install lite-server concurrently --save-dev
Raw
file11.txt
$ npm install --save redux
$ npm install --save react-redux
$ npm install --save-dev redux-devtools
Raw
file12.txt
$ npm install --save redux
$ npm install --save react-redux
$ npm install --save-dev redux-devtools
Raw
file2.txt
"scripts": {
"webpack": "webpack -w",
"lite": "lite-server --verbose --open dist",
"start": "concurrently \"npm run webpack\" \"npm run lite\""
},
Raw
file3.txt
$ npm init
$ npm install --save react react-dom
Raw
file4.txt
$ npm install eslint --save-dev
$ npm install eslint-plugin-jsx-a11y --save-dev
$ eslint --init
Raw
file7.txt
$ npm install --save-dev babel-core babel-preset-react babel-preset-es2015
$ npm install --save-dev webpack babel-loader url-loader css-loader style-loader file-loader
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
Raw
Index.js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import stopwatchApp from './reducers/Stopwatch';
import App from './components/App';
let store = createStore(stopwatchApp);
const rootEl = document.getElementById('root');
render(
<Provider store={store}>
<App />
</Provider>,
rootEl
);
Raw
webpack.config.js
module.exports = {
entry: `${__dirname}/src/Index.js`,
output: {
path: `${__dirname}/dist`,
filename: 'bundle.js',
publicPath: '/dist/',
},
module: {
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015'],
},
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
{ test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000' },
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream',
},
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
],
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment