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}