This tutorial will cover how to get started developing a client side application using these technologies:
You can either follow the tutorial below or just jump to the resulting code with:
- Cloning this repo
git clone git@github.com:jansoren/react-webpack-tutorial.git - Run
npm installfrom the myapp-folder - Run command
webpack - Open
/myapp/dist/index.html
If you find the tutorial helpful, and maybe learned something new, please give it a star here. If you have improvement suggestions please create an issue or a pull request. Enjoy :-)
- Use your preferred IDE or you can install Atom
- Great Atom packages to install:
- Install NodeJS
- Install Webpack -
npm install -g webpack
- Enter your project main folder. For this tutorial I will use myapp as folder and you will find the resulting code there
- Run
npm initto create the projectpackage.jsonfile - Press on the npm init questions to get the default value
- Install Webpack with
npm install --save-dev webpack. When npm uses--save-devit automatically adds the webpack package to thepackage.json
You have now created an initial package.json file that we later on will fill with the necessary packages for installing the application with npm install.
- Open myapp-folder in your preferred IDE or Atom
- Create your application Webpack config file webpack.config.js in main project folder with this initial content:
var config = {
context: __dirname + "/app",
entry: "./main.js",
output: {
filename: "bundle.js",
path: __dirname + "/dist",
},
};
module.exports = config;- Create folder myapp/app to contain all your application files.
- Create your application main file main.js with this initial content:
var React = require('react');
var ReactDOM = require('react-dom');
var Content = React.createClass({
render: function() {
return (
<div>
<b>Congratulations</b>, you are now ready to implement your client side application! Enjoy :-)
</div>
);
}
});
ReactDOM.render(<Content />, document.getElementById('content'));- Install React DOM and add it to your package.json file automatically using
npm install --save react react-dom - Install Babel to transform the content of a .js file from ES6 to ES5
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react - In your
webpack.config.jsadd the babel-loader that you just installed like this:
var config = {
...
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'env']
}
}
],
}
};- Create folder myapp/dist and create
index.htmlfile with content:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React Webpack Tutorial!</title>
</head>
<body>
<div id="content"></div>
<script src="bundle.js"></script>
</body>
</html>- Run command
webpackin your main folder that will result in something like this:
Hash: 35d746ba5bf01c587890
Version: webpack 3.10.0
Time: 829ms
Asset Size Chunks Chunk Names
bundle.js 728 kB 0 [emitted] [big] main
[81] ./main.js 572 bytes {0} [built]
+ 183 hidden modules
-
Open
/dist/index.htmlto see your client side application -
If you want some pointers on developing your client side application you should check these sites out: