- 生成一个项目名称为
my-app
的
yarn create react-app my-app
- 将生成的文件中的没有用的一些文件可以删除
- 在
public
文件夹中,只留下favicon.ico
和index.html
- 在
src
文件夹中App.js
、App.css
、index.js
、index.css
.是可以保留的,其他都可以删除。其中index.js
是打包的入口文件,一定要有。 - 在根目录下新建一个
src
文件夹,用来存放组件
- 将
webpack.config.js
这个配置文件暴露出来,方便以后修改和配置
【注意:在这里git可能会影响暴露,将所有文件都上传,再执行命令】
yarn eject
- 尝试启动项目
【只要能启动成功,证明此时的项目是没有问题的】
yarn start
- 在
src
文件夹下新建一个views
文件夹 ,用来存放组件,一个组件一个文件夹,每个文件夹由一个.jsx
和一个.css/.less/.sass/.scss
组成,一个组件搭配一个样式。
- 在初始化的项目中,默认可以支持加载
. sass
,但是没有.less
的加载驱动,需要在webpack.config.js
中进行配置。相关配置
[转到我另外一个文档]: 在react脚手架项目中配置less - 向要在
app中使用sass.
需要进行一些配置
yarn add node-sass
这样就可以直接在jsx
文件中直接导入 .sass
或 .scss
文件了
- 想要节省路径写法,可以在
webpack.config.js
中进行相关配置ctrl+f
在webpack.config.js
文件中全局搜索alias
在里面进行配置如下代码(如果有需要,可以按照这种写法进行配置)
"@src": path.resolve(__dirname, "../src"),
"@view": path.resolve(__dirname, "../src/view"),
- 在根目录下 新建一个 名字为
.env
的文件,里面用来配置环境变量
REACT_APP_DEVELOPMENT_API = "https://dev.baidu.com"
REACT_APP_PRODUCTION_API = "https://prod.baidu.com"
REACT_APP_DEV_NAME = 开发测试
REACT_APP_PROD_NAME = 管理系统
- 使用方法一:
<title>%REACT_APP_DEV_NAME%</title>
- 使用方法二:(模拟使用方法,可以获取到当前的环境),在
src
文件夹下,新建一个until
的工具类,里面一般存放封装的请求的工具。
export default function ajax() {
// 通过 process.env 获取当前项目中,使用的环境变量。
// NODE_ENV 是安装nodejs时,内置的环境变量。可以得到当前项目的环境是生产环境还是开发环境。
let isProduction = process.env.NODE_ENV;
let api =
isProduction === "production"
? process.env.REACT_APP_PRODUCTION_API
: process.env.REACT_APP_DEVELOPMENT_API;
console.log("---", api);
}
- 封装请求的方法,会在很多地方都能用到,可以直接将他挂载到全局变量上,直接挂载到
index.js
这个入口文件中 。如:
React.Component.prototype.$ajax = ajax;
就可以在其他组件中直接调用这个方法 如:
componentDidMount() {
this.$ajax();
}
8.如果需要用到跨域 需要安装一个中间件 http-proxy-middleware
- 安装
yarn add http-proxy-middleware
- 在
src
目录下创建setupProxy.js
文件,这个文件名是固定的,webpack
打包,会自动寻找这个代理文件。里面放如下的代理请求的代码【代理服务器就是应付一下,这种跨域问题一般有后端进行解决】
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = (app) => {
app.use(
"/lqb",
createProxyMiddleware({
target: "https://www.lanqb.com",
changeOrigin: true,
pathRewrite: {
"^/lqb": "",
},
})
);
};
使用代理的方法,在组件中,发送请求可以直接使用,例如:
componentDidMount() {
ajax();
fetch(
"/lqb/school/special-training-list?status=show&limit=20&page=1&course_style_ids=11&weight=desc"
)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
}
- 类型检查 用来检查传值的类型是否符合要求
- 安装类型检查
yarn add prop-types
- 使用如下方法进行类型检查 如:
static defaultProps = {
num: 100,
};
static propTypes = {
num: PropTypes.number,
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
sex: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
};
- 在
prps
里面进行传值即可
- 组件库 antd(Ant Design) 需要安装才能使用。用于版本问题安装的时候,需要注意版本
yarn add antd@3.26.19
- 隐藏一些警告信息,可以在
webpack.config.js
中将node-modules
过滤掉,主要针对有.js
和.jsx
的地方