web基础学习

1、安装

1.1  前序

React 从一开始就被设计为可以被渐进地采用，你可以根据需要或多或少地使用 React。无论你只是想体验一下 React，并为 HTML 页面添加一些交互性，还是创建一个复杂的 React

1.1.1、In this chapter

如何将 React 添加到 HTML 页面中

如何新建一个独立的 React 项目

如何设置编辑器

如何安装 React 开发者工具

1.1.2、试用 React

无需安装任何东西就可以试用 React。请试着修改以下代码!

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}
 
export default function App() {
  return <Greeting name="world" />
}

我们在所有文档中使用代码沙盒（sandbox）作为教学的辅助工具。代码沙盒可以帮助你熟悉 React 的工作原理，并帮助你考察 React 是否适用。除了 React 文档外，还有许多支持 React 的第三方在线代码沙盒，例如：CodeSandbox  、Stackblitz 或 CodePen。

1.1.3、在本地试用 React，在页面中添加 React

要在本地计算机上试用 React 的话，打开一个html网页。然后在编辑中打开并编辑，在浏览器中查看效果。如果你手头已经有一个能运行的网站了，只想利用 React 添加一点儿功能的话，看后续介绍

1.1.4、创建一个 React 项目

如果你已经准备利用 React 创建一个独立的项目，那么你可以设置一个最小的工具链，让开发体验更愉快。你还可以使用现成的框架，直接开箱即用。

1.1.5、下一步

从哪里开始学习取决于你喜欢什么样的学习方式、需要完成的目标以及你接下来的打算！为什么不从阅读 （我们的入门教程）开始呢？或者你可以跳转到 描述 UI
章节拿更多示例练练手并一步步地学习每个知识点。记住，没有那种学习 React 的路径是错误的！

1.2、创建一个 React 新项目

如果你正在学习 React 或者考虑将其应用到现有的项目中，你可以利用script 标签将 React添加到任何 HTML 页面，来快速开启学习之旅。如果你的项目需要许多组件和许多文件，那就需要考虑以下方式了！

1.2.1、选择你自己的冒险方式

React 是一个工具库，帮你以组件的方式拆解并组织 UI 代码。React 不负责路由（routing）或数据管理。对于这些功能，你需要使用第三方工具库或实现你自己的解决方案。这意味着创建一个新的 React 项目有多种方式可以选择：使用 最小设置的工具链， 根据需要为项目添加功能。使用 功能完备的框架，常用功能都已内置。无论你是刚入门，想要构建一个大项目，还是想要建立自己的工具链，本指南都能为你指明道路。

1.3、React 工具链入门

如果你是刚刚开始接触 React，我们建议你使用 create React App ，这是尝试 React 功能的最流行的方式，也是构建新的单页客户端应用的最好方法。Create React App 是一个专为 React 配置的功能齐备的工具链。工具链有助于：

创建大量的文件和组件

使用来自 npm 的第三方工具库

及早检测到常见错误

开发时能实时编辑 CSS 和 JS

针对生产环境优化输出的文件

你仅需一条命令就可以在终端（命令行）中利用 Create React App 创建一个新项目！（前提是确保安装了Node.js ！）

npx create-react-app my-app

现在就可以通过以下命令运行你的应用程序了：

cd my-app
npm start

Create React App 并不处理后端逻辑或数据库操作，它只是创建了一个针对前端的构建管道。这意味着你可以为其对接任何后端。但是，如果你寻找的是对类似路由（routing）以及服务器端业务逻辑功能的支持的话，请接着往下看！

1.4、同时使用 React 和框架

如果你希望创建一个更大的、可用于生产环境的项目的话，
Next.js 是一个非常好的起点。Next.js 是一个流行的、基于 React 构建的轻量级框架，用于构建静态和服务器端渲染的应用程序。该框架自带了路由（routing）、样式表（ styling）和服务器端渲染（server-side rendering）等功能，可以让你的项目快速开始并运行起来。

请查看 Next.js 的官方指导：使用 Next.js 构建项目

1.5、其他选项

 Gatsby 能帮你基于 React 和 GraphQL 生成静态网站。
 Razzle是一个支持服务器端渲染（server-rendering）的框架，无需任何配置，但比 Next.js 提供了更多的灵活性。

1.6、自定义工具链

你可能更喜欢创建并配置自己的工具链。一个 JavaScript 构建工具链通常包含以下部分：

一个 软件包管理器—用于安装、更新和管理第三方软件包。
 Yarn 和 
 npm 就是两个比较流行的软件包管理器。

一个 打包工具（bundler）—将您编写的模块化代码打成小包以优化加载时间。Webpack
、Snowpack、Parcel 就是几个比较流行的打包工具。

一个 编译器—将你使用新语法编写的 JavaScript 代码转换成能被老版本的浏览器执行的代码。Babel 就是这类工具中的一个代表。

在较大的项目中，你可能还需要一个工具来管理单一仓库中的多个软件包。Nx
就是此类工具中的一个代表。

如果你喜欢葱头开始创建自己的 JavaScript 工具链的话，请 查看这份指南
来了解如何自行实现 Create React App 中的功能。

2、为网站添加 React

React 从一开始就被设计为支持渐进式采用，你可以根据需要或多或少地使用 React。无论是微前端（micro-frontends）、现有系统，还是只是尝试一下 React，都可以通过添加几行代码就能为页面添加交互式的 React 组件，并且无需使用构建工具！

2.1、第一步：在页面中添加一个 HTML 元素

在要编辑的 HTML 页面中添加一个 HTML 元素，例如带有唯一 id 属性的空的

  <div id="component-goes-here">div>