React项目搭建及环境配置
React 脚手架 create-react-app
为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app
。
如果你需要 React Native 的脚手架项目,可以查看这里:create-react-native-app
create-react-native-app 特性
- 无需配置;
- 集成了对 React, JSX, ES6 和 Flow 的支持;
- 集成了开发服务器;
- 配置好了浏览器热加载的功能;
- 在 JavaScript 中可以直接 import CSS 和图片;
- 自动处理 CSS 的兼容问题,无需添加 -webkit 前缀;
- 集成好了编译命令,编译后直接发布成产品,并且还包含了 sourcemaps。
create-react-app 自动创建的项目是基于 Webpack + ES6
create-react-app 安装
sudo npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
编译less
creata-react-app
脚手架构建react项目,默认配置不支持sass
和less
预编译, 解决方法:
- 执行
npm run eject //暴露出配置文件
npm install less-loader less --save-dev //.安装less-loader 和less
npm install
npm run eject
结构命令。暴露出webpck的配置命令,原本在脚手架中,配置项是不可见的,需要修改才执行这个命令(这是一个单项命令,一旦结构,不可逆。)
npm run eject
运行后npm start
启动报错,解决办法
npm install //再npm start
- 修改webpack 配置
修改webpack.config.dev.js
和webpack.config-prod.js
配置文件
test: /\.css$/ 改为 /\.(css|less)$/
再在 test 的下面找到use,添加 loader
{ loader: require.resolve('less-loader') } // compiles Less to CSS
ok 重新运行项目 less已经编译了
项目结构
- src目录
src目录用来存放我们自己的代码,可以在src下面创建子目录,只有src根目录下的文件会被webpack编译,所以必须把文件放在src根目录下,否则不会识别。 - public目录
只有public目录下的文件才会被public/index.html引用
public
和src
下的 index.html 文件必须存在不能改名
常用命令
启动
npm start
编译打包
npm run build //放在build目录中,并且优化,压缩,使用hash重命名文件
文件修改后测试
npm test
https运行
set HTTPS=true&&npm start
线上编译
这个是create-react-app的一个大亮点,它能让你的应用骗译出在线上生产环境运行的代码,编译出来的文件很小,且文件名还带hash值,方便我们做cache,而且它还提供一个服务器,让我们在本地也能看到线上生产环境类似的效果,真的超级方便。
npm run build
api 开发
只需要在package.json文件中,加一个配置项就可以
"proxy": "http://localhost:3001/",
ajax 替代用fetch
npm install whatwg-fetch
import 'whatwg-fetch'fetch('/power-mnjy-mobile/intf/h5/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true') .then(res => res.json()) .then((data) => { this.setState({ value:data }); });
调试工具
react developer tools
在chrome中添加扩展程序react developer tools,记得重启浏览器,在chrome的开发工具里面会出现react选项。
React项目搭建及环境配置相关推荐
- React初级篇————基础项目搭建以及环境配置
今日起,开始学习web前端的三大框架之最看好的主流框架React.React用于搭建响应式的前端页面,一切皆为js的思想,具有最高的自由度.这里不作太多介绍,首先先来搭建配置相应的环境. 安装的方式方 ...
- vue项目搭建以及环境配置
一.环境要求:node 1. 下载链接:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功(node-v) 3.配置镜像 : npm i ...
- 配置React项目的运行环境
两种配置react项目运行环境的方法 第一种方法,一步步配置项目的运行环境: 1)下载node,在官方网站可以下载,安装步骤不难,差不多一步步意 点next就行: 2)运行cmd 输入node -v ...
- React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
- react项目搭建,步骤最全,附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)
企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...
- React项目搭建与Echars工具使用
React项目搭建与Echars工具使用 一.React项目快速搭建 1.新建文件夹 2.直接在对应目录输入 cmd ,打开终端 3.执行指令完成React应用建立 二.React项目结构和分析 1. ...
- react项目搭建(基础学习笔记)
react项目搭建(基础学习) 安装 局部安装 1.npm init -y或yarn init -y初始化项目 2.全局安装creact-react-app.使用npm install -D crea ...
- mac mysql 链接_mac上搭建mysql环境配置和Navicat连接mysql
mac上搭建mysql环境配置 注意:mysql版本要和你的MAC版本保持一致 2.一路傻瓜式点击下一步 此处选择"Use Legacy Password Encryption", ...
- github上的优秀项目和开发环境配置【转http://www.cnblogs.com/2018/archive/2012/11/09/2763119.html】...
github上的优秀项目和开发环境配置 国外的几个公司开放的资源 https://github.com/google https://github.com/facebook https://git ...
最新文章
- 算法精解:DAG有向无环图
- 使用com.sun.imageio.plugins.png.PNGMetadata读取图片的元数据
- DataRow复制一行到另一个DataTable
- 面试 | 蚂蚁金服面试经历
- 看网络电子围栏如何做好周界安防
- js关于表单校验完善
- 搜索用计算机弹奏9277的数字,计算机基础知识参考试题(含答案)
- E: Sub-process /usr/bin/dpkg returned an error code (1)解决办法
- ftp 上传档案到主机 OMVS
- 【java学习之路】(java框架)008.JdbcTemplate
- elementui带输入建议查询_知道Profiler是什么吗?带你了解SQL Server的性能优化工具...
- 定时器/计数器0(定时器)
- oracle 恢复dmp数据,Oracle数据库使用DMP文件恢复数据
- viper12a电源电路图_viper12_viper12a工作原理详解_简单viper12a电路图
- 按键精灵随机输入数字脚本,防重复脚本
- 无法安装visual studio code,snap vscode has install-snap change in process
- 3dsmax动画十、父子关系。
- python整合excel表_Python实现合并excel表格的方法分析
- java 水晶按钮_水晶按钮制作 jsp function调用java方法
- html新浪短域名api,新浪短网址官方api接口