React介绍

React

React 起源于Facebook，于2013年5月开源。是一个构建用户界面的JavaScript 库，与vue，angular 并称前端三大框架。
学习资源：React英文官网 React中文官网 官网文档

特点：数据驱动、组件化、虚拟DOM

React的安装与引入

安装

//react@17.0.0  react核心包
//react-dom@17.0.0  渲染界面
//babel-standalone@6.26.0  es6 - es5
npm i react@17.0.0 react-dom@17.0.0 babel-standalone@6.26.0

引入（按顺序引入）

//建议写在 head 标签内
//react 核心包
<script src="./js/react.development.js"></script>
//渲染界面
<script src="./js/react-dom.development.js"></script>
//ES6 - ES5
<script src="./js/babel.js"></script>

//建议写在 body标签内
//将 script 标签中 JSX 内容转换为浏览器可识别的 JavaScript
<script type="text/babel"></script>

React 程序

第一个 react 程序
ReactDOM.render(react 元素, 节点)
– ReactDOM.render：将 React 元素渲染到指定的节点显示
– react 元素：元素描述了你在屏幕上想看到的内容

<div id="root"></div>
//将 script 标签中的内容转换为浏览器可以识别的 JavaScript
<script type="text/babel">
	ReactDOM.render(<h2>hellow</h2>,document.getElementById('root'))
</script>

注意事项：
— react 程序中，界面显示内容称为 react 元素
— 多行react 元素，必须有根标签
— 换行加 ‘()’
— '()'里面的内容当作html元素解析
— 单行标签 必须加 ‘/’
— 遇到 {} 做JavaScript 代码操作 。{}可以写JavaScript表达式（变量、三目运算符、函数调用，不能写其它语句【if】）

JSX

JSX 全称 JavaScript XML, 是一种扩展的 JavaScript 语言，它允许 HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。它允许 HTML 与 JavaScript 的混写。

{
   /*JSX 注释*/}

JSX 语法
在 script 标签里操作

<script type="text/babel"></script>

操作内容

{
   /*操作内容*/}
<h1>{
   title}</h1>

操作属性

<img src = {
   url} />

操作样式

<p style = {
   sty}