react基础语法
一、React简介
react由来
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MV* 框架，都不满意，就决定自己写一套，用来架设 Instagram 照片墙 的网站（17年 用户量7亿+）。做出来以后，发现这套东西很好用，就在2013年5月开源了。
是什么
- 简单概括：React是当下很火的一个JS库&框架（facebook）
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
React与vue的对比
组件化方面
明确概念：
模块化：从代码的角度来进行分析的；封装【逻辑】代码，便于项目的维护和开发；
组件化：从 UI 界面的角度来进行分析的；封装【页面】代码，便于项目的维护和开发；
**组件化（好处）：**减少代码冗余，便于后期维护。
组件化（VUE使用）： 通过 .vue 文件，来创建对应的组件；
template 结构，script 行为，style 样式
组件化（React使用）： 一切都是JS，因此要学习React，JS要合格。
开发团队方面
- React：由FaceBook前端官方团队进行维护和更新的（有背景，技术实力比较雄厚）；
- Vue：起初由作者尤雨溪专门进行维护的，回来2.x 版本后尤雨溪主导的开源团队维护和更新；
社区方面
- 在社区方面，React由于诞生的较早，所以社区比较强大，一些常见的问题、坑、最优解决方案，文档、博客在社区中都是可以很方便就能找到的；
- Vue的社区现在也非常的成熟，找不到的也可以百度或谷歌
移动APP开发体验方面
- Vue，结合 Weex 这门技术，提供了 迁移到 移动端App开发的体验
- React，结合 ReactNative，也提供了无缝迁移到 移动App的开发体验
- 相对而言：普遍uniapp去写或微信小程序
最后
vue更官方化（约束）
react更社区化（自由）
小总结
由来：由facebook起初开发自己内部项目，2013年开源
扫描二维码关注公众号，回复：
9390127 查看本文章
是什么：库或框架
去哪下：百度cdn或者后期用脚手架创建
比如vue：vue更官方化，react更社区化
二、初体验
demo1
需求1：在页面显示hello，webopenfather
步骤1：引入react库
步骤2：通过react api创建react页面元素对象
步骤3：通过ReactDOM把react页面元素对象渲染显示
步骤4：创建渲染容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<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>
<script>
// 需求1：在页面显示hello，webopenfather
// 步骤1：引入react库
// 步骤2：通过react api创建react页面元素对象
// 语法：React.createElement(待创建的标签名，待创建的标签属性对象/null，子内容)
const element = React.createElement('h1', {
title: 'this is h1 tag'
}, 'hello，webopenfather')
// 步骤3：通过ReactDOM把react页面元素对象渲染显示
// 语法：ReactDOM.render(元素对象，监控范围标签对象)
ReactDOM.render(element, document.querySelector('#app'))
// 步骤4：创建渲染容器
// 留心1：React和ReactDOM都是大驼峰
</script>
</body>
</html>
小总结
什么是react：用于构建用户界面的js库
语法1：创建元素对象
const 元素对象 = React.createElement(待创建的标签，带创建的标签属性对象/null，子内容)
语法2：渲染数据
ReactDOM.render（元素对象，监控范围）
三、JSX 简介
##明确需求
- 发现：使用createElement创建react对象非常的麻烦
- 解决：推荐您使用JSX（官方也这么说）
重构初体验案例
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<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>
<!--
JSX是js扩展语法，浏览器不能直接识别，需要通过babel转义
-->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 初体验1
// 1. 用JSX语法创建react对象
const h1Element = <h1 title="this is h1 tag">hello，webopenfather</h1>
// 2. 渲染
ReactDOM.render(h1Element, document.querySelector('#app'))
// 初体验2
// 1. 用JSX语法创建react对象
const ulElement = (<ul id="ulObj">
<li>锄禾日当午，</li>
<li>汗滴禾下土。</li>
<li>谁知盘中餐，</li>
<li>粒粒皆辛苦。</li>
</ul>)
// 2. 渲染
ReactDOM.render(ulElement, document.querySelector('#app'))
</script>
</body>
</html>
- 留心
<!--
JSX是js扩展语法，浏览器不能直接识别，需要通过babel转义
-->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>
其他（显示数据、注释、调用函数、表达式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<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>
<!--
JSX是js扩展语法，浏览器不能直接识别，需要通过babel转义
-->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 定义uname=神龙教主变量
// 定义age=18
// 注释：锄禾日当午
// 定义函数：say hello
// 表达式：年龄+1
let uname = '神龙教主'
let age = 18
let say = () => 'hello'
// 1. 用JSX语法创建react对象
const ulElement = (<ul id="ulObj">
<li>{uname}</li>
<li>锄禾日当午，</li>
{ /* <li>汗滴禾下土。</li> */ }
<li>谁知盘中餐，</li>
<li>粒粒皆辛苦。</li>
<li>调用函数：{say()}</li>
<li>年龄+1： {age+1}</li>
</ul>)
// 2. 渲染
ReactDOM.render(ulElement, document.querySelector('#app'))
</script>
</body>
</html>
小总结
发现：单独用React.createElement麻烦
解决：通过JS扩展衣服啊 JSX 实现 （原理：React.createElement）
切记切记切记：浏览器不支持 解析报错 需要 babel库
JSX是js扩展语法，浏览器不能直接识别，需要通过babel转义
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>
