lanqy/.babelrc

## .babelrc
{
  "presets": ["es2015", "react"]
}

## README.md

      
    Raw
  

              README.md
            
          
    Hello world in React is not hard

Be sure to npm install webpack -g

npm start for one time compilation for production
npm run dev for dev watcher


## app.js
var React = require('react');
var ReactDOM = require('react-dom');

function HelloWorld(props) {
  return <h1>Hello from react</h1>;
}

ReactDOM.render(<HelloWorld />, document.getElementById('app'));

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React hello</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

## package.json
{
  "name": "react-hello",
  "version": "1.0.0",
  "description": "React hello-world",
  "main": "app.js",
  "scripts": {
    "start": "webpack -p",
    "dev": "webpack -d -w"
  },
  "author": "Thaer Abbas",
  "license": "CC, Creative Commons",
  "dependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0"
  }
}

## webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    path: __dirname,
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel?presets[]=es2015&presets[]=react'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js']
  }
};
	var React = require('react');
	var ReactDOM = require('react-dom');

	function HelloWorld(props) {
	return <h1>Hello from react</h1>;
	}

	ReactDOM.render(<HelloWorld />, document.getElementById('app'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React hello</title>
	</head>
	<body>
	<div id="app"></div>
	<script type="text/javascript" src="bundle.js"></script>
	</body>
	</html>
	{
	"name": "react-hello",
	"version": "1.0.0",
	"description": "React hello-world",
	"main": "app.js",
	"scripts": {
	"start": "webpack -p",
	"dev": "webpack -d -w"
	},
	"author": "Thaer Abbas",
	"license": "CC, Creative Commons",
	"dependencies": {
	"react": "^15.0.1",
	"react-dom": "^15.0.1"
	},
	"devDependencies": {
	"babel-core": "^6.7.6",
	"babel-loader": "^6.2.4",
	"babel-preset-es2015": "^6.6.0",
	"babel-preset-react": "^6.5.0"
	}
	}
	module.exports = {
	entry: './app.js',
	output: {
	path: __dirname,
	publicPath: "/assets/",
	filename: "bundle.js"
	},
	module: {
	loaders: [
	{
	test: /\.js?$/,
	exclude: /(node_modules\|bower_components)/,
	loader: 'babel?presets[]=es2015&presets[]=react'
	}
	]
	},
	resolve: {
	extensions: ['', '.js']
	}
	};