React 使用方式
一.cdn 链接的方式
通过cdn链接的方式,不涉及项目构建的使用
1.挂载点
<!--1.挂载点-->
<div id="app"></div>
2.引入所需要的包
reactreact核心内容react-dom用来渲染真实dom的一个库- babel 用来编译不被浏览器支持的代码编译工具
<!--
2.引入所需要的包
react react核心内容
react-dom 用来渲染真实dom的一个库
-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- babel-standalone 直接用在浏览器上的。 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
3.写React代码
-
ReactDom.render()
render非常重要的一个方法,一个react项目,只调用一次
2个参数
1.渲染在页面上的内容(react元素或html或虚拟dom)
2.要渲染在页面的位置(挂载点)
<!-- 需要指定type="text/babel" 才能被babel解析 -->
<script type="text/babel">
/**
* ReactDom.render(); render非常重要的一个方法,一个react项目,只调用一次
* 2个参数
* 1.渲染在页面上的内容(react元素或html或虚拟dom)
* 2.要渲染在页面的位置(挂载点)
*/
ReactDOM.render(
<h1>使用CDN方式使用React</h1>, //jsx语法
document.getElementById('app')
);
</script>
需要注意的是:script的type属性需要指定为text/babel.才能保证咱们的代码被babel解析
4.扩展CDN
CDN是指构建在网络之上的内容分发网络,依靠部署在各地边缘服务器,通过中心平台的负载均衡,内容分发,调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率
二.基于webpack搭建配置环境
1.前期的必要配置
1.安装相关插件
1.初始化
npm init -y //初始化
2.安装webpack以及支持热更新
npm install --save-dev webpack webpack-cli webpack-dev-server //webpack相关以及热更新
- webpack-dev-server 支持热更新
3.安装react相关
npm install --save react react-dom //react核心插件和react-dom渲染dom
-
react react核心插件
-
react-dom 渲染真实dom
4.安装babel相关
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
- @babel/core 调用Babe的API进行转码的包
- babel-loader 执行转义的核心包
- @babel/preset-env 新的预设,可以根据配置的目标运行环境自动启用需要的Babel插件
- @babel/preset-react 用于转义React的JSX语法
5.安装打包相关插件
npm install --save-dev html-webpack-plugin clean-webpack-plugin
-
html-webpack-plugin 用于简化创建的HTML文件,它会在body中用script标签来包含我们生成的所有bundleswen文件
-
clean-webpack-plugin 用于在生成环境中编译文件时,会先删除build或dist目录文件,然后生成新的文件
原因是:随着文件的增加,删除,打包的dist文件内可能会产生一些不再不要的静态资源,我们并不希望将这些静态资源部署到服务器上占用空间,所以每次打包前,清理dist目录
6.安装相应的loader
-
处理后缀为.css文件的loader
npm install --save-dev style-loader css-loader -
处理后缀为.less的loader
npm install --save-dev less-loader -
处理后缀为.scss的loader
cnpm install --save-dev node-sass sass-loader -
处理css兼容的loader
npm install --save-dev postcss-loader postcss -
处理文件copy到目标文件夹的loader
npm install --save-dev url-loader file-loader
url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于 file-loader而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数
PS:css文件方面根据实际项目使用情况,使用相应的loader,处理css兼容的时候,需要在根目录下新建一个postcss.config.js
module.exports = {
plugins: [
// require('autoprefixer')('last 100 versions' )
require('autoprefixer')(
{ overrideBrowserslist:
[
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie> 8',
'iOS >= 8',
'Android >= 4.4'
]
}
)
]
}
7.创建webpack.config.js
8.创建babel配置文件(babelrc)
根目录下创建一个.babelrc的文件,然后配置相应的内容来告诉babel-loader使用ES6和JSX插件
{
//配置相应内容来告诉babel-loader使用ES6和JSX插件
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
9.src文件夹放源代码
一般我们所有的源代码都是放在src文件夹
创建main.js,作为入口文件
10.public文件夹 放静态资源文件
创建index.html 里面加个<div id='app'></div>作为模版
注意:上面步骤命令代码中的–save-dev和–save所代表的意思是什么
- npm install --save-dev packageName 是要写入package.json的devDependencies中的,用于开发环境
- npm install --save packageName 是要写入pageckage.json的dependcies中的,用于生产环境
--save-dev可以简写 -D --save可以简写 -S
2.配置webpack.config.js
//引入path模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//入口绝对路径
const APP_DIR = path.resolve(__dirname, 'src');
//出口绝对路径
const BUILD_DIR = path.resolve(__dirname, 'dist');
const config = {
//入口
entry: APP_DIR + '/main.js',
//出口
output: {
path: BUILD_DIR,
//出口文件名
filename: 'bundle.js'
},
//模式 生产环境或开发环境
mode: 'development', // production||development
module: {
//配置loader
rules: [
{
//编译后缀为js和jsx格式文件
test: /\.(js|jsx)$/,
use: {
//使用babel-loader这个loader库
loader: "babel-loader"
}
},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ["style-loader", 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ["style-loader", 'css-loader', 'postcss-loader', 'sass-loader'] },
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000" },
{ test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader" }
]
},
//热更新
devServer: {
port: 9000,
//以哪个文件夹作为发布的网站目录
contentBase: './public',
//自动打开浏览器
open: true,//自动打开浏览器
hot: true,//实时刷新(开启热更新)
},
resolve: {
//设置别名
alias: {
//将src文件设置一个别名
'@': path.resolve(__dirname, './src')
}
},
//插件
plugins: [
new HtmlWebpackPlugin({
// 页面需要使用模版符号来输出 <%= htmlWebpackPlugin.options.title %>
title: '首页',
//基于这个index.html模版,否则不会生成 <div id='app'></div>
template: path.resolve(__dirname, './public/index.html')
}),
//清除文件
new CleanWebpackPlugin(),
//用于热更新,这两个插件不用引入,因为是webpack内置的
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
module.exports = config;
2.使用React编码
在入口文件中,使用react编码
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>使用webpack方式使用React</h1>, //jsx语法
document.getElementById('app')
);
3.执行打包
在package.json中配置如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js",
"start":"npm run dev"
},
- dev是开发环境运行
- build是打包上线时运行 记住打包上线时还需要修改webpack.config.js中的mode为生产环境
- start 方便使用npm start执行
4.文件目录
|-- react-webpack
|-- .babelrc babel配置文件
|-- package-lock.json
|-- package.json 主要的包文件
|-- postcss.config.js 处理css兼容的文件
|-- readme.md
|-- webpack.config.js 主要的webpack配置文件
|-- dist 打包后的目录
|-- public 静态资源文件
| |-- index.html
|-- src 源代码
|-- main.js 项目主入口
|-- assets 静态资源
|-- scss.css
|-- style.css
三.采用官方脚手架(2种方法)
1.全局安装脚手架一次
cnpm install -g create-react-app
https://github.com/facebook/create-react-app
1.创建项目
create-react-app < ProjectName >
2.启动项目
npm start
2.使用npx创建脚手架
npx create-react-app < ProjectName >
npx 命令，先检查局部中有没有create-react-app, 如果有， 跟上面一样创建和启动项目
如果没有，再检查全局下有没有这个命令， 如果有， 跟上面一样创建和启动项目
如果都没有，自动局部安装 create-react-app ，然后跟上面一样创建和启动项目
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
