React的搭建以及项目的基本依赖

  • 公司有了新项目,而这次的技术选型是react,我一直想接触react,自己也研究过文档,但苦于没有实际的项目经验,对react的认识也就非常匮乏。而这次有了项目的接入,使得我对react有了进一步的认识。由于以前都是伸手党,经常百度别人的东西,所以这次我想我要把react所遇到的问题和基本操作纪录下来,以方便自己回忆以及帮助他人。

1. 项目的搭建

    npm i -g create-react-app    // 将react的全局命令,相当于vue-cli也基于一个全局命令
    create-react-app project     // 创建一个项目(项目名称为project)
    npm run eject     // 执行放出配置文件,执行后项目目录下多了config和scrips目录
    npm i      // 安装package.json的一览
    npm run start     // 启动项目,浏览器会自动打开

2. 引入react路由

	npm i react-router-dom    //主要引入react-router-dom
	// 官方文档在网上已经找不到了,后面我会写一篇关于路由的详细使用方法,然后再这里贴上地址

3. webpack配置项目路径别名

	alias: {
	    'react-native': 'react-native-web',
	    // 对需要的路径进行设置
	    "@src":path.resolve("src"),
	    "@components":path.resolve("src/components"),
	    "@pages":path.resolve("src/pages"),
	}

4. 引入redux

	//引入redux相关依赖
	npm install --save redux react-redux redux-thunk
	npm install --save-dev redux-logger
	// redux具体怎么使用在这里就不写了,后面会有文章详细介绍如何优雅的使用redux

5. 引入axios(数据请求)

	npm i axios --save
	// axios具体的使用方法可以百度,后面我会写一篇具体面向项目二次封装axios

6. 使用less

具体less配置:点击跳转

7. 解决移动端适配问题

rem解决移动端适配问题:点击跳转

猜你喜欢

转载自blog.csdn.net/qq_25520603/article/details/90204836