1、项目搭建
npx create-react-app my-react-app(项目名)
cd 项目名进入项目目录
终端输入 npm start 启动项目
浏览器查看

项目搭建成功
2、JSX
JavaScript语法和HTML语法写在一起就是JSX语法
jsx只能返回一个根元素,即最外层的div,也可以换成空标签<></>

3、数据渲染
3.1插值
插值可以使用的位置:1、标签内容2、标签属性
javascript
function App() {
const divContent = "标签内容";
const divTtitle = "标签标题";
return <div title={divTtitle}>{divContent}</div>;
}
export default App;


3.2条件渲染
javascript
function App() {
const divTtitle = "标签标题";
let divContent = null;
const flag = false;
if (flag) {
divContent = <span>flag为true</span>;
} else {
divContent = <span>flag为false</span>;
}
return <div title={divTtitle}>{divContent}</div>;
}
export default App;


3.3列表渲染
列表种的key唯一值是必要的,并且不推荐使用下标为key
javascript
function App() {
const list = [
{ id: 1, name: "小吴" },
{ id: 2, name: "小李" },
{ id: 3, name: "小花" },
];
const listContent = list.map((item) => <li key={item.id}>{item.name}</li>);
return <ul>{listContent}</ul>;
}
export default App;

我们给每个列表数据之后加一条虚线,并且还要符合jsx中只有一个根元素的原则,我们可以使用空标签,但是空标签不能写属性,并且遍历是存在多个根元素,这种情况类似一个documentFragment的情况,我们就可以使用Fragment组件来完成
javascript
import { Fragment } from "react";
function App() {
const list = [
{ id: 1, name: "小吴" },
{ id: 2, name: "小李" },
{ id: 3, name: "小花" },
];
const listContent = list.map((item) => (
<Fragment>
<li key={item.id}>{item.name}</li>
<li>-------------------------</li>
</Fragment>
));
return <ul>{listContent}</ul>;
}
export default App;
4、事件处理
例如点击事件,react的事件大多数是驼峰命名的
javascript
function App() {
function handleClick(e) {
console.log("点击了按钮", e);
}
return <button onClick={handleClick}>按钮</button>;
}
export default App;

5、useState状态处理
类似于vue的响应式状态机制
javascript
import { useState } from "react";
function App() {
const [content, setContent] = useState("标签的默认内容");
function handleClick() {
setContent("新内容");
}
return (
<>
<div>
{content}
<button onClick={handleClick}>按钮</button>
</div>
</>
);
}
export default App;


5.1 对象形式的状态
javascript
import { useState } from "react";
function App() {
const [data, setData] = useState({
title: "默认标题",
content: "默认内容",
});
function handleClick() {
setData({
...data,
content: "新标题",
});
}
return (
<>
<div>
<div title={data.title}>{data.content}</div>
<button onClick={handleClick}>按钮</button>
</div>
</>
);
}
export default App;

5.2数组形式的状态
javascript
import { useState } from "react";
function App() {
const [data, setData] = useState([
{ id: 1, name: "小吴" },
{ id: 2, name: "小李" },
{ id: 3, name: "小花" },
]);
const listData = data.map((item) => <li key={item.id}>{item.name}</li>);
let id = 3;
function handleClick() {
setData([...data, { id: ++id, name: "小明" }]);
}
return (
<>
<div>
<ul>{listData}</ul>
<button onClick={handleClick}>按钮</button>
</div>
</>
);
}
export default App;


如果显示时需要过滤某个数据可以用filter
javascript
import { useState } from "react";
function App() {
const [data, setData] = useState([
{ id: 1, name: "小吴" },
{ id: 2, name: "小李" },
{ id: 3, name: "小花" },
]);
const listData = data.map((item) => <li key={item.id}>{item.name}</li>);
function handleClick() {
setData(data.filter((item) => item.id !== 2));
}
return (
<>
<div>
<ul>{listData}</ul>
<button onClick={handleClick}>按钮</button>
</div>
</>
);
}
export default App;

