Ubuntu 从零开始创建 React 应用
安装
sudo apt install npm
sudo npm install n -g
sudo n stable
sudo npm install npm@latest -g
如果发现 sudo npm -v 和 npm -v 结果不一样, 有可能不能版本存放的目录不同(最新版本的命令软连接在: /usr/local/bin/npm),
运行上面这行命令时可以尝试执行:
sudo npm install npm@latest -g --prefix /usr/bin/
node -v
npm -v
npm 版本必需大于 5.2
npx -v
创建自己的工程
cd /work
npx create-react-app my-react-app
cd my-react-app
npm start
使用 antd
cd my-react-app
npm install antd
npm install --save @ant-design/icons
修改 App.css, 在第一行添加:
@import '~antd/dist/antd.css';
之后就可以在代码中 import antd 的相关组件了,
例如:import { Button } from 'antd';
如果经常使用 create-react-app 来创建项目,也可以将 create-react-app 部署到全局
npm install create-react-app -g
附
npm修改淘宝源
npm 直接改源和 cnpm 是不一样的
npm config set registry https://registry.npm.taobao.org/
source ~/.bashrc //使修改立即生效
检查是否修改成功
npm config get registry
Create React App 中文文档
https://www.html.cn/create-react-app/docs/getting-started/
React 入门教程
跨域
前端
fetchAllTaskList() {
let url_task_list = APP_CONFIG.DOMAIN_URL + "task_list";
fetch(url_task_list, {
method: 'GET',
headers:{
//'Content-Type':'application/json;charset=UTF-8' // cors 不支持
'Content-Type':'text/plain'
},
mode:'cors',
cache:'default'
})
.then(res => {
console.log("res = ", res);
return res.json()
})
.then(data => {
console.log("data = ", data);
if(0 !== data.err) {
this.setState({
err_msg: data.err_msg
})
} else {
this.setState({
task_list: data.task_list
})
}
})
.catch(error => {
console.log("error = ", error);
this.setState({
err_msg: String(error)
})
})
}
后端
from bottle import Bottle, request, template, static_file, response
root = Bottle()
@root.hook('after_request')
def enable_cors():
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Methods'] = 'GET,POST,PUT,DELETE,OPTIONS'
response.headers['Access-Control-Allow-Headers'] = '*'
print("enable_cors(), response = ", response)