Dimensi TutupBotol: Setting Up React Environment Using NPM, Babel, & Webpack in Windows 7

Saturday, August 13, 2016

Setting Up React Environment Using NPM, Babel, & Webpack in Windows 7

Okaay,,, In this series, we'll gonna play with react in windows 7. The first thing to do is preparing the windows 7 environment.... {I'm assuming that your windows already installed the node.js and I'm using sublime here}
1. Create a new folder for our react code, then open cmd promp there...

2. Type "npm init" and put some info if you want.. :) or you just can use default setting from npm by using "npm init --yes",

npm init is actually a basic configuration for our react environment, so our folder will contain a package.json as shown below :

3. Type "npm i react --save-dev ", this will gonna install/get react library : {i is an alias for "install"}

After finishing this command we will gonna see a node_modules in our directory with bunch of folder inside of it. this node_modules is the main directory for all of our react,babel, webpack package. And also we put --save-dev flag on our command above. That flag is a way to save our package devDependency to package.json.

4. Actually, we can install some packages in just one command like this :
"npm i webpack webpack-dev-server --save-dev". So we are going to install webpack and webpack-dev-server...

5. Okiee,, this is the last command that we need to execute, it's a long one.. :D, this is going to take a while because we are going to install many packages (react-dom, babel, babel-loader, etc)
"npm i react-dom babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev" :

btw... There is a flag called "-g", this flag is going make our package run globally. I actually avoid to use -g, because it might mess up with another project package in my windows 7 directory because of different package version. Soo ummm... all packages that we installed here are running locally just for our work directory. Aaand.... You don't have to worry if you install those packages not in order, just make sure that all packages are installed.. :)

6. Create some new files, webpack.config.js, App.js, main.js, & index.html..

7. Let's work on index.html first, put this code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Setup React in Windows 7 </title>
</head>
<body>
<div id="app"></div> <!-- our react target -->
<script src="bundle.js"></script> <!-- our bundled file -->
</body>
</html>

So our index.html is looked like this :

btw,,, index.html is our main view, so this page will gonna show up when we run our react project. In this file we put a div with id="app", this div will be used by react to put/show something, like text or another html elements. In the line 9, there is a bundle.js. This bundle.js is generated by react, and this is the power of webpack because every javascript, jquery, or ajax, or another scrypt will be available here. So we don't have to put something like <scrypt>bla bla</scrypt> inside of our html file, because everything already handled by webpack {or may be npm, I don't know :v}
8. Let's work on webpack.config.js, put this code :

var path = require ('path');
var webpack = require ('webpack');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'bundle.js'
    },
    devServer: {
        inline:true,
        port:3333
    },
    module: {
        loaders:[
        {
            test:/\.jsx?$/,
            exclude:/node_modules/,
            loader:'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }
         ]
    }

}

There are a lot of things here in webpack,...mmmm...... when we run "npm start", main.js file will be called {as shown in line 5}, then bundle.js will be generated {line 6}. As explained before, bundle.js is called in our index.html. Our localhost will gonna run on port 3333 {line 12}, aaand another config for modules eehehhe... :D

9. Let's move to App.js file, put this code :

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    render()
    {
        return <div>Hellow Hisoka Poipo... ;)</div>
    }
}

export default App

App.js will be called in main.js. As we can see, this App.js will generate our hellow world that will be put to our index.html file. We are using react and react-dom here... :)

10. Let go to main.js, put this code :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))

This main.js is actually connecting our App.js to index.html using element div with id="app" that we created before in index.html.... :)
So when program is running, webpack is calling main.js and generating bundle.js. main.js is conneting App.js and index.html. Aaand. bundle.js is used by index.html,,, so everything is seemed connected... :)

Last thing, let's put "start" command in package.json, so npm knows what "start" is ...

11. Put new scripts in package.json : "start": "webpack-dev-server",

Yuuupsss... DOneeee... Let's run our first reat project by typing "npm start" :

So let's open localhost:3333 as shown in cmd above...

Demo :

Source code is available here :
https://github.com/HyosokaPoipo/learnReactinWindows7

https://bitbucket.org/HyosokaPoipo/learnreactinw7

Go to Part II...