<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入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>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
//书写jsx模板语法
/**
* 1.jsx模板严格遵循xml语法
* 2.jsx模板语法中双标签必须要有开始和结束
* 3.jsx模板语法中单标签必须要有结束
* 4.jsx模板语法中有且只能有一个根标签
* 5.jsx模板语法严格区分大小写
*/
const div = <div>
<h3>标题三</h3>
<img src="./images/nanshidiao.jpg" alt="" />
<p>
<h2>标题2</h2>
</p>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
文本内容:使用{}解析js语法
属性: 属性名={js语法}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入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>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
const msg = '标题三';
const url = './images/nanshidiao.jpg';
//书写jsx模板语法
/**
* 1.jsx模板严格遵循xml语法
* 2.jsx模板语法中双标签必须要有开始和结束
* 3.jsx模板语法中单标签必须要有结束
* 4.jsx模板语法中有且只能有一个根标签
* 5.jsx模板语法严格区分大小写
*/
const div = <div>
<h3>{msg}</h3>
<img src={url} alt="" />
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板方法的使用
调用系统方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入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>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
const str = 'i have an apple';
// 书写jsx模板语法
const div = <div>
{/*这里写注释内容*/}
{/*调用系统方法*/}
<div>{str.toUpperCase()}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
调用自定义方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入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>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
const str = 'i have an apple';
function fn(str){
return str.split('').reverse().join('')
}
// 书写jsx模板语法
const div = <div>
{/*这里写注释内容*/}
{/*调用系统方法*/}
<div>{str.toUpperCase()}</div>
{/*调用自定义方法*/}
<div>{fn(str)}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
模板注释
{/*这里写注释内容*/}
条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.引入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>
<!-- 3.引入babel -->
<script src="./libs//babel.min.js"></script>
</head>
<body>
<!-- 1.创建容器 -->
<div id="container">
</div>
<!--
1.type="text/babel"
解释: 浏览器解析到该处时,看到是babel类型.就不做解析,交给babel进行解析
-->
<script type="text/babel">
let age = 30;
// 书写jsx模板语法
const div = <div>
{/*在jsx模板语法中不能使用if结构做条件判断*/}
{/*{if(age>=18){'已成年'}else{'未成年'}}*/}
{/*使用三元运算符做条件判断*/}
<div>{age>=18 ? '已成年' : '未成年'}</div>
<hr />
<div>{age>=18 ?<h2>已成年</h2> : <h3>未成年</h3>}</div>
</div>
ReactDOM.render(div,document.querySelector('#container'))
</script>
</body>
</html>
className
为设置标签的选择器htmlFor
设置label标签的属性
Document
通过style
指定行内样式
style属性值采用{{}}来书写
{{}}:
外层{}: #指jsx模板语法
内层:{}: #指一个json对象
Document
Document
Document
总结:
1.特点:
a.组件化 b.数据驱动结合视图渲染来构建单页面应用 c.react没有指令,计算属性.过滤器.监听
d.react中没有自动的数据双向绑定 e.react.js的核心React f.react-dom.js的核心是ReactDOM
2.使用方式:
a.直接引入
b.npm i react
3.React.createElement(创建的元素,{属性集合},文本内容)
4.ReactDOM.render(元素对象,元素的作用域)
5.jsx模板语法
a. jsx模板不能被浏览器解析
b. jsx模板需要被babel进行解析
c. jsx主要用来构建react项目
6.jsx模板语法规范
a. 严格区分大小写
b. 双标签必须有开始和结束
c. 单标签必须有结束
d. 有且只有一个根节点
7.jsx模板语法中常见的用法
变量: {}
方法: {str.toUpperCase()} {fn()}
数组: forEach(没有返回值) map(有返回值)
{arr.map(item=>(.......))}
条件渲染: 三元运算符
关键字: className htmlFor
注释: {/*这里写注释*/}
富文本渲染: dangerouslySetInnerHTML={{__html:变量名}}