Ubuntu 从零开始创建 React 应用

2021-03-01  本文已影响0人  jerryyyq

安装

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 入门教程

https://zh-hans.reactjs.org/

跨域

前端

    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)
上一篇下一篇

猜你喜欢

热点阅读