Initialize the project

Let’s create an empty folder, initialize package.json, and fill in some basic information.

$ npm init
Copy the code

Next we start installing dependencies. My package.json dependencies look like this

"DevDependencies" : {" Babel ", "^ 5.5.6", "Babel - core" : "^ 5.5.6", "Babel - loader" : "^ 5.1.4 ensuring", "history" : "^ 1.13.1" and "react", "^ 0.13.3", "the react - hot - loader" : "^ 1.2.7", "the react - the router" : "^ 0.13.3", "webpack" : "^ 1.12.6 webpack - dev -", "server" : "^ 1.12.1"}Copy the code

Run the command:

$ npm install 
Copy the code

After the project is created, we will create some necessary files and directories.

$ mkdir js css && touch index.html webpack.config.js
Copy the code

webpack

Webpack (more) is a module processor that packs all your code into static files for your App.

Open webpack.config.js and add the following code:

var webpack = require('webpack');  
module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]
};
Copy the code

This file has about four configuration items: entry, output, Module, and plugins.

Entry: Specifies the packaged entry file. Each key value pair is an entry file.

Path defines the output folder. Filename defines the name of the package result file. [name] in filename is replaced by the key in the entry.

Resolve: defines the configuration used to resolve the module path. The extensions are commonly used to specify the suffix of the module. In this way, when importing the module, you do not need to write the suffix.

Module: defines the processing logic for modules. Here, loaders can be used to define a series of loaders, as well as some re’s. When the file that needs to be loaded matches test’s re, it is processed. Here we use React-hot and Babel. Babel-loader is used to generate JS files when we develop using ES-6. We ended up generating a style.css just as an example of how to import style files, but we can actually load a loader like sass-loader.

Loader processes files, which is what makes WebPack so powerful. Js files are processed by babel-loader, while.jsx files are processed by jsx-Loader before babel-loader. Of course, these loaders also need to be installed through NPM install.

Plugins: These define plugins that need to be used, such as commonsPlugin, when packaging multiple entry files to extract the common parts and generate common.js.

NoErrorsPlugin: Defines whether the code will be automatically reloaded when an error occurs.

At this point, we add script field to package.json.

"scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  }
Copy the code

This will start a webpack server and you can go to localhost:8080/webpack-dev-server/#/; If you use NPM run build, you can automatically generate files under bulid/.

Next we create a new index.html file

  
  
  
    
    New React App
  
  
    
    
  
  
Copy the code

Now you can go to the browser and import the newly created bundle.js, and in fact you can import any resource you want.

React-router

After completing the basic creation of the project, we will create the entry file for the app.js project. The code is as follows:

import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({  
  render() {
    return (
      
      

       Home Login {/* this is the importTant part */}
      
); }}); let routes = ( ); Router.run(routes, function (Handler) { React.render(, document.body); });Copy the code

The header of the article is the plugin package we will use for React and react-router. We also introduced login.js as our Login React component. Next, we create a class using React. In this case, a simple navigation bar appears in all of the child components. We simply Link to our route :App and Login. Then the React Route will be initialized by the RouteHandler component.

In this App, we define the route and specify the corresponding handler (the React component). We defined our root path as app, and the other addresses will be child components of app. In this example, we added a login page for the user to log into the App.

Finally, the React-Router will load everything we define into document.body. That’s how index.html turns into our React App.

Components

With that in mind, we need to add Components. In our /js directory, we need to start creating Components. We create login.js:

import React from 'react';

let Login = React.createClass({ 

  render() {
    return(
      

       Welcome to login
      
); }}); export default Login;Copy the code

It’s actually a very simple component that says “Welcaome to Login”. At this point we can run our app. NPM start and then visit http://localhost:8080/webpack-dev-server/#

At this point, you’ll see a navigation bar with two links Home and Login. So if YOU click Login at this point it will show you what we just created.

If all goes well, now you can create more content to fill out your App. If you use Flux(highly recommended, address) in your project, you can use any structure in your JS folder. Facebook also has an official Flux chat Demo to learn from.

release

There are actually a lot of ways to launch your service, but the nice thing is that WebPack makes it easy to use the generated files. You can quickly put these resource files on the CDN, then put index.html on the host, and update our script path.

If you have any questions, please email me [[email protected]] and the original author