react项目创建流程 react.js

react项目创建流程 ls 产看项目内文件 cd + name 进入文件

先创建一给git 仓库 ( 设置模板必须选择 Readme文件勾选 )
git clone ( 克隆项目 )
npx create-react-app ' name ' 创建react项目
git 4步 -- git pull - - git add -all -- git commit -m ' ' -- git push orange master 提交到git上
cd name 进入项目
yarn eject 开启高级模式
替换packge.json 文件里的 script内容
"scripts": {

"build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive--use-polling --polling-interval 1000", "start-js": "node scripts/start.js", "start": "npm-run-all -p watch-css start-js", "build-js": "node scripts/build.js", "build": "npm-run-all build-css build-js", "test": "node scripts/test.js --env=jsdom"

},
安装 sass yarn add node-sass-chokidar 和 yarn add npm-run-all
src 下创建style文件夹并新建index.scss文件
进入index.js 更改css地址改成cass/index.scss
启动项目 yarn start
添加 proxy 代理文件并且必须下载
yarn add http-proxy-middleware

proxy 代理配置 /* 示例 app.use( // ↓ 2级目录根地址 '/api2', createProxyMiddleware({ target: 'http://api.bdplus.cn/', //根目录 thhp到 .cm 或 .com 结束 changeOrigin: true, //是否跨域 }) ); */
加入Router
1. 下载 yarn add react-router-dom
2. 【react项目创建流程】src 下创建router.js 文件
  
  import React from 'react'; import { BrowserRouter, HashRouter, Link, Switch } from 'react-router-dom'; import App from './App.js'; const Router = () => ( // 官方切换组件 ) export default Router
3. 修改 index.js 文件把App.js 改成 Router.js
import React from 'react'; import ReactDOM from 'react-dom'; import './style/index.scss'; import Router from './router.js'; //这里 import reportWebVitals from './reportWebVitals'; ReactDOM.render( //这里 , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
1. 把 App.js 改成一个类组件用来存放路线
import React, { Component, Suspense, lazy, Fragment } from 'react'; import { Route, Router, Switch, withRouter } from 'react-router-dom'; /* Api 简介 Route : 用来配置路由线路Switch : 只显示匹配到的第一个 *//* 引入方法一 import Home from './views/home'；引入方法二 const Home = lazy(()=>import('./View/Home')) */ const Home = lazy(() => import('./View/Home'))class App extends Component { render() { return () } }export default App;
env文件

react项目创建流程

推荐阅读

京东咚咚，京东咚咚如何取消自动登录

游戏服务器在哪租怎么租用游戏服务器

吉他琴品怎么按

国产加湿器哪个牌子好加湿器什么牌子好

Promise的实现与标准

redis应用实例 redis的操作例子

46岁徐若瑄这是咋了？徐若瑄几岁

今日头条相比于其他类似的app,有什么优点？

身体乳过期还能用吗

氙气灯的安定是什么作用氙气灯的安定器起什么作用

健心“八戒”让你获宁静心灵

领带脏了用什么洗领带正确清洗方法

璟字五行属什么璟字五行属啥

上海来福士广场|雷蛇全国首家官方体验店即将开业，位于上海来福士广场

显卡用不上力怎么办，显卡不好使

感情三观是什么分别是什么观点

PS选择与抠像专业技法教程

乡村民宿设计|乡村民宿设计 | 老房子改造的新中式酒店

塑造产后辣妈的减肥法 10种低热量食物推荐

汽车如何通过涉水路段汽车怎么通过涉水路段