前端学习之React篇-（1）最简React——Html直接引用React

最新推荐文章于 2024-07-20 05:50:55 发布

沉末

最新推荐文章于 2024-07-20 05:50:55 发布

阅读量2w

点赞数 11

分类专栏： react 文章标签： React 前端

本文链接：https://blog.csdn.net/chenjycm/article/details/80067723

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当新手想看看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>

沉末

关注

11
点赞
踩
21

收藏

觉得还不错? 一键收藏
4
评论
前端学习之React篇-（1）最简React——Html直接引用React

当新手想看看React是什么样的，语法是什么样的，那么这里给出了一个最简单的使用React的方法——就是在html页面中直接引入React的js文件，然后在这个html中直接写react的js即可，简单、粗暴，但是也有很大的局限性。下面一步步介绍如何构建这样一个基于React的页面，最后给出完整的html示例代码。1、首先我创建一个最基本的html文件，然后引入Re...
复制链接

扫一扫

专栏目录