React的安装和使用!
2023-03-20 14:51:26 时间
一、React库说明
React库包含两部分:1、React包含了所有基本功能;2、ReactDOM只包含了操作DOM的功能。
1、加载React库
# 1、用<script>加载
开发版:<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
发布版:<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
# 2、ES5 和 npm 环境中用require
var React = require('react')
# 3、ES6 和 npm 环境中用import
import React from 'react'
2、加载ReactDOM库
# 1、用<script>加载
开发版: <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
发布版:<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
# 2、ES5 和 npm 环境中用require
var ReactDOM = require('react-dom')
# 3、ES6 和 npm 环境中用import
import ReactDOM from 'react-dom'
二、HTML中使用React
只用浏览器原生支持特性来加载使用React,此种方式适合项目演示和学习用。
1、HTML配置React环境
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- 第一步:设置父容器 -->
<div id="like_button_container"></div>
<!-- 第二步:加载开发版本的React -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 部署时,请用下面链接替代上面 -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- 第三步:编写React组件代码 -->
<script src="like_button.js"></script>
</body>
</html>
2、编写React组件
// like_button.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
3、查看效果
把上面html文件和js文件放在同一个文件夹内,可用浏览器打开html文件,查看效果。
三、HTML中使用React和JSX
jsx是js的扩展语法,用标签式方式编写UI元素,无法被浏览器直接支持,需要预处理器把jsx转为浏览器支持的html标签,这个预处理器就是babel, React没有强制要求使用JSX,但使用JSX编写UI,确实带来很多便利。
法一:脚本加载babel
把下面代码存储为html文件,打开即可看到效果,此法适合项目演示和学习,不适合发布项目。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!-- 第一步:加载开发版本的React -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 部署发布时,请用下面链接替代上面 -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- 第二步:加载开发版本的babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 第三步:使用JSX编写UI
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
法二:安装babel到项目
- 新建项目文件夹:test;
- 新建并复制下面代码到test/index.html文件;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- 第一步:设置父容器 -->
<div id="like_button_container"></div>
<!-- 第二步:加载开发版本的React -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 部署发布时,请用下面链接替代上面 -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- 第三步:加载React组件 -->
<script src="like_button.js"></script>
</body>
</html>
- 在test文件夹下,新建src文件夹;
- 在src文件下,新建并复制下面js代码到like_button.js
'use strict';
// 第三步:编写组件
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<button onClick={() => this.setState({ liked: true })}>
Like-babel
</button>
);
}
}
let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);
- 安装
Node.js
- 打开terminal,到项目根目录test下,执行下面命令安装babel
npm init -y
npm install babel-cli@6 babel-preset-react-app@3
- 运行jsx预处理器babel
npx babel --watch src --out-dir . --presets react-app/prod
- 用浏览器打开index.html,即可看到运行效果。可修改src/like_button.js内容,babel会自动转化src/like_button.js,在项目根目录test生成一个浏览器支持的like_button.js,浏览器刷新index.html,即可看到修改后效果。
五、创建React项目
1、Create React App
可快速创建单页面应用并自动配置好React的开发环境,提供良好的开发体验。但是必须安装 Node >= 14.0.0 和 npm >= 5.6。推荐作为学习实践项目或者单页面项目。
单页面应用(single-page application)
是指加载单个页面,并下载所有必要资源( JavaScript 、CSS等),后续页面的任何交互,都不再需要向 server 请求资源,即页面不会重新加载。
# 安装完Node后,在terminal中创建React的单页面应用
npx create-react-app my-app
# 运行此单页面项目
cd my-app
npm start
# 编译项目作为production版本发布
npm run build
2、Next.js
Next.js 是结合了 Node.js 和 React 的轻量级框架,适合场景:静态前端页面+Nodejs服务端,组合的应用。
3、Gatsby
用 React 创建 静态网站 的最佳方式,适合内容型的网站,提供最快的访问速度。项目部署发布时,只需要上传编译后的 public 文件夹到Nginx服务器,即完成部署发布。
五、参考文档:
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十