React #52
Open
React #52
Conversation
This file contains 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
|
Review的时候仔细看看哪里的 |
|
貌似是对的 |
|
ok |
Robin-zero
force-pushed
the
translate-React
branch
from
6d3c998
to
709c198
Compare
S1ngS1ng
suggested changes
Aug 7, 2018
| "For instance, because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: <code>{ 'this is treated as JavaScript code' }</code>. Keep this in mind, since it's used in several future challenges.", | ||
| "However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process. For your convenience, it's already added behind the scenes for these challenges. If you happen to write syntactically invalid JSX, you will see the first test in these challenges fail.", | ||
| "It's worth noting that under the hood the challenges are calling <code>ReactDOM.render(JSX, document.getElementById('root'))</code>. This function call is what places your JSX into React's own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.", | ||
| "<strong>简介：</strong>React是由 Facebook 创建和维护的开源视图库。它是渲染当代 Web 应用程序用户界面（UI）的绝佳工具。", |
| "It's worth noting that under the hood the challenges are calling <code>ReactDOM.render(JSX, document.getElementById('root'))</code>. This function call is what places your JSX into React's own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.", | ||
| "<strong>简介：</strong>React是由 Facebook 创建和维护的开源视图库。它是渲染当代 Web 应用程序用户界面（UI）的绝佳工具。", | ||
| "React 使用名为 JSX 的 JavaScript 语法扩展，允许您直接在 JavaScript 中编写 HTML。这有几个好处。它允许您在 HTML 中使用 JavaScript 的完整程序功能，并有助于保持代码的可读性。在大多数情况下，JSX 类似于您已经学过的 HTML，但是在这些挑战中将会涉及一些关键差异。", | ||
| "例如，因为 JSX 是 JavaScript 的语法扩展，所以您实际上可以直接在 JSX 中编写 JavaScript。要做到这一点，您只需在花括号中包含您希望被视为 JavaScript 的代码：<code>{“这被视为 JavaScript 代码”}</code>。记住这一点，因为它将用于接下来的几个挑战。", |
There was a problem hiding this comment.
记住这一点，因为它将用于接下来的几个挑战。 =>
请牢记这个写法，你将会在接下来的挑战中使用。
| "<strong>简介：</strong>React是由 Facebook 创建和维护的开源视图库。它是渲染当代 Web 应用程序用户界面（UI）的绝佳工具。", | ||
| "React 使用名为 JSX 的 JavaScript 语法扩展，允许您直接在 JavaScript 中编写 HTML。这有几个好处。它允许您在 HTML 中使用 JavaScript 的完整程序功能，并有助于保持代码的可读性。在大多数情况下，JSX 类似于您已经学过的 HTML，但是在这些挑战中将会涉及一些关键差异。", | ||
| "例如，因为 JSX 是 JavaScript 的语法扩展，所以您实际上可以直接在 JSX 中编写 JavaScript。要做到这一点，您只需在花括号中包含您希望被视为 JavaScript 的代码：<code>{“这被视为 JavaScript 代码”}</code>。记住这一点，因为它将用于接下来的几个挑战。", | ||
| "但是，由于 JSX 不是有效的 JavaScript，因此必须将 JSX 代码编译为 JavaScript。在这个过程中，转换器 Babel 是一个很受欢迎的工具。为了您的方便，它已经添加在了这些挑战的后台。如果您碰巧编写的 JSX 语法无效，您将看到这些挑战中的第一个测试失败。", |
There was a problem hiding this comment.
由于 JSX 不是有效的 JavaScript， =>
由于浏览器不能解析 JSX，
为了您的方便，它已经添加在了这些挑战的后台。 =>
后续挑战已经在后台引入了 Babel，你可以直接写 JSX 代码。
如果您碰巧编写的 JSX 语法无效，您将看到这些挑战中的第一个测试失败。 =>
如果你的代码不符合 JSX 语法，那么挑战中的第一个测试就不会通过。
| "<hr>", | ||
| "<strong>Instructions:</strong> The current code uses JSX to assign a <code>div</code> element to the constant <code>JSX</code>. Replace the <code>div</code> with an <code>h1</code> element and add the text <code>Hello JSX!</code> inside it." | ||
| "<strong>说明：</strong>当前代码使用 JSX 将<code>div</code>元素分配给常量<code>JSX</code>。将<code>div</code>替换为<code>h1</code>元素，并在其中添加文本<code>Hello JSX!</code>。" |
| "Here's an example:", | ||
| "<b>Valid JSX:</b>", | ||
| "上一个挑战是 JSX 的一个简单示例，但 JSX 也可以表示更复杂的 HTML。", | ||
| "关于嵌套的 JSX，你需要知道的一件重要的事情，那就是是它必须返回单个元素。", |
| "<blockquote>const Welcome = (props) => <h1>Hello, {props.user}!</h1></blockquote>", | ||
| "It is standard to call this value <code>props</code> and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.", | ||
| "调用<code>props</code>这个值是标准的，当处理无状态函数组件时，您基本上可以将其视为返回 JSX 的函数的参数，您可以在函数体中访问参数的值。对于类组件，您将看到这有点不同。", |
There was a problem hiding this comment.
标准的 => 常见做法
您可以在函数体中访问参数的值。对于类组件，您将看到这有点不同。 =>
这样，你就可以在函数体内访问该值。但对于类组件，访问方式会略有不同。
| "<hr>", | ||
| "There are <code>Calendar</code> and <code>CurrentDate</code> components in the code editor. When rendering <code>CurrentDate</code> from the <code>Calendar</code> component, pass in a property of <code>date</code> assigned to the current date from JavaScript's <code>Date</code> object. Then access this <code>prop</code> in the <code>CurrentDate</code> component, showing its value within the <code>p</code> tags. Note that for <code>prop</code> values to be evaluated as JavaScript, they must be enclosed in curly brackets, for instance <code>date={Date()}</code>." | ||
| "代码编辑器中有<code>Calendar</code>和<code>CurrentDate</code>组件。从<code>Calendar</code>组件渲染<code>CurrentDate</code>时，从JavaScript的<code>Date</code>对象分配当前日期，并将其作为<code>date</code>属性传入。然后访问<code>CurrentDate</code>组件的<code>prop</code>，并在<code>p</code>标签中显示其值。请注意，要将<code>prop</code>的值视为JavaScript，必须将它们括在大括号中，例如<code>date={Date()}</code>。" |
| "<blockquote><ParentComponent><br> <ChildComponent colors={[\"green\", \"blue\", \"red\"]} /><br></ParentComponent></blockquote>", | ||
| "The child component then has access to the array property <code>colors</code>. Array methods such as <code>join()</code> can be used when accessing the property.", | ||
| "然后子组件可以访问数组属性<code>colors</code>。访问属性时可以使用<code>join()</code>等数组方法。", |
There was a problem hiding this comment.
然后子组件可以访问数组属性 => 这样，子组件就可以……
| " <code> <p>green, blue, red</p></code>", | ||
| "Later, we will learn about other common methods to render arrays of data in React.", | ||
| "稍后，我们将了解在 React 中渲染数据数组的其他常用方法。", |
| "<hr>", | ||
| "There are <code>List</code> and <code>ToDo</code> components in the code editor. When rendering each <code>List</code> from the <code>ToDo</code> component, pass in a <code>tasks</code> property assigned to an array of to-do tasks, for example <code>[\"walk dog\", \"workout\"]</code>. Then access this <code>tasks</code> array in the <code>List</code> component, showing its value within the <code>p</code> element. Use <code>join(\", \")</code> to display the <code>props.tasks</code>array in the <code>p</code> element as a comma separated list. Today's list should have at least 2 tasks and tomorrow's should have at least 3 tasks." | ||
| "代码编辑器中有<code>List</code>和<code>ToDo</code>组件。在<code>ToDo</code>组件中渲染每个<code>List</code>时，传入<code>tasks</code>属性并将其分配给待办任务数组，例如<code>[\"walk dog\", \"workout\"]</code>。然后访问<code>List</code>组件中的<code>tasks</code>数组，在<code>p</code>元素中显示其值。使用<code>join(\", \")</code>把<code>props.tasks</code>数组作为逗号分隔列表显示在<code>p</code>元素中。今天的列表应该至少有2个任务，明天应该至少有3个任务。" |
S1ngS1ng
added
the
need update
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.