react 框架

这里在一个特定的目录下运行命令行然后输入，就会在当前的路径下安装一个项目。这个项目的名字就叫jrrg-react-study（这个创建只是为了测试用的），我们就可以对这个项目进行编辑（react相关的包已经在里面了）。在我们进行任何的编辑之前，react框架就已经在里面了。如果我们在对应的目录下运行命令行并输入npm run start，就会发现会自动导入一个网页，如下

我们也可以在VS code中打开jrrg-react-study，然后在终端中输入npm run start

dependencies说明我的代码的依赖，别人拿到源代码之后就可以对着安装，scripts就是翻译我们输入终端里的东西

下面以jrrg_react_study为例说明函数的功能
在这个文件夹中，程序的入口是index.js；在这个文件的导库中，有一行import App from './App';，其中第一个App是文件App.js中的function App，第二个App是文件App.js（所以我们可以更改函数名和文件名，只要在index.js中导入对应的库就好了）。注意，我们不需要更改index.js，我们需要更改的是App.js
在App.js中写好代码之后，我们直接在终端中输入npm run start就可以运行了。接下来解析App.js中的各个部分

• 函数function App，已经在之前解析过了。这里注意一下这个函数的返回对象的类型是什么就好了

• className="App"是在同一个文件下有一个css文件（假设文件名为my_css.css），其中的代码如下

  .App {
    background-color: lightblue;
    text-align: center;
  }
  

  那么我们在App.js中引入import './my_css.css';，就可以设置样式了。当然如果找不到定义的话，就什么也不做（编译器并不会报错）

• <ul></ul>是一个无序列表标签

• {list.map(item => <li key={item.id}>{item.name}营业收入：{item.income}亿元</li>)}这句代码中的>表示的是内容从这里开始，前面的item.id就是用来给映射定位的

• <button onClick={clickHandler}>点击触发事件</button>这行代码中不用传递参数e是因为react会帮助我们传递；<button onClick={(e) => clickHandlerWithArgs(e, 1)}>自定义参数事件</button>这行代码中需要传递参数e是因为我们写成了箭头函数的形式（为了传递第二个参数），而react不会帮箭头函数传递参数e，所以需要显式传递，如果我们不想使用箭头函数的话可以写成<button onClick={clickHandlerWithArgs.bind(null, 1)}>自定义参数事件</button>，这个样子react也会自动帮我们传递参数e

• import { useState } from "react";这句代码加花括号的原因是它是一个命名导出。React 的模块定义如下（简化）

  export const useState = () => { /* ... */ };
  export const useEffect = () => { /* ... */ };
  export default React; // 默认导出 React 对象
  

  所以需要加花括号。如果不加花括号的话，是会报错的

• const clickHandler = () =>是箭头函数，箭头函数的格式就是这个样子，括号当中写参数。与function相比，箭头函数会自动绑定this，而function必须手动绑定this。但是this只在类组件里面才有，所以用在函数里面的时候，两者是等价的

• <p>props.text = {props.text}</p>这行代码中，加了花括号的表示是一个JS表达式，所以编译器可以区分前者是打在屏幕上的字符串，而后者是来自父组件的信息变量