当新手想看看React是什么样的,语法是什么样的,那么这里给出了一个最简单的使用React的方法——就是在html页面中直接引入React的js文件,然后在这个html中直接写react的js即可,简单、粗暴,但是也有很大的局限性。下面一步步介绍如何构建这样一个基于React的页面,最后给出完整的html示例代码。
1、首先我创建一个最基本的html文件,然后引入React的库文件,主要是react 和 react-dom,此外还要引入babel进行语法编译,不然浏览器是无法识别你的react。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//我们的react
</script>
</body>
</html>
2、这样,我们就可以开始写js内容了,我们在id为app的div后面添加script标签,按照react的语法可以写我们的内容啦,还要注意script标签要加type="text/babel",不然无法识别jsx语法哦!如下:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
以上就是React的最简单的方式。这篇文章的主体内容就结束了,文章有点短,那么再添点油加点醋吧!!
这个结构太简单了,以至于我们新手不知道该如何写自己的内容,所以后面加了点内容让小白更明白React的使用。这里定义了一个MessageBox的组件,添加了个点击事件。render return的内容就是我们想自己想怎么改就怎么改的东东,ReactDom.render就把这个组件MessageBox渲染到id为app的div中啦。
<script type="text/babel">
class MessageBox extends React.Component{
onClick = ()=>{
alert('clicked');
}
render = ()=>{
return ( <div><h1 onClick={this.onClick}>Hello World!</h1></div> )
}
}
ReactDOM.render( <MessageBox/>,
document.getElementById('app'),
)
</script>
要注意的是,这里使用了ES6的写法,为什么呢,因为React已经摒弃了ES5的写法,全力拥抱了ES6。比如:我们创建一个叫Message的组件:
ES5:
var Message = React.createClass({
render: return (<h1>hello</h1>)
})
ES6:
class MessageBox extends React.Component{
render = ()=> <h1>hello</h1>
}
这种ES5的写法未来可能会不受支持啦,多学学新东西有好处,什么箭头函数啊、let、const等等,这里render的return都可以省了。
我们已经定义好了一个组件,而且ReactDom.render只能渲染一个组件,那么多个组件怎么用呢,我们需要把其他组件放到前面的那个组件中去。这里创建了一个组件TimeNow来显示时间,具体内容可以不用管,在MessageBox中的render中,把组件TimeNow放进去就OK。(<div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow /></div>)。
注:
1、render的return只能返回闭合的一个节点,如<div></div>,不能返回<div></div><div></div>这种结构。所以这里在原来的组件中加了一层包裹的div。
2、我们将两个组件定义在了一个地方,但我们一般的操作流程会将不同组件放在不同的文件中,尤其是大的项目,这种最简模式就存在局限,React 文档上也有注明:Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP. 所以在最简模式上直接引入组件文件是行不通的,而是需要服务器环境。解决方法是开一个本地服务器(比如 Apache),这就有点麻烦了,不如使用create-react-app脚手架创建一个项目。
本文全部代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class TimeNow extends React.Component{
constructor(){
super();
this.state = {
time: ''
}
}
componentDidMount = () =>{
setInterval(()=>{
var time = new Date().toLocaleString();
this.setState({
time
});
}, 1000);
}
render = () => {
const {time} = this.state;
return <div>时间:{time}</div>
}
}
class MessageBox extends React.Component{
onClick = ()=>{
alert('clicked');
}
render = ()=>{
return ( <div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow /></div> )
}
}
ReactDOM.render( <MessageBox/>,
document.getElementById('app'),
)
</script>
</body>
</html>