React 入门

 

官网：https://react.docschina.org/docs/getting-started.html

入门资料：https://www.taniarascia.com/getting-started-with-react/

教程：https://www.runoob.com/react/react-tutorial.html

入门· Create React App 中文文档

create-react-app入门教程

 

mkdir myreact

cd myreact

npx create-react-app react-tutorial


安装成功后提示：

Success! Created react-tutorial at C:\Users\Administrator\Desktop\front-end\react\react-tutorial
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-tutorial
  npm start

Happy hacking!

 

为了打包项目，部署于nginx，我们需要首先修改-package.json

在package.json里面添加一行
"homepage": ".",

在项目文件夹下，
npm run build
自动建立一个build文件夹
把build拷贝到nginx，访问index.html即可

# 启动 sass
cd my-app
npm install node-sass --save

# 安装完之后，可以直接把原来的CSS文件后缀直接改为 .scss 或者.sass,然后组件中导入的文件不再是 css文件而给我scss文件即可。

# 配置代理

npm install http-proxy-middleware --save

# 直接在package.json文件中添加proxy节点即可：
{
  ...
  "proxy": "http://localhost:4000",
  ...
}

# 安装 react-mapbox-gl mapbox-gl

npm install react-mapbox-gl mapbox-gl --save

react-mapbox-gl 参考