创建项目
npm config set registry https://registry.npm.taobao.org
npx create-react-app hello-world
>cd hello-world
>npm start
服务开启后，会自动在浏览器中弹出项目地址localhost:3000，就可以看到这个示例了。
打开项目文件，将App.js中的App函数改成下面这种最简单的形式
function App() {
return (
<p>微小冷</p>
);
}
则网页内容变为
由此可知，App.js文件中，App函数的返回值，最终呈现在了网页中。但网页的标题以及图标显然不是我们自行设计的，说明React的逻辑是，把App的返回值嵌入到了某个网页之中。
在浏览器中按下F12，可以查看html代码，这个网页对应的html文件，实则是public文件夹下的index.html文件。将其删至最简
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>微小冷</title>
</head>
<body>
<noscript>这里可以放js语句</noscript>
<div id="root"></div>
</body>
</html>
这样网页标题也变成了微小冷。
组件和事件
React提供了一系列UI组件，这些组件都以大写字母开头，有了这些，就可以创建一个用户友好的应用程序。接下来在页面中添加一个按钮，首先创建一个按钮函数
function OneButton(){
function handleClick(){
alert("你好！")
}
return (
<button onClick={handleClick}>微小冷</button>
)
}
其中嵌套的handleClick就是按钮点击事件，其返回值则是一个携带了点击事件的按钮。然后更改一下主函数
function App(){
return (
<OneButton/>
);
}
export default App;
效果如下
更新状态
当App返回一个按钮后，这个按钮的属性往往是已经确定了的，如果想更改按钮显示的内容，就需要引入useState。
import {useState} from 'react';
function OneButton(){
const [count, setCount] = useState(0);
function handleClick(){
setCount(count + 1);
}
return (
<button onClick={handleClick}
style={{width:100, height:40, fontSize:20}}>
点了{count}次
</button>
)
}
效果如下
导出组件
上述代码将按钮写在了App.js中，当代码量较少的时候当然没有问题，但随着组件越来越多，这种写法会让整个项目变得混乱起来，为此，可将组件写到单独的文件里。
import { useState } from 'react';
export default function OneButton(){
const [count, setCount] = useState(0);
function handleClick(){
setCount(count + 1);
}
return (
<button onClick={handleClick}
style={{width:100, height:40, fontSize:20}}>
点了{count}次
</button>
)
}
函数OneButton和在App.js中相比，多了一个export default的修饰，表示该函数可以导出给其他组件调用。
然后修改App.js的内容，在挪走了OneButton之后，还要通过import的方式将其导入进来，如下所示。由于这个改动并未引起功能上的变化，效果与上面相同。
import Btn from './Btn.js';
function App(){
return (
<OneButton/>
);
}
export default App;
jsx
jsx相当于把html装入了js，使得前后封闭的html标签可以嵌入js代码中，很多js库都支持这种扩展语法，react亦然。例如上面的OnButton函数便是典型的jsx语法，在return后面的括号里，出现了html特有的封闭尖括号。
这段代码体现出jsx中花括号的两个用法
由于要嵌入一门编程语言，所以jsx的语法要比html更加严格，主要体现在
原文地址:https://blog.csdn.net/m0_37816922/article/details/134224132
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_1130.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
