react.js javascript 前端 npm 设置你的第一个React应用

目录

一、React入门

1.1 你好React

1.2 创建React

1.3 应用结构

二、总结

2.1 定义组件

2.2 组件源码

三、组件详解

注意事项

3.1 组件三部曲

3.2 组件通信 —— props 

3.3 对象数组迭代 —— map()

3.4 事件处理

3.5 钩子函数 —— useState()

初次学习最终效果：

一、React入门

1.1 你好React

熟悉核心 HTML，CSS 和 JavaScript 语言，了解终端/命令行。

        React 使用称为 JSX（JavaScript 和 XML）的 HTML-in-JavaScript 语法。熟悉 HTML 和 JavaScript 可以帮助你学习 JSX，并更好地确定应用程序中的错误是与 JavaScript 还是与 React 的更特定领域相关。

 React 是一个用于构建用户界面的库。React 不是一个框架——它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。

        为了构建 Web 应用，开发人员将 React 与 ReactDOM 结合使用。React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论，并用于解决相同的问题。当我们将 React 称为“框架”时，就是在进行口语化的理解。

1.2 创建React

为了使用 create-react-app，你需要安装 Node.js。建议你使用长期支持（LTS）版本。Node 包括 npm（Node 程序包管理器）和 npx（Node 程序包运行器）

可看该篇文章第二节:https://ycxw320.blog.csdn.net/article/details/133101428?spm=1001.2014.3001.5502

一、create-react-app ，该命令接受一个参数：即你想给自己的应用所起的名字。create-react-app 将为此应用创建一个同名的文件夹，并在其中创建所需文件。在你打算放置你的应用程序的文件夹下打开你的命令终端，并键入命令：

npx create-react-app demo-react

 这句命令创建了一个名为 moz-todo-react 的文件夹，并在此文件夹里做了如下工作：

为你的应用程序安装了一些 npm 包；写入 react 应用启动所需要的脚本文件；创建一系列结构化的子文件夹和文件，奠定应用程序的基础架构；如果你的电脑上安装了 git 的话，顺便帮你把 git 仓库也建好。

备注： 如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 --use-npm :

BASHCopy to Clipboard

npx create-react-app demo-react --use-npm

处理完成之后，你可以 cd 到 demo-react 文件夹下，然后键入 npm start 命令并回车，先前由 create-react-app 创建的脚本会启动一个地服务 localhost:3000，并打开你的默认浏览器来访问这个服务。成功启动浏览器的话，你的浏览器上会显示如下画面：

1.3 应用结构

moz-todo-react

├── README.md

├── node_modules

├── package.json

├── package-lock.json

├── .gitignore

├── public

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

└── src

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

└── serviceWorker.js

目录 src 是我们花费时间最多的地方，因为它是我们 React 应用源码存放的目录。

目录 public 包含了开发应用时浏览器会读取的文件，其中最重要的就是 index.html。React 将目录 src 中的代码嵌入这个文件，从而浏览器才能运行此文件。 index.html中的有些内容关乎 create-react-app 的运作，因此除非你知道自己在做什么样的修改，否则不建议编辑这个文件。当然，你可以修改index.html中的