React基础入门
文章目录
-
- 创建项目
- 组件和事件
- 更新状态
- 导出组件
- jsx
react是目前最流行的前端框架，几乎也不用太介绍了。
创建项目
首先下载node.js，安装成功后，最好换成国内的源
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';
然后通过useState更新按钮组件
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中，当代码量较少的时候当然没有问题，但随着组件越来越多，这种写法会让整个项目变得混乱起来，为此，可将组件写到单独的文件里。
在App.js的同级目录下新建Btn.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中花括号的两个用法
- 单花括号，可调用js中的变量
- 双花括号，可用于设置css样式
由于要嵌入一门编程语言，所以jsx的语法要比html更加严格，主要体现在
- 每个组件只能返回一个根元素
- 标签必须闭合
- 命名避免与js发生冲突