美文网首页
Ubuntu 从零开始创建 React 应用

Ubuntu 从零开始创建 React 应用

作者: jerryyyq | 来源:发表于2021-03-01 18:00 被阅读0次

    安装

    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)
    

    相关文章

      网友评论

          本文标题:Ubuntu 从零开始创建 React 应用

          本文链接:https://www.haomeiwen.com/subject/stlmfltx.html