React构建、部署及启动

 

构建

npx create-react-app 项目名称创建基本的App。
npx create-react-app my-app --template [template-name]以模版创建App;不输入[template-name]时以预设的基本模版创建。

项目目录

项目名称/  
	README.md  
	.git/  
	node_modules/  
	package.json  
	public/  
		index.html  
		favicon.ico  
	src/  
		App.css  
		App.js  
		App.test.js  
		index.css  
		index.js  
		logo.svg  
```index.html```只能引用```public/```中的文件。  
JS和CSS文件必须放在```src/```,否则webpack无法处理。  

```index.html```引用JS的方式为:  

// index.html

// index.js
ReactDOM.render(

, document.getElementById(‘container’) );


JS引用Stylesheet的方式为:  

// index.css .Button { padding: 20px; }

// index.js import ‘./index.css’


JS引用Image的方式为:

import logo from ‘./logo.png’

<img src={logo} />

// or .Logo { background-image: url(./logo.png); }


#### 还需要什么
###### UI框架
Antd  
Bootstrap

###### 状态管理
Redux-React

###### 前端路由
react-router

###### 网络请求
axios  
fetch API
    
#### 脚本
```npm start```本地运行项目   
```npm test```测试   
```npm run build```打包  
```npm run eject```把所有依赖和配置展开,手动定义

#### VSCode插件
###### 高亮 
Babel JavaScript 

###### 自动排版

npm install –save husky lint-staged prettier

// package.json “husky”: { “hooks”: { “pre-commit”: “lint-staged” } }, “lint-staged”: { “src/*/.{js,jsx,ts,tsx,json,css,scss,md}”: [ “prettier –write” ] }

这样,每次commit的时候所有文件会自动排版

#### 兼容IE9、IE11

// First npm install react-app-polyfill

// Then, This must be the first line in src/index.js import ‘react-app-polyfill/ie9’ import ‘react-app-polyfill/stable’ // or import ‘react-app-polyfill/ie11’ import ‘react-app-polyfill/stable’

// Finally, package.json “browserslist”: { “production”: [ “>0.2%”, “not dead”, “not op_mini all”, “ie >= 9” ], “development”: [ “last 1 chrome version”, “last 1 firefox version”, “last 1 safari version”, “ie >= 9” ] }


#### 环境变量

## 部署
#### React
如果项目不放在服务端的ROOT文件夹下,那么前端部分需要多做一步:  

// 解决“无法正确定位JS和CSS”的问题 // package.json // 如果使用基于HistoryAPI的前端路由 “homepage”: “http://mywebsite.com./relativepath”, // 如果不使用基于HistoryAPI的前端路由 “homepage”: “.”,

// 解决“找不到组件显示空白”的问题 // App.js


#### Apache

#### Tomcat
###### web.xml
此处解决“前端路由的URL匹配错误,返回404”的问题。

// 添加

404 /index.html

###### server.xml
此处定义“监听哪个端口”、“URL路径与项目路径如何匹配”

// 修改

<Connector port="监听端口" ...... /> <Context path="URL路径" docBase="项目在webapps下的路径" ......> ...... ``` 最后,```npm run build```,把```build文件夹```复制到```服务器的webapps文件夹```下。 #### Nginx ## 启动 #### Windows 1. 开放端口号 2. 配置环境变量CATALINA\_HOME\_index和CATALINA\_BASE\_index指向```tomcat根目录``` 3. 把```catalina.bat```、```startup.bat```、```shutdown.bat```中的%CATALINA\_HOME%改为%CATALINA\_HOME\_index%、%CATALINA\_BASE%改为%CATALINA\_BASE_index% 4. 修改```service.bat```:```set SERVICE_NAME=服务名``` 5. 找到tomcat8.exe和tomcat8w.exe,重命名为```SERVICE_NAME.exe```和```SERVICE_NAME + w.exe``` 6. 执行```service.bat install``` 7. 打开```windows的服务```,修改/启动服务 #### Linux nohup java -jar xxx.jar & sh tomcat/bin/startup.sh sh tomcat/bin/shutdown.sh ## 跨域 #### 前端代理解决跨域 #### 后端添加Header解决跨域 #### Cookie和WebStorage #### 重定向 #### Spring Security的特别处理