您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
2. 第一个组件hellow world
发布时间：2025-02-10 00:16:04编辑：雪饮阅读（）
-
第一步安装npm，我这里已经安装过了
C:\Users\1>npm -v
8.19.4
所以我就不安装了。
第二步创建项目目录并进入项目目录
C:\Users\1>mkdir react_tuts
C:\Users\1>cd react_tuts
然后安装bower
C:\Users\1\react_tuts>npm install -g bower
added 1 package, and audited 2 packages in 19s
found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.19.4 -> 11.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
npm notice Run npm install -g npm@11.1.0 to update!
npm notice
第三步然后再就是安装react
C:\Users\1\react_tuts>bower install react
bower react#* not-cached https://github.com/facebook/react-bower.git#*
bower react#* resolve https://github.com/facebook/react-bower.git#*
bower react#* download https://github.com/facebook/react-bower/archive/v16.1.0.tar.gz
bower react#* extract archive.tar.gz
bower react#* invalid-meta for:C:\Users\1\AppData\Local\Temp\DESKTOP-C502IS0-1\bower\266a1f7c2e2345169d3bc448da45eae6-3408-OXae9o\bower.json
bower react#* invalid-meta The "main" field has to contain only 1 file per filetype; found multiple .js files: ["react.development.js","react-dom.development.js"]
bower react#* resolved https://github.com/facebook/react-bower.git#16.1.0
bower react#^16.1.0 install react#16.1.0
react#16.1.0 bower_components\react
安装完成react后会发现当前项目目录中多出一个目录bower_components
C:\Users\1\react_tuts>dir
驱动器 C 中的卷没有标签。
卷的序列号是 443F-84C5
C:\Users\1\react_tuts 的目录
2025/02/09 23:39 <DIR> .
2025/02/09 23:39 <DIR> ..
2025/02/09 23:39 <DIR> .idea
2025/02/09 23:37 <DIR> bower_components
0 个文件 0 字节
4 个目录 150,300,712,960 可用字节
第四步然后在咱们的项目目录中建立如index.html引入bower_components中的react并编写一个简单的hellow world如index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<!-- 引入 React 和 ReactDOM 的开发版本 -->
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<!-- 引入 Babel，用于将 JSX 转换为 JavaScript -->
<script src="https://unpkg.com/@babel/standalone@7.26.8/babel.min.js"></script>
<!-- 这里我们将使用 type="text/babel" 来告诉 Babel 我们想要转换这个 <script> 标签中的内容 -->
<script type="text/babel">
// 创建一个简单的 React 组件
function HelloWorld() {
// 定义一个处理点击事件的函数
function handleClick() {
alert("你点击了我");
}
return (
<h1 onClick={handleClick}>Hello, World! click to me! </h1>
);
}
// 使用 ReactDOM.render 方法将组件渲染到页面上
ReactDOM.render(<HelloWorld />, document.getElementById('app'),function(){
console.log("组件渲染完成");
});
</script>
</body>
</html>
关键字词：组件,hello world
下一篇：返回列表
相关文章
- 15父组件主动获取子组件的数据和方法 子组件主动获取
- 14父子组件传值 -完整
- workerman常用组件-MySQL组件-workerman之使用Workerm
- workerman常用组件-MySQL组件-workerman之使用Workerm
- workerman常用组件-MySQL组件-workerman之使用Workerm
- workerman常用组件-MySQL组件-workerman之使用Workerm
- workerman常用组件-MySQL组件-workerman之使用Workerm
- workerman常用组件-MySQL组件-workerman之使用Workerm
- workerman常用组件-MySQL组件-workerman之安装 Worker
- workerman常用组件-GlobalData变量共享组件-GlobalDat