学院校园网网站建设情况,网站模板如何删除,山东网站建设软件,软件开发找谁一、React概述
1、什么是react
react的官网:React
用于构建用户界面的 JavaScript 库#xff0c;它也是一个渐进式的用于构建用户界面的javascript框架
2、主要特征 声明式#xff1a;使用原生JS编写的页面存在着开发效率低下、性能较差的情况#xff0c;使用react大家就…一、React概述
1、什么是react
react的官网:React
用于构建用户界面的 JavaScript 库它也是一个渐进式的用于构建用户界面的javascript框架
2、主要特征 声明式使用原生JS编写的页面存在着开发效率低下、性能较差的情况使用react大家就向编写HTML的一样编写页面 组件化使用组件的思想编写程序是现代企业开发的一种思路、让组件达到复用效果、大大提高开发效率让项目具有可维护性和扩展性。 一次学习跨平台编写 使用react不仅能够编写WEB应用 react还可以编写移动应用react-native react完成VR虚拟现实(react 360)
3、React框架的发展史
React主要是在为了构架Instagram,2013年5月的时候把React框架开源了React整个生态可以做到编写一套代码可以运行到多端除了可以开发web应用之外也可以开发移动端应用等。
二、使用CRA构建React工程化项目
1、使用CRA创建React项目
使用create-react-app脚手架来完成react项目的创建这里使用npx命令来进行创建
npx create-react-app 项目名称
2、目录结构
|-node-modules:第三方依赖包
|-public:资源文件|-index.html:页面出口文件
|-src:源文件|-index.js:项目入口文件
|-package.json:项目描述文件
创建完成之后我们来看package.json中相关配置
2.1、包依赖 react:react框架的核心包 react-dom:react视图渲染的核心包通过React构建的WEB应用 react-scripts:包含运行和打包react应用程序的所有脚本及配置 使用create-react-app 创建的项目默认是无法修改其内部的webpack配置的不像vue-cli那样可以通过一个配置文件修改,这是为了让项目目录看起来干净简洁把项目的打包规则以及相关的插件/loader等都隐藏到了node_modules目录下react-scripts是脚手架中对打包命令的一种封装基于它打包会调用node_modules中的webpack等进行处理。 2.2、scripts start:react-scripts start:开发环境在本地启动web服务 build: react-scripts build打包命令打包的内容输出到dist目录下 test: react-scripts test单元测试命令 eject: react-scripts eject暴漏webpack配置规则
2.3、browserslist
浏览器兼容性规则
browserslist: {production: [0.2%, 全球超过0.2%的人使用的浏览器not dead, 还存活着的not op_mini all 不考虑op_mini浏览器的全部版本的兼容性],development: [last 1 chrome version,表示兼容到谷歌的上一个版本last 1 firefox version,表示兼容到火狐的上一个版本last 1 safari version 表示兼容到safari的上一个版本]}
Browserslist可以在这个网站比较方便查看目标浏览器范围百分比
三、yarn包管理器
1、简介
Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 yarn 包管理器和 npm 的作用一模一样。都是用来管理项目中 node_modules 目录中的所有依赖包 Yarn 是为了弥补 npm 的一些缺陷而出现的
yarn的官方 Yarn 中文文档
2、安装yarn
在终端上执行如下命令进行全局安装yarn
npm i -g yarn
安装完成之后可以执行如下命令查看yarn的版本
yarn --version
3、yarn命令使用
3.1、初始化项目
yarn init
3.2、安装依赖包
yarn add [package] //下载最新版本
yarn add [package][version] //下载具体的版本
yarn add [package] --dev //下载的是运行时的依赖
yarn global add [package] //全局下载
3.3、移除依赖包
yarn remove [package]
3.4、安装项目的全部依赖
yarn
或者
yarn install
3.5、配置镜像
设置yarn的淘宝镜像
yarn config set registry https://registry.npm.taobao.org
查看镜像源
yarn config get registry
配置node-sass镜像
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
3.6、查看全局安装的位置
yarn global dir
四、使用craco插件进行webpack的配置
如果要修改create-react-app脚手架的默认配置有如下方案 通过执行yarn eject命令释放react-scripts中的所有配置到项目中但这是一个不可逆的操作同时也会失去CRA带来的便利和后续升级 通过第三方库来修改比如craco/craco
1、craco插件的安装 安装修改CRA的配置的包
yarn add -D craco/craco 修改packge.json中的脚本命令 scripts: {start: craco start,build: craco build,test: craco test,eject: react-scripts eject} 在项目的根目录中创建craco的配置文件(craco.config.js),用于修改默认配置
module.exports{}
2、修改项目的端口
在craco.config.js中配置如下
process.env.PORT3002
3、配置别名 在项目的根目录中创建craco的配置文件(craco.config.js)并在配置中配置别名
const pathrequire(path)
module.exports{webpack:{alias:{:path.resolve(__dirname,src)}}
} 在代码中就可以通过来表示src目录的绝对路径 重启项目让配置生效
3、别名路径提示
在项目的根目录下创建jsconfig.json配置文件并在项目中添加如下提示
{compilerOptions: {baseUrl: ./,paths: {/*:[src/*]}}
}
五、项目初始化
1、安装scss
2、安装px-to-vw插件 在vscode的扩展中搜索px-to-vw安装 在vscode----设置----输入px-to-vw----在里面输入设计稿宽度即可通过插件进行单位自动转化 按住键盘alt z快捷键可以看到px单位被自动转换为vw单位了
3、重置样式 在Normalize.css: Make browsers render all elements more consistently.官网上下载normalize.css 在assets中定义normalize.css将下载好的normalize.css内容复制进来 然后在App.scss页面中引入
import url(./assets/reset.css);
