1.ReactJs 需要依赖nodejs环境,如果没有安装nodejs的话,需要安装。下载地址:https://nodejs.org/en/download/

  下载下来之后,安装windows版本的msi,点击下一步就可以了。之后进行相应的环境配置就ok。

  2.安装全局包

    我们需要安装两个包,这两个包是babel插件。

    在windows运行:

      npm install -g babel

      npm install -g babel-cli

  3.创建一个应用根目录

      d:>mkdir reactApp

      d:>cd reactApp

      d:\reactApp> npm init

  4.添加相应的依赖webpack(--save命令将添加一个包去package.json文件中)

    d:\reactApp>npm install webpack --save

    d:\reactApp>npm install webpack-dev-server --save

  5.安装react

    d:\reactApp>npm install react --save

    d:\reactApp>npm install react-dom --save

  6.安装babel其他插件

    d:\reactApp>npm install babel-core

    d:\reactApp>npm install babel-loader

    d:\reactApp>npm install babel-preset-react

    d:\reactApp>npm install babel-perset-es2015

  7.创建相应的文件(index.html,App.jsx,main.js,webpack.config.js)

    d:\reactApp>cd.>index.html

    d:\reactApp>cd.>App.jsx

    d:\reactApp>cd.>main.js

    d:\reactApp>cd.>webpack.consig.js

  8.配置编译,服务和加载

    编辑webpack.config.js文件,可以用webstrom进行编辑。

    内容如下:

      

var config = {
   entry: './main.js',
	
   output: {
      path:'/',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 8080
   },
	
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
				
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;
进行相应的配置。

posted on 2017-09-25 13:28  TonyLoveTT  阅读(208)  评论(0编辑  收藏  举报