react 项目搭建

1:、下载安装Node.js

 

2、安装webpack（含服务器等）  npm install webpack webpack-dev-server babel  -g

注意：-g表示第一条命令是全局安装

 

3、添加package.json文件（目前只知道是放一些项目的描述信息），进入项目目录

命令：npm init

 

4、添加库文件（--save-dev:将依赖信息写入package.json的devdependencies），babel-polyfill可解决部分es6兼容问题

例子：npm install react react-dom --save-dev（多个插件空格分开）

所有库如下：

webpack

react

react-dom

babel-loader

less-loader

css-loader

style-loader

url-loader

file-loader

babel-preset-es2015

babel-preset-react

react-router

redux

react-redux

redux-devtools

redux-thunk

babel-polyfill

第三方UI

material-ui

react-tap-event-plugin

react-swipeable-views

 

5、跟目录新建webpack.config.js配置文件

 

6、打包：node进入你的项目跟目录执行打包命令：webpack --config webpack.config.js

 

备注:webpack.config.js配置如下

var webpack=require('webpack');
module.exports={
	devtool:'#eval-source-map',
	//入口文件，多个的话将按顺序执行
	entry:[
		'babel-polyfill','./App/js/index.jsx'
	],
	output:{
	    path:'App',             //打包后文件的存放路径
	    publicPath:'/App/',     //服务器根路径
	    filename:'bundle.js'    //打包后的文件名
	},
	module:{
	    loaders:[
            {test:/\.css$/,loader:'style-loader!css-loader'},
            {test:/\.less$/,loader:'style-loader!css-loader!less-loader'},
	        {test:/\.js?$/,loader:'babel',exclude: /node_modules/},            
	        {
	            test:/\.jsx?$/,
	            loader:'babel',
	            exclude: /node_modules/,
	            query:{
	                presets:['es2015','react']
	            }
	        }
	    ]
	},
	watch: true, //观察模式，每次修改保存webpack.config.js中引用文件，bundle.js的文件会自动更新
	//指定可以被 require 的文件后缀,比如 Hello.js 这样的文件就可以直接用 require(./Hello) 引用
	resolve:{
	    root:'',
	    extensions:['','.js','.jsx','.json','.less','.css']  定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全
	}
}

 

 

页面重定向

本项目使用tomcat作为服务器，从定向方式如下（如要配置404）：

进入更目录新建WEB-INF目录，再新建web.xml配置文件，配置文件如下

<?xml version="1.0" encoding="ISO-8859-1"?>
<!--
 Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,a
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">

  <display-name>Welcome to Tomcat</display-name>
  <description>
     Welcome to Tomcat
  </description>

  <error-page>
	<error-code>404</error-code>
	<location>/</location>
  </error-page>
  
  <error-page>
    <error-code>500</error-code>
	<location>/</location>
  </error-page>

</web-app>