12.27 #2
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,16 @@ | ||
| # Web Frontend 教程 | ||
|
|
||
| 在本教程中，我们将会教你如何开发一个如下图所示日记网页程序 | ||
|
|
||
|  | ||
|
|
||
| 为了构建我们的网站，我们将使用 React 和 Redux。除此之外，由于我们希望下次打开网页还可以看到我们写过的日记，我们需要在本地储存数据，那么就要用 LocalStorage 去存储我们的数据，这是一种允许用户在浏览器中拥有一种小型数据存储的技术。 | ||
|
Member
There was a problem hiding this comment. 可以给 LocalStorage 加上链接 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage |
||
|
|
||
| 我们有许多不同的方法和框架可以用来创建相同的应用，但我喜欢 React 和 Redux，因为它们为你提供了一种非常清晰和逻辑地去处理交互、流动数据和为应用创建新功能的方式。 | ||
|
|
||
|
|
||
| 本教程包括使用许多 ES6（和JavaScript的更新版本）语法的代码。如果你对某些语法不熟悉，[此教程](http://es6-features.org/)是一个很好的参考来源。如果你对JavaScript不熟悉，[此教程](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)是一个很好的参考工具，[此教程](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash)和[此教程](https://www.codecademy.com/)是很好的学习资源。 | ||
|
Member
There was a problem hiding this comment.
Member
There was a problem hiding this comment.
|
||
|
|
||
| 首先，确保你已经安装了git并克隆了此存储库： | ||
|
|
||
| ``` | ||
| git clone https://github.com/TreeHacks/hackpack-web-frontend | ||
|
|
@@ -24,30 +24,27 @@ cd hackpack-web-frontend | |
| npm install | ||
| ``` | ||
|
|
||
| 这可能需要一些时间，安装完成后，请确保你可以通过运行以下命令来启动应用程序： | ||
|
|
||
| ``` | ||
| npm run dev | ||
| ``` | ||
|
|
||
| 这个命令会运行一个开发服务器，它会在你进行更改时自动重新加载你的应用程序。在本教程中，我们不会提到这个命令的具体内容（但如果你感兴趣的话，该应用程序正在使用 [React 热加载](https://www.youtube.com/watch?v=xsSnOQynTHs)）。 | ||
|
|
||
|
|
||
| 打开 [http://localhost:3000](http://localhost:3000)，你应该能看到一个空界面。 | ||
|
|
||
| 现在你已经成功安装并运行了应用程序，让我们开始写代码吧。 | ||
|
|
||
| 在 React 中，你的应用程序的每个部分（按钮、标题等）都可以被定义为一个 “组件“，你可以在需要的任何地方重复使用它们。 | ||
|
|
||
| Redux 本质上允许我们在应用程序中拥有一个数据集中的数据存储，我们可以通过应用程序流动数据并分派操作来修改它（稍后我们会详细介绍）。 | ||
|
|
||
| ### 构建组件 | ||
|
|
||
| 对于日记界面，我们将需要一个侧边栏和一个编辑界面组件。侧边栏将列出你的日记条目，你可以单击其中一个来进行编辑，或者创建一个新的日记条目。编辑界面将是一个纯文本输入区域。让我们进一步定义这些组件。 | ||
|
|
||
| 将位于 `src/app/components/journal/Sidebar.jsx` 中的代码，用以下代码替换： | ||
|
|
||
| ```jsx | ||
| import React from 'react'; | ||
|
|
@@ -92,12 +89,12 @@ const Sidebar = ({ | |
| export default Sidebar; | ||
| ``` | ||
|
|
||
| 声明语法定义了一个新的 React 组件。 | ||
|
|
||
| 在这里，我们硬编码了变量 `entries`，然后通过它们进行迭代，以显示每个条目的 `li` 项。 | ||
|
|
||
| 接下来，在 `src/app/components/journal/EditEntry.jsx` 中，将原本内容更改为以下代码： | ||
| ```jsx | ||
| import React from 'react'; | ||
| import _ from 'lodash'; | ||
|
|
||
|
|
@@ -126,12 +123,11 @@ const EditEntry = ({ | |
| export default EditEntry; | ||
| ``` | ||
|
|
||
| `textarea` 标签定义一个多行的文本输入控件。 文本区域中可容纳无限数量的文本。这个 `textarea` 将始终显示我们定义的 `entry` 变量的内容 `Hello world`。 | ||
|
|
||
| 当前默认显示的组件是 `src/app/components/Journal.jsx`。在该文件中，我们需要将 `Sidebar` 和 `EditEntry` 添加到 `Journal` 组件中，以便在打开网站时渲染它们。在 `Journal.jsx` 文件中，将其更改为以下代码： | ||
|
|
||
| ```jsx | ||
| import React from 'react'; | ||
| import Sidebar from './Sidebar'; | ||
| import EditEntry from './EditEntry'; | ||
|
|
@@ -153,7 +149,7 @@ export default Journal; | |
|
|
||
| 在顶部导入这两个组件，然后将它们添加到渲染的内容中。 | ||
|
|
||
| 请尝试重新打开应用程序，你会发现无法编辑 `textarea` 的内容。这是因为当其值更改时，它的值没有更新。我在那里留下了一些占位符注释，我们将在那里添加一些**操作**！现在我们将让一切真正运行起来。 | ||
|
|
||
| ### 操作！ | ||
| 在这个网站的这个迭代中，我们将支持三个操作： | ||
|
|
@@ -242,22 +238,21 @@ export const selectEntry = (id) => { | |
| } | ||
| ``` | ||
|
|
||
| 这一大段代码是什么意思呢？ | ||
|
|
||
| 我们正在定义应用程序可能发生的三种操作。我们将我们的 `entries` 存储在 `localStorage` 中。由于 `localStorage` 将我们的数据存储为字符串，当我们检索和保存数据时，我们必须使用 `JSON.parse` 和 `JSON.stringify` 在字符串和对象之间进行转换。 | ||
|
|
||
| 1. `updateEntry` 函数具有一些逻辑，根据 `id` 来保存新条目或更新现有条目。 | ||
|
|
||
| 2. `newEntry` 创建并保存存储中的新条目。 | ||
|
|
||
| 3. `selectEntry` 简单地返回所选 id。 | ||
|
|
||
| 每个操作最终都返回一个带有 `type` 和其他数据点的对象。我们的 `localStorage` 功能模拟了基本数据库的功能。通常，这些操作将调用某个 API（应用程序编程接口）以更新或检索数据。否则，这些操作可能只是传递数据，比如 `selectEntry` 通知应用程序的其余部分用户输入的一些信息。 | ||
|
|
||
| 既然我们已经定义了这些操作，让我们弄清楚如何使用这些操作并相应地更新我们的应用程序状态。 | ||
|
|
||
| 在 `src/app/reducers/index.js` 中将其原本内容更改为以下代码： | ||
|
|
||
|
|
||
| ```jsx | ||
|
|
@@ -320,15 +315,15 @@ const rootReducer = combineReducers({ | |
| export default rootReducer; | ||
| ``` | ||
|
|
||
| 这又是一大段代码。首先，我们有一些逻辑来初始化 `entries`，如果它为空或无效的话。通常情况下，你不太可能遇到任何错误，但有一些边缘情况可能导致你的 `localStorage` 对象出现问题。 | ||
|
|
||
| 然后，我们定义了 `initialState`，这是在应用程序打开时的默认状态（在任何用户交互之前）。 | ||
|
|
||
| 最后，我们定义了一个 `reducer`，它接受被 `dispatch` 的任何操作，并决定如何使用操作的数据更新状态。如果你以前没有见过 `Object.assign({}, state, { DATA })` 语法，它是将 `{ DATA }` 合并到 `state` 中的新对象中（换句话说，它返回一个带有 `{ DATA }` 的更新状态）。`reducer` 返回这个更新后的状态。然后将应用程序的状态更新为新状态。 | ||
|
|
||
| 现在，实际上动作已经 **做** 了一些事情，让我们开始向组件中添加数据和动作。 | ||
|
|
||
| 将 `src/app/containers/Journal.jsx` 中原本内容更改为以下代码： | ||
|
|
||
|
|
||
| ```jsx | ||
|
|
@@ -370,7 +365,7 @@ const JournalContainer = connect( | |
| export default JournalContainer; | ||
| ``` | ||
|
|
||
| `JournalContainer` 在这里包装了我们之前定义的 `Journal` 组件，并通过调用 `connect` 将其与 Redux 的数据存储绑定在一起。 | ||
|
|
||
| 在这里，我们还传递了两个函数：`mapStateToProps` 和 `mapDispatchToProps`。我们有这些函数来过滤我们想要传递到 `Journal` 的状态的哪些部分。 `dispatch` 函数本质上是将来自给定操作的数据发送到 reducers，这些 reducers 再次决定如何获取该数据并更新应用程序的整体状态。 | ||
|
|
||
|
|
@@ -469,24 +464,21 @@ const EditEntry = ({ | |
|
|
||
| 相比之前的硬编码变量，我们现在使用了传递下来的 `props`（状态数据和调度函数）。 | ||
|
|
||
| 现在你的应用应该是完全可用的！你可以编辑日记条目并创建新的日记条目。 | ||
|
|
||
| ### 连接到新页面 | ||
| 因为你将来可能想要添加新的页面，以下如何添加页面的方法。 | ||
|
|
||
| 在你的 `Sidebar` 组件中，在定义的末尾的 `</ul>` 后面添加 `<Link to='/about'>About</Link>`。在文件的顶部，你会看到我们已经 `import` 了 `{ Link } from 'react-router';`。添加这个后，你就可以点击该链接，它会跳转到 `/about`。你可以在 `src/app/components/about/About.jsx` 中查看该组件。 | ||
|
|
||
| ### 总结 | ||
| 你已经成功构建了一个基本的 React 和 Redux 的网站了！一开始，React 和 Redux 的学习是很困难的，所以如果你对应用程序仍然有疑问，那是很正常的。 | ||
|
|
||
| 为了巩固你的理解，这里有一些你可以添加到你的应用程序的内容： | ||
|
|
||
| - 删除功能（让用户删除一个条目） | ||
| - 在侧边栏下每个条目的列表中显示创建/编辑日期 | ||
| - 为每个条目添加标题属性，并在侧边栏中显示该标题 | ||
|
|
||
| 除此之外，你可以为这个日志应用程序添加许多功能，放弃整个日志应用程序，并使用你新获得的知识去构建完全不同的东西，通过你的操作将应用程序连接到后端服务器（而不是使用 `localStorage`）。 | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # Web Next 教程 | ||
|
|
||
| ## 入门指南 | ||
| 本教程旨在帮助你迅速上手 [Next](https://nextjs.org)，并使用 React 和 Express 制作网站。最后，你将创建一个从 [PokéApi](https://pokeapi.co/) 获取数据并属于自己的宝可梦图鉴网站！ | ||
|
|
||
| ### 什么是 NextJS？ | ||
| NextJS 是一个框架，它允许你快速开始使用 React 和服务器端代码。它带有内置功能，如路由（路由器从一个接口上收到数据包，根据数据包的目的地址进行定向并转发到另一个接口的过程）、热模块替换（允许在运行时更新各种模块，而无需进行完全刷新）、服务器端渲染（一种在用户自己的服务器上加载网站的 JavaScript 的方法）和代码分割（一种将代码拆分成多个独立文件的技术），可以提高性能，而这些功能如果自己实现可能会是一个**巨大**的痛苦。 | ||
|
|
||
|
|
||
| ### 入门 | ||
| 在本地克隆此存储库并安装依赖项： | ||
|
|
||
| ``` | ||
| git clone https://github.com/TreeHacks/hackpack-web-next.git | ||
| ``` | ||
|
|
||
| 如果想启动，请运行以下命令： | ||
|
|
||
|
|
||
| ``` | ||
| npm install | ||
| ``` | ||
|
|
||
| 你可以通过访问 http://localhost:3000 打开网站。请注意，现在的终端将监视代码的更改并自动重新编译代码。尝试更改 `pages/index.js` 中的一些文本，网站会立即更改。这被称为 [热模块替换 (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)！ | ||
|
|
||
|  | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
改成 Rect：Web 前端开发教程