引入方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,world! Hello,ccc!</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
***********
将元素渲染到 DOM 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
const element = <h1>hi,ccc!</h1>;
ReactDOM.render(
element,
document.getElementById("hi")
);
</script>
</body>
</html>
效果:
let和const命令:
ES6新增了let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
const
声明一个只读的常量。一旦声明,常量的值就不能改变。
const
声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
const
的作用域与let
命令相同:只在声明所在的块级作用域内有效。
参考:React 语法之let和const命令https://cloud.tencent.com/developer/article/1036032
*********************
更新元素渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function tick() {
const element =
(
<div>
<h1>hi,ccc,hi!time?</h1>
<h2>现在是:{new Date().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('hi')
);
}
setInterval(tick, 1000);
</script>
</body>
</html>
效果:
以上实例通过 setInterval() 方法,每秒钟调用一次 ReactDOM.render()。
***
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
*********************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function Clock(props) {
return (
<div>
<h1>hello,ccc!</h1>
<h2>now:{props.date.toLocaleString()}</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()}/>,
document.getElementById('hi')
);
}
setInterval(tick, 1000);
</script>
</body>
</html>
效果:
************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
class Clock extends React.Component {
render() {
return (
<div>
<h1>hi,ccc!</h1>
<h2>now{this.props.date.toLocaleTimeString()}</h2>
</div>
);
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()}/>,
document.getElementById('hi')
);
}
setInterval(tick, 1000);
</script>
</body>
</html>
效果:
注意:不要以(作为一行的开头。否则出错不显示
**********
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.hi {
color: deeppink;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const element = (
<h1 className="hi">hi,ccc!</h1>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
</html>
效果:
*****
js的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="../js/hi-react.js"></script>
</body>
</html>
hi-react.js
const element = (
<h1 className="hi">hi,ccc!</h1>
);
ReactDOM.render(element, document.getElementById('root'));
效果:
****************
表达式计算:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
ReactDOM.render(
<h1>计算1+1={1 + 1}</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
**************
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值,则会输出 false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
var i = 100;
ReactDOM.render(
<h1>{i === 100 ? 'true' : 'false'}</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
***********
样式需要写成驼峰式命名法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
var cccStyle = {
fontSize: 50,
color: 'red'
};
ReactDOM.render(
<h1 style={cccStyle}>hi,ccc</h1>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
*********************
注释:
<div id="hi"></div>
<script type="text/babel">
ReactDOM.render(
<div>
{/*
*多行注释...
*/}
<h1>hi,ccc!</h1>
{/*单行注释...*/}
</div>,
document.getElementById('hi')
);
</script>
*************
数组,会自动展开:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
var arr = [
<h1>hi,ccc!</h1>,
<p>这是一个p标签,1+1={1 + 1}</p>,
<span>hi,span</span>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('hi')
);
</script>
</body>
</html>
这里显示出来的span标签效果不是内联的
效果:
**********
组件:2种写法:用函数或者ES6 class 来定义一个组件:
注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。比如用一个div包裹多个其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function SayHi(props){
return <h1>hi,ccc!</h1>;
}
const element = <SayHi/>;
ReactDOM.render(
element,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
class SayHi extends React.Component {
render() {
return <h1>hi,ccc!</h1>;
}
}
const element = <SayHi/>
ReactDOM.render(
element,
document.getElementById('hi')
);
</script>
</body>
</html>
效果同上
************
向组件传递参数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function SayHi(props) {
return <h1>你好!{props.name}</h1>;
}
const element = <SayHi name="ccc"/>;
ReactDOM.render(
element,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
************
复合组件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
function SayName(props) {
return <p>名字是:{props.name}</p>;
}
function SayAge(props) {
return <p>年龄是:{props.age}</p>;
}
function SayTel(props) {
return <p>电话号码是:{props.tel}</p>;
}
function App() {
return (
<div>
<SayName name="ccc"/>
<SayAge age="20"/>
<SayTel tel="13612341234"/>
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
**************
React State(状态)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>hi,ccc</h1>
<h2>现在是:{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
ReactDOM.render(
<Clock/>,
document.getElementById('hi')
);
</script>
</body>
</html>
效果:
***********