一. 简介:
(一). 官网:
1.英文官网: https://reactjs.org/
2.中文官网: https://react.docschina.org/
(二). 介绍:
React起源于Facebook的内部项目。React的出现是革命性的创新,React的是一个颠覆式的前端框架.一个用于构建用户界面的 JavaScript 库.
(三). 特点:
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效(优秀的Diffing算法)
二.基础使用:
(一). 引入react库:
//引入react核心库
<script type="text/javascript" src="./js/react.development.js"></script>
//引入react-dom,用于支持react操作DOM
<script type="text/javascript" src="./js/react-dom.development.js"></script>
(二). 使用:
<div id="test"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script>
ReactDOM.render(
'王俊凯',
document.getElementById('test')
)
</script>
<div id="test"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script>
let h1 = React.createElement('h1',null,'我是一个标题')
ReactDOM.render(
h1,
document.getElementById('test')
)
</script>
(三). JSX语法:
全称
: JavaScript XML
注
:它可以作为值使用,它并不是字符串,它也不是HTML, 它可以配合JavaScript 表达式一起使用
1. jsx语法规则:
(1).定义虚拟DOM
时,不要写引号。
(2).标签中混入JS
表达式时要用{}。
(3).样式的类名指定不要用class
,要用className
。
(4).内联样式,要用style={{key:value}}
的形式去写。
(5).只有一个根标签
(6).标签必须闭合
(7).标签首字母
若小写字母开头,则将该标签转为html
中同名元素,若html
中无该标签对应的同名元素,则报错。
若大写字母开头,react
就去渲染对应的组件,若组件没有定义,则报错。
2.使用:
<div id="test"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
//引入babel,用于将jsx转为js
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel"> //必须写bable
const Dom = <h1>王俊凯</h1>
ReactDOM.render(
Dom,
document.getElementById('test')
)
</script>
注
:引入bable.js
作用:
(1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
(2)只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理
3.内联样式和class:
class要用className
内联样式要用style={{key:value}}
<style>
#ant{
color: blue;
}
</style>
<div id="test"></div>
<script type="text/babel">
const myId = 'ANT'
const content = '刘宇宁'
const Dom = (
<div id={myId.toLowerCase()} style={{fontSize:"30px"}}>{content}</div>
)
</script>
3.动态展示列表:
<div id="test"></div>
<script type="text/babel">
const arr = ['王俊凯','刘宇宁','白敬亭']
const Dom = (
<ul>
{
arr.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
)
</script>
三. 自动化构建React:
安装
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
使用
安装完成以后,即可使用 create-react-app 命令
create-react-app <项目名称>
或者通过 npx 的方式
npx create-react-app <项目名称>
命令脚本:
npm start
启动一个内置的本地 WebServer,根目录映射到 ‘./public’ 目录,默认端口:3000
npm run test
运行 Jest 测试
npm run build
打包应用(准备上线)
总结:
React是一个声明式、高效、灵活的、创建用户界面的JavaScript库,即使React的主要作用是构建UI,但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案.