Merge pull request #26 from tuantvk/master

translate vietnamese home page, header, footer

Author: ltmylinh

content/community/nav.yml

@@ -1,4 +1,4 @@
-- title: Community Resources
+- title: Nguồn cộng đồng
   items:
     - id: support
       title: Support
@@ -18,7 +18,7 @@
       title: Videos
     - id: external-resources
       title: External Resources
-- title: Tools
+- title: Công cụ
   items:
     - id: debugging-tools
       title: Debugging

content/docs/faq-ajax.md

@@ -1,24 +1,24 @@
 ---
 id: faq-ajax
-title: AJAX and APIs
+title: AJAX và APIs
 permalink: docs/faq-ajax.html
 layout: docs
 category: FAQ
 ---
 
-### How can I make an AJAX call? {#how-can-i-make-an-ajax-call}
+### Làm như nào để gọi AJAX ? {#how-can-i-make-an-ajax-call}
 
-You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+Bạn có thể sử dụng bất kỳ thư viện AJAX nào bạn thích với React. Một số thư viện phổ biến như [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), và trình duyệt tích hợp sẵn [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
 
-### Where in the component lifecycle should I make an AJAX call? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
+### Nên gọi AJAX ở đâu trong vòng đời component ? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
 
-You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved.
+Bạn nên gọi AJAX ở componentDidMount của các phương thức vòng đời [`componentDidMount`](/docs/react-component.html#mounting). Điều này để bạn có thể sử dụng `setState` để cập nhật component khi có dữ liệu được lấy.
+<!-- ### Ví dụ: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state} -->
+### Ví dụ: Sử dụng dữ liệu của AJAX xét vào state   {#example-using-ajax-results-to-set-local-state}
 
-### Example: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state}
+Component dưới đây thể hiện cách thực hiện gọi AJAX trong `componentDidMount` để xét dữ liệu vào state. 
 
-The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. 
-
-The example API returns a JSON object like this:
+Ví dụ API trả về một object JSON như sau:
 
 ```
 {

content/docs/faq-build.md

@@ -1,32 +1,32 @@
 ---
 id: faq-build
-title: Babel, JSX, and Build Steps
+title: Babel, JSX, và từng bước xây dựng
 permalink: docs/faq-build.html
 layout: docs
 category: FAQ
 ---
 
-### Do I need to use JSX with React? {#do-i-need-to-use-jsx-with-react}
+### Tôi có cần phải sử dụng JSX với React không? {#do-i-need-to-use-jsx-with-react}
 
-No! Check out ["React Without JSX"](/docs/react-without-jsx.html) to learn more.
+Không! Hãy xem thử ["React không dùng JSX"](/docs/react-without-jsx.html) để hiểu thêm.
 
-### Do I need to use ES6 (+) with React? {#do-i-need-to-use-es6--with-react}
+### Tôi có cần phải sử dụng ES6 (+) với React? {#do-i-need-to-use-es6--with-react}
 
-No! Check out ["React Without ES6"](/docs/react-without-es6.html) to learn more.
+Không! Hãy xem thử ["React không dùng ES6"](/docs/react-without-es6.html) để hiểu thêm.
 
-### How can I write comments in JSX? {#how-can-i-write-comments-in-jsx}
+### Làm như nào để tôi viết comment trong JSX ? {#how-can-i-write-comments-in-jsx}
 
 ```jsx
 <div>
-  {/* Comment goes here */}
+  {/* Comment ở đây */}
   Hello, {name}!
 </div>
 ```
 
 ```jsx
 <div>
-  {/* It also works 
-  for multi-line comments. */}
+  {/* Nó cũng hoạt động 
+  cho nhiều dòng comments. */}
   Hello, {name}! 
 </div>
 ```

content/docs/faq-styling.md

@@ -1,14 +1,14 @@
 ---
 id: faq-styling
-title: Styling and CSS
+title: Styling và CSS
 permalink: docs/faq-styling.html
 layout: docs
 category: FAQ
 ---
 
-### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components}
+### Làm thế nào tôi chèn class CSS cho components? {#how-do-i-add-css-classes-to-components}
 
-Pass a string as the `className` prop:
+Truyền tên của class cho prop là `className`:
 
 ```jsx
 render() {
@@ -32,20 +32,20 @@ render() {
 >
 >If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it.
 
-### Can I use inline styles? {#can-i-use-inline-styles}
+### Tôi có dùng được inline styles? {#can-i-use-inline-styles}
 
-Yes, see the docs on styling [here](/docs/dom-elements.html#style).
+Có, xem tài liệu styling tại [đây](/docs/dom-elements.html#style).
 
-### Are inline styles bad? {#are-inline-styles-bad}
+### Viết inline styles xấu? {#are-inline-styles-bad}
 
-CSS classes are generally better for performance than inline styles.
+Các class CSS thường sẽ có hiệu xuất tốt hơn là inline styles.
 
-### What is CSS-in-JS? {#what-is-css-in-js}
+### CSS-in-JS là gì? {#what-is-css-in-js}
 
 "CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js).
 
 _Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname).
 
-### Can I do animations in React? {#can-i-do-animations-in-react}
+### Tôi có thể dùng animations trong React? {#can-i-do-animations-in-react}
 
-React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example.
+React có thể sử dụng animations rất tốt. Xem ví dụ [React Transition Group](https://reactcommunity.org/react-transition-group/) và [React Motion](https://github.com/chenglou/react-motion).

content/docs/nav.yml

@@ -1,4 +1,4 @@
-- title: Installation
+- title: Cài đặt
   items:
     - id: getting-started
       title: Getting Started
@@ -8,7 +8,7 @@
       title: Create a New React App
     - id: cdn-links
       title: CDN Links
-- title: Main Concepts
+- title: Khái niệm chính
   isOrdered: true
   items:
     - id: hello-world
@@ -35,7 +35,7 @@
       title: Composition vs Inheritance
     - id: thinking-in-react
       title: Thinking In React
-- title: Advanced Guides
+- title: Hướng dẫn nâng cao
   items:
     - id: accessibility
       title: Accessibility
@@ -79,7 +79,7 @@
       title: Uncontrolled Components
     - id: web-components
       title: Web Components
-- title: API Reference
+- title: API Tham khảo
   items:
     - id: react-api
       title: React
@@ -123,7 +123,7 @@
         title: Tham chiếu Hooks API
       - id: hooks-faq
         title: Hooks FAQ
-- title: Contributing
+- title: Đóng góp
   items:
   - id: how-to-contribute
     title: How to Contribute
@@ -136,15 +136,15 @@
 - title: FAQ
   items:
     - id: faq-ajax
-      title: AJAX and APIs
+      title: AJAX và APIs
     - id: faq-build
       title: Babel, JSX, and Build Steps
     - id: faq-functions
       title: Passing Functions to Components
     - id: faq-state
       title: Component State
     - id: faq-styling
-      title: Styling and CSS
+      title: Styling và CSS
     - id: faq-structure
       title: File Structure
     - id: faq-versioning

content/home/examples/a-component-using-external-plugins.md

@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Component sử dụng plugins bên ngoài
 order: 3
 domid: markdown-example
 ---
 
-React allows you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React cho phép bạn giao tiếp với các thư viện và frameworks. Ví dụ này sử dụng **remarkable**, một thư viện Markdown bên ngoài, để chuyển đổi giá trị của `<textarea>` trong thời gian thực.

content/home/examples/a-simple-component.md

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Ví dụ Component
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+Các thành phần React thực hiện một phương thức `render ()` lấy dữ liệu đầu vào và trả về những gì sẽ hiển thị. Ví dụ này sử dụng cú pháp giống như XML có tên là JSX. Dữ liệu đầu vào được truyền vào thành phần có thể được truy cập bằng `render ()` qua `this.props`.
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**JSX là tùy chọn và không bắt buộc phải sử dụng React.** Hãy thử [Babel REPL](babel://es5-syntax-example) để xem mã JavaScript ban đầu được tạo bởi bước biên dịch JSX.

content/home/examples/a-stateful-component.md

@@ -4,4 +4,4 @@ order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+Ngoài việc lấy dữ liệu đầu vào (được truy cập qua `this.props`), một thành phần có thể duy trì dữ liệu trạng thái bên trong (được truy cập qua` this.state`). Khi dữ liệu trạng thái của một thành phần thay đổi, sẽ được cập nhật bằng cách gọi lại `render ()`.

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Một ứng dụng
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+Sử dụng `props` và` state`, chúng ta có thể kết hợp một ứng dụng Todo nhỏ. Ví dụ này sử dụng `state` để theo dõi danh sách các mục hiện tại cũng như văn bản mà người dùng đã nhập. Mặc dù các trình xử lý sự kiện được hiển thị cùng dòng, chúng sẽ được thu thập và triển khai bằng cách sử dụng các sự kiện.

content/home/marketing/component-based.md

@@ -3,6 +3,6 @@ title: Component-Based
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Xây dựng các component và quản lý các trạng thái của riêng chúng, sau đó kết hợp chúng để tạo các UI phức tạp.
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+Vì component logic được viết bằng JavaScript thay vì các mẫu, bạn có thể dễ dàng truyền dữ liệu phong phú qua ứng dụng của mình và tránh thao tác với DOM.