App 组件在 import 所需资源之后，我们定义了一个名为 App 的函数，尽管大部分 JavaScript 社区推崇使用camel命名法，如：“helloWorld”。但React组件使用pascal变量命名法，如“HelloWorld”，来帮助用户辨认一个JSX元素是React组件而非普通的HTML标签。如果您将函数名“App”改为“app”，您的浏览器会显示错误。(时间不够，先翻译到这里了)
-After the imports, we have a function named App. Whereas most of the JavaScript community prefers camel-case names like helloWorld, React components use pascal-case variable names, like HelloWorld, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the App function to app, your browser would show you an error.
在 import 所需资源之后，我们定义了一个名为 App 的函数，尽管大部分 JavaScript 社区推崇使用驼峰式命名法，如：“helloWorld”。但 React 组件使用帕斯卡命名法，如 “HelloWorld”，来帮助用户辨认一个 JSX 元素是 React 组件而非普通的 HTML 标签。如果您将函数名 “App” 改为 “app”，您的浏览器会显示错误。
让我们进一步看下App方法。
@@ -266,13 +262,11 @@ import './App.css';App方法返回一个JSX表达式，这个表达式定义了浏览器最终要渲染的DOM。
-表达式中的元素就像以前写的HTML一样，都拥有属性。
- -Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value". On line 3, the opening <div> tag has a className attribute. This the same as the class attribute in HTML, but because JSX is JavaScript, we can't use the word class – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.
表达式中的元素就像以前写的HTML一样，都拥有属性，并且遵循 attribute="value" 的模式。 在第三行，开始标签 <div> 有着 className 属性。 这个属性与在HTML中的 class 属性相同，但是由于JSX就是JavaScript, 我们不能使用 class 属性 - 这个是关键字，意味着JavaScript已经用它执行其它任务，使用 class 属性将会在我们的代码中产生冲突。由于同样的原因，一些其它的HTML属性在JSX中也有着不同的书写方式，当我们碰到它们时，我们将会详述。
Take a moment to change the <p> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the "Learn React" link will be gone.
把第6行的 <p> 标签内容改为 "Hello, world!" 并保存文件。你会发现这个改变也会立即在浏览器的http://localhost:3000 中同步渲染。 现在删掉 <a> 标签并保存，"Learn React"链接也会同样被删除。
Your App component should now look like this:
你的 App 组件应该如下所示:
function App() {
return (
@@ -287,13 +281,13 @@ import './App.css';
);
}
-At the very bottom of the App.js file, the statement export default App makes our App component available to other modules.
在 App.js 文件的最底部, export default App 语句使得 App 组件能被其它模块使用.
Let’s open src/index.js, because that's where the App component is being used. This file is the entry point for our app, and it initially looks like this:
现在让我们打开 src/index.js, 因为这也是 App 组件被用到的地方。 这个文件是我们 app 的入口点，在一开始它如下所示
import React from 'react';
import ReactDOM from 'react-dom';
@@ -308,24 +302,25 @@ ReactDOM.render(<App />, document.getElementById('root'));
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
-As with App.js, the file starts by importing all the JS modules and other assets it needs to run. src/index.css holds global styles that are applied to our whole app. We can also see our App component imported here; it is made available for import thanks to the export statement at the bottom of App.js.
就像 App.js 一样,这个文件一开始 import 了所有的 JS 模块和其它运行所需要的资源。src/index.css定义了运用于整个 app 的 global style。 我们可以看到我们的 App 组件也被 imported 了， 这是在 App.js 底部的语句让 import App 变得可行。
Line 7 calls React’s ReactDOM.render() function with two arguments:
第七行调用 React 的 ReactDOM.render() 函数，并传入两个参数：
<App /> in this case.root. If you look inside public/index.html, you'll see that this is a <div> element just inside the <body>.<App /> .root 标签的元素。 让我们看一下 public/index.html 的代码， 可以看到这有一个 <div> 元素 在 <body> 里。 All of this tells React that we want to render our React application with the App component as the root, or first component.
上述所有都告诉 React 我们想把 App 组件作为 root 或者第一个组件来渲染我们的 React App。
Note: In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.
注意: 在 JSX 中， React 组件和 HTML 元素必须有 closing slashes，如 <App />， 如果我们写 <App> 或者 <img> 将会报错。
Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.
+Service workers 能让我们的 App 离线运行，但它不在本篇文章的范围中，您可以删除第5行和第9到12行。
-Your final index.js file should look like this:
您最终的 index.js 文件应该如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
@@ -336,17 +331,17 @@ ReactDOM.render(<App />, document.getElementById('root'));
Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).
+接下来，我们将使用一些 JavaScript 的技巧来让我们在 React 中编辑组件以及处理数据更加顺手。我们将讨论如何在 JSX 中 使用 variables， 并且介绍 props， props是我们用来往组件里传入数据的一种方法， 传入之后我们可以用 variable 访问传入的变量。
Back in App.js, let’s focus on line 9:
回到 App.js, 让我们看一下第9行:
<img src={logo} className="App-logo" alt="logo" />
-Here, the <img /> tag's src attribute value is in curly braces. This is how JSX recognizes variables. React will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.
可以看到， <img /> 标签的 src 属性只值是在大括号中的 -- {logo}. 这是JSX 识别变量的方式。 React 将会识别 {logo}， 知道您在指在我们 app 第二行引入的 logo， 然后 React 会读取这个文件它并渲染。
Let's try making a variable of our own. Before the return statement of App, add const subject = 'React';. Your App component should now look like this:
让我们试着设置一个我们自己的变量，在 App return 之前， 添加 const subject = 'React';。 您的代码现在应该如下所示：
function App() {
const subject = "React";
@@ -362,7 +357,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
);
}
-Change line 8 to use our subject variable instead of the word "world", like this:
把第8行的 "world" 替换成我们自己的变量 subject ，如下所示：
function App() {
const subject = "React";
@@ -378,19 +373,19 @@ ReactDOM.render(<App />, document.getElementById('root'));
);
}
-When you save, your browser should display "Hello, React!" instead of "Hello, world!"
+当我们保存时， 浏览器将会显示 "Hello, React!"， 而不是 "Hello, world!"
-Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.
+变量十分方便，但是我们没有利用到 React 的特性， 接下来我们将介绍 Props。
A prop is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — prop="value". Let’s open index.js and give our <App/> call its first prop.
prop 是任何传入 React 组件的数据。Props 写在组件中，并且像 HTML 属性一样写成 prop="value"。 让我们打开 index.js 并且为我们的 <App/> 添加第一个 prop。
Add a prop of subject to the <App/> component call, with a value of Clarice. When you are done, your code should look something like this:
为 <App/> 组件添加一个叫 subject 并有着 Clarice 值的 prop。 当完成之后，您的代码应如下所示：
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
-Back in App.js, let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):
回到 App.js， 代码应该如下所示 （return 中的内容省略了）
function App() {
const subject = "React";
@@ -399,7 +394,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
);
}
-Change the signature of the App function so that it accepts props as a parameter. Just like any other parameter, you can put props in a console.log() to read it out to your browser's console. Go ahead and do that after your subject constant but before the return statement, like so:
改变 App 的函数签名，让它接收 props 作为一个参数。 就像其它参数一样， 您可以把 props 放在 console.log() 中，让其在浏览器打印出来。 把它放在您的 subject 之后，以及 return 之前， 您的代码应如下所示：
function App(props) {
const subject = "React";
@@ -409,13 +404,13 @@ ReactDOM.render(<App />, document.getElementById('root'));
);
}
-Save your file and check your browser's JavaScript console. You should see something like this logged:
+保存您的文件并检查您浏览器中的 JavaScript Console， 您将会发现如下所示的语句：
Object { subject: "Clarice" }
-The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.
对象的 subject 属性与我们放入 App 函数签名的 prop 相对应，并且 Clarice 字符串与它的值相对应， 在 React 中的组件 props 总是用这种方式传入object 中。
Now that subject is one of our props, let's utilize it in App.js. Change the subject constant so that, instead of defining it as the string React, you are reading the value of props.subject. You can also delete your console.log() if you want.
现在 subject 是我们的 props 之一了， 让我们在 App.js 中使用它。 用 props.subject 替代原本的 React 字符串， 如果你想的话，也可以删除 console.log()， 您的代码将如下所示：
function App(props) {
const subject = props.subject;
@@ -424,20 +419,21 @@ ReactDOM.render(<App />, document.getElementById('root'));
);
}
-When you save, the the app should now greet you with "Hello, Clarice!". If you return to index.js, edit the value of subject, and save, your text will change.
当您保存之后， app 应该会输出 "Hello, Clarice!"。 如果您回到 index.js， 并且修改 subject 的值并保存， 您输出的字也会随之改变。
This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.
+以上就是我们对 React 的初步认识， 包括如何在本地下载它， 创建一个初始 app， 以及一些基本的操作。 在下篇文章，我们将会开始创建我们的第一个 app -- 一个任务清单。在我们开始下篇文章之前，让我们先复习下我们现在所学的。
-In React:
+在 React 中:
PascalCase.{so}.class in HTML translates to className in JSX. Note that multi-word attributes are camel-cased.PascalCase 也就是帕斯卡命名法命名的。{so} class 会在 JSX 中转译为 className。 注意这些属性都是驼峰式命名的。{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
-- cgit v1.2.3-54-g00ecf