React

在不管页面内容是什么的情况下，分清每个部分是什么意思就显得十分重要

不然要借鉴都不知道要怎么copy ~

举个例子

• 比如下面这段代码

---

插入解释

1. 箭头指向的 function App() { } 这个就是整个App.js执行的函数
2. 通过最底下的 eport default App;导出

这里会有人问：导出到哪里，难道不是执行这个界面吗？

• 就如上面这段，我们可以在项目的 index.js里面找到
• 箭头所指的位置就是刚刚导出的 App 组件

---

继续刚刚的例子

3. 蓝色框里的 通过 return ()包裹住的就是我们在html里面写的样式
4. 在 react里面一个return里面可以再包裹return 只要你想
5. 通过大括号 { }我们可以动态的传入一些数据

总结目前提到的

一个react的app.js至少包括

• import React from 'react';
• function App() { }
• return ()
• eport default App;

import React from 'react'
function App() { 
     return (
     
     )
}
eport default App

---

继续刚刚的例子

6. import React, { useState } from 'react';
7. 类似如上以 import开头的 都是引入，可以引入自己创建的js，可以引入配置文件等等
8. 亮绿色框框里的

这是react里面的一个特色，是react里面自带的hook函数 9. 它可以声明一个内部状态变量，通过 setXXX来控制这个变量值，同时也可以设置默认值 10. 这里需要记住一点，这是一个格式，必须有一个 xxx 和一个 setxxx

总结目前提到的

• 设置一个内部状态变量

const [menuItems, setMenuItems] = useState(items);

• 导入一个文件或是组件或是内部配置

import React, { useState } from 'react';
import Menu from './Menu';

---

继续刚刚的例子

11. 最后一个部分
12. 在灰色的框框中
13. 我们设置了一个函数把它的结果赋值给一个变量 filterItems
14. 这段函数的意思是，如果 category === 'all'
15. 就直接将 items 赋值给menuItems
16. 如果不是就设置一个新的变量从 items 里面找到每一个 item.category === category的数据项
17. 最后将他们合起来赋值给 newItems 通过 setMenuItems(newItems);

就是如下代码

• 在这个里面我们操作的结果，最后都会在return（）里面用到
• 用来改变一些元素的初始状态

至此你已经看完一个不简单也不难的react小项目结构了，通过操作这些部分就可以很好的将之前的 html，css，js融合进来

css 依旧是在项目列表中创建css文件，并在我们前文说的 index.js中通过 import 引入

相信你已经会看了，让我们再来看一遍完整的代码看看能否看懂吧~