My first React sample
Make sure NodeJS is already installed in your machine.
mkdir hello-react
cd hello-react
mkdir app
mkdir publicnpm initnpm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save react
npm install --save react-dom
- Create
index.htmlfile inpublicfolder and add following lines of code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> My first React app</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>- Create
hello.jsxfile inappfolder and add following lines of code
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return <h1>Hello React</h1>
}
}
ReactDOM.render(<Hello/>, document.getElementById('app'));- Create a
main.jsfile inappfolder and add following lines of code
import Hello from './hello.jsx';
- Create a
webpack.config.jsfile in root folder - Add following lines to
webpack.config.jsfile
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "index.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
}
]
},
devServer: {
contentBase: "./public",
colors: true,
historyApiFallback: true,
inline: true
}
}
- Go back to command prompt window and run following command.
webpack-dev-server --progress --colors
- Open browser and go to http://localhost:8080/. The greeting message should be there.
Given the ultimate goal is to build an actual SPA, following steps are put on the road map.
- Put on an elegant UI such as Material-UI.
- Integrate with Redux
- Integrate with back-end ASP.NET Web API
- ...