中文官方网站：https://react.docschina.org
菜单
一、简单的Hello World例子
例子中引入：三个JS
- babel.min.js:让浏览器兼容ES6，将jsx转换成js
- react.development.js:React的核心库
- react-dom.development.js:React扩展库
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!--引入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>
<!--引入babel 用于Jsx转换称js-->
<script type="text/javascript" src="../../js/babel.min.js"></script>
<script type="text/babel">
//1、创建一个虚拟的DOM
const VDOM = <h1>Hello world</h1>
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
二、jsx和js的例子对比
2.1jsx的例子
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!--引入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>
<!--引入babel 用于Jsx转换称js-->
<script type="text/javascript" src="../../js/babel.min.js"></script>
<script type="text/babel">
//1、创建一个虚拟的DOM
const VDOM = (
<h1>Hello world
<span> by jsx demo</span>
</h1>
)
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>2.2js的例子
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!--引入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>
<!--引入babel 用于Jsx转换称js-->
<script type="text/javascript" src="../../js/babel.min.js"></script>
<script type="text/babel">
//1、创建一个虚拟的DOM
// const VDOMChild1 = React.createElement('li', null, 'one');
// const VDOMChild2 = React.createElement('li', null, 'two');
// const ParentVDOM = React.createElement('ul', { className: 'teststyle' }, [child1, child2]);
const VDOM = React.createElement(
"h1",
{id:"h1-id",class:"h1-class"},
React.createElement(
"span",
{},
"Hello world by js demo")
)
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>三、jsx的语法规则
- 定义DOM时不能有单引号
- 标签中混入JS表达式时用{}
- 当声明标签的类的需要用className
- 如果需要内联style的时候，用双花括号style={{key:value}}
- 虚拟DOM只能有一个根标签
- 标签必须闭合，例如<input>需要写成<input type=”text” />，比如
<div>...</div>或使用空的<>...</> - 标签首字母是小写则会转成同名元素
- 标签首字母是大写则则会渲染对应的组件，没有就会报错
什么是Js表达式？什么是js语句
以下是JS表达式：一个表达式会产生一个值
1、a
2、a+b/a-b
3、demo(1) //调用函数
4、arr.map()
5、function test(){}以下是JS语句
1. if
2.for
3.switch(){case:xxxx}3.1 jsx例子
3.1.1简单显示数据
<script type="text/babel">
//1、创建一个虚拟的DOM
const title = "This is a title";
const VDOM = (
<>
<h1 id="h1-id1" >
<p>The title is :{title}</p>
</h1>
</>
)
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
3.1.2复杂显示数据
<script type="text/babel">
//1、创建一个虚拟的DOM
const postInfo = {
title: 'the post title',
content: 'the post content',
author: 'fox',
color: 'red'
};
const VDOM = (
<>
<h1 id="h1-id1" >
<a
alt={'author of ' + postInfo.author}
style={{
color: postInfo.color,
fontSize: '15px'
}}
>
The title is :{postInfo.title.toUpperCase()}
</a>
</h1>
</>
)
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
3.1.3渲染数组数据
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!--引入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>
<!--引入babel 用于Jsx转换称js-->
<script type="text/javascript" src="../../js/babel.min.js"></script>
<script type="text/babel">
//1、创建一个虚拟的DOM
const data = ["张三","李四","王五"];
const data2 = [
{ title: 'Cabbage', id: 5 },
{ title: 'Garlic', id: 6 }
];
const data3 = [
{ title: 'fox', id: 7 },
{ title: 'fcors', id: 8 }
];
const listItem = data3.map(data3Item=>{
return <li key={data3Item.id}>
{data3Item.title}
</li>
})
const VDOM = (
<>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
/*方法一*/
{
data2.map(product =>
<li key={product.id}>
{product.title}
</li>
)
}
/*方法二*/
{listItem}
</ul>
</>
)
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>3.1.4 响应事件
简单的click事件
<script type="text/babel">
function handleClick() {
alert('You clicked me!');
}
//1、创建一个虚拟的DOM
const VDOM = (
<h1 id="h1-id" onClick={handleClick} className="h1-class">
<span>Hello world by jsx demo</span>
</h1>
)
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>传参式click事件
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!--引入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>
<!--引入babel 用于Jsx转换称js-->
<script type="text/javascript" src="../../js/babel.min.js"></script>
<script type="text/babel">
const handleClick = (event, name) => {
event.preventDefault();
const buttonId = event.target.id;
const showStatus = event.target.getAttribute('data-showstatus');
event.target.setAttribute('data-showstatus', 'show');
event.target.classList.add('show');
console.log(event.target);
console.log(`Button clicked: ${buttonId}`);
console.log(`Show status: ${showStatus}`);
const classNames = event.target.classList;
console.log(classNames);
}
const VDOM = (
<div>
<button onClick={(event) => handleClick(event,"World")}>
Click me
</button>
</div>
);
//2、渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>