React 在Html页面中使用React

最新推荐文章于 2025-06-23 09:20:50 发布

原创最新推荐文章于 2025-06-23 09:20:50 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍如何从零开始搭建React开发环境，包括安装Node.js、使用bower管理依赖，以及配置Babel转换JSX语法。通过一个简单的点击警报示例，展示React组件的创建和渲染过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1). React地址

ReactJS官网地址
 Github地址

2). 搭建环境

安装Node.js官网
全局安装bower

npm install -g bower

图1.png

bower安装react

bower install react

图2.png

bower安装能够将JSX 语法转为JavaScript 语法的工具babel

bower install babel

图3.png

3). 代码编写

<!--suppress ALL -->
<html>
<head>
    <meta charset="utf-8">
    <title>学习React！！</title>
</head>
<body>
<div id="app"></div>
<script src="libs/bower_components/react/react.development.js"></script>
<script src="libs/bower_components/react/react-dom.development.js"></script>
<script src="libs/bower_components/babel/browser.js"></script>
<script type="text/babel">
    // 创建是秃头
    class MessageBox extends React.Component {
        alertMe() {
            alert('你刚才点了我一下。。。。');
        }

        render() {
            return (<h2 onClick={this.alertMe}>你好世界！！！</h2>)
        }
    }
    // 渲染
    ReactDOM.render(<MessageBox/>, document.getElementById('app'), function () {
        console.log('渲染完成啦！！');
    });
</script>
</body>
</html>