From 1bacaa531c9c8583b10eecf213d778153e98257e Mon Sep 17 00:00:00 2001
From: TuanTV <tuanhanhphuc123@gmail.com>
Date: Thu, 11 Apr 2019 17:59:30 +0700
Subject: [PATCH 1/6] translate vietnamese home page, header, footer

---
 content/community/nav.yml                        |  4 ++--
 content/docs/nav.yml                             | 10 +++++-----
 .../a-component-using-external-plugins.md        |  4 ++--
 content/home/examples/a-simple-component.md      |  6 +++---
 content/home/examples/a-stateful-component.md    |  2 +-
 content/home/examples/an-application.md          |  4 ++--
 content/home/marketing/component-based.md        |  4 ++--
 content/home/marketing/declarative.md            |  4 ++--
 .../home/marketing/learn-once-write-anywhere.md  |  6 +++---
 src/components/LayoutFooter/Footer.js            | 16 ++++++++--------
 src/components/LayoutHeader/DocSearch.js         |  2 +-
 src/components/LayoutHeader/Header.js            |  9 +++++----
 .../TitleAndMetaTags/TitleAndMetaTags.js         |  2 +-
 src/pages/404.js                                 | 10 +++++-----
 src/pages/index.js                               | 12 ++++++------
 15 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/content/community/nav.yml b/content/community/nav.yml
index 0f59b80a0..44d1b29a6 100644
--- a/content/community/nav.yml
+++ b/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
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 2eafe8803..eff955a4e 100644
--- a/content/docs/nav.yml
+++ b/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
   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
diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index 1c50c8718..1fc156ecd 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Một thành phần 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.
\ No newline at end of file
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index d791856d4..150f2aac4 100644
--- a/content/home/examples/a-simple-component.md
+++ b/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.
\ No newline at end of file
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index a68ab0a51..38d4513f2 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/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 ()`.
\ No newline at end of file
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index 227d0621b..8212005ea 100644
--- a/content/home/examples/an-application.md
+++ b/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.
\ No newline at end of file
diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index aeb3c4de2..2dcd3a0ac 100644
--- a/content/home/marketing/component-based.md
+++ b/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 thành phần đóng gói quản lý 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ì logic thành phần đượ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.
\ No newline at end of file
diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index c3b651902..de6092e48 100644
--- a/content/home/marketing/declarative.md
+++ b/content/home/marketing/declarative.md
@@ -3,6 +3,6 @@ title: Declarative
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+React giúp tạo UI tương tác đơn giản. Thiết kế các khung nhìn đơn giản cho từng trạng thái trong ứng dụng của bạn và React sẽ cập nhật và thông dịch đúng các thành phần phù hợp khi dữ liệu của bạn thay đổi.
 
-Declarative views make your code more predictable and easier to debug.
+Các câu khai báo làm cho mã của bạn dễ sử dụng hơn và dễ tìm lỗi hơn.
diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md
index 009edf5bc..d5248d0b3 100644
--- a/content/home/marketing/learn-once-write-anywhere.md
+++ b/content/home/marketing/learn-once-write-anywhere.md
@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Học một lần, Viết mọi nơi
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+Chúng tôi không đưa ra các giả định về phần kĩ năng công nghệ của bạn, vì vậy bạn có thể phát triển các tính năng mới trong React mà không cần viết lại mã hiện có.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React cũng có thể thông dịch trên máy chủ bằng Node và xây dụng ứng dụng di động bằng cách sử dụng [React Native](https://facebook.github.io/react-native/).
\ No newline at end of file
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index 5e571d971..1eacc90cc 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -60,7 +60,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Docs</MetaTitle>
+            <MetaTitle onDark={true}>Tài liệu</MetaTitle>
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
@@ -73,7 +73,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             })}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Channels</MetaTitle>
+            <MetaTitle onDark={true}>Kênh</MetaTitle>
             <ExternalFooterLink
               href="https://github.com/facebook/react"
               target="_blank"
@@ -90,7 +90,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               href="https://discuss.reactjs.org"
               target="_blank"
               rel="noopener">
-              Discussion Forum
+              Diễn đàn thảo luận
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://discord.gg/0ZcbPKXt5bZjGY5n"
@@ -102,7 +102,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               href="https://dev.to/t/react"
               target="_blank"
               rel="noopener">
-              DEV Community
+              Cộng đồng DEV
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://www.facebook.com/react"
@@ -118,7 +118,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             </ExternalFooterLink>
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>Cộng đồng</MetaTitle>
             {sectionListCommunity.map(section => (
               <FooterLink
                 to={`/community/${section.items[0].id}.html`}
@@ -128,11 +128,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             ))}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>More</MetaTitle>
-            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
+            <MetaTitle onDark={true}>Thông tin thêm</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">Hướng dẫn</FooterLink>
             <FooterLink to="/blog/">Blog</FooterLink>
             <FooterLink to="/acknowledgements.html">
-              Acknowledgements
+              Lời cảm ơn
             </FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index f9827fc51..2db7b5e6f 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -97,7 +97,7 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search"
+          placeholder="Tìm kiếm"
           aria-label="Search docs"
         />
       </form>
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index e0a285e84..e02ba45a4 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -122,12 +122,12 @@ const Header = ({location}: {location: Location}) => (
           }}>
           <HeaderLink
             isActive={location.pathname.includes('/docs/')}
-            title="Docs"
+            title="Tài liệu"
             to="/docs/getting-started.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/tutorial/')}
-            title="Tutorial"
+            title="Hướng dẫn"
             to="/tutorial/tutorial.html"
           />
           <HeaderLink
@@ -137,7 +137,8 @@ const Header = ({location}: {location: Location}) => (
           />
           <HeaderLink
             isActive={location.pathname.includes('/community/')}
-            title="Community"
+            title="Dev"
+            // Community => "Cộng đồng" in Vietnamese but error layout when change it!
             to="/community/support.html"
           />
         </nav>
@@ -209,7 +210,7 @@ const Header = ({location}: {location: Location}) => (
                   display: 'none',
                 },
               }}>
-              Languages
+              Ngôn ngữ
             </span>
           </Link>
           <a
diff --git a/src/components/TitleAndMetaTags/TitleAndMetaTags.js b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
index 37dc325bf..36acf5aa0 100644
--- a/src/components/TitleAndMetaTags/TitleAndMetaTags.js
+++ b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
@@ -8,7 +8,7 @@
 import Helmet from 'react-helmet';
 import React from 'react';
 
-const defaultDescription = 'A JavaScript library for building user interfaces';
+const defaultDescription = 'Một thư viện JavaScript xây dựng giao diện người dùng';
 
 type Props = {
   title: string,
diff --git a/src/pages/404.js b/src/pages/404.js
index b5977ce62..0b983e408 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -21,13 +21,13 @@ const PageNotFound = ({location}: Props) => (
     <Container>
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
-          <Header>Page Not Found</Header>
-          <TitleAndMetaTags title="React - Page Not Found" />
+          <Header>Không tìm thấy trang</Header>
+          <TitleAndMetaTags title="React - Không tìm thấy trang" />
           <div css={sharedStyles.markdown}>
-            <p>We couldn't find what you were looking for.</p>
+            <p>Chúng tôi không thể tìm thấy trang bạn đang tìm kiếm.</p>
             <p>
-              Please contact the owner of the site that linked you to the
-              original URL and let them know their link is broken.
+              Vui lòng liên hệ với chủ sở hữu của trang web đã liên kết với 
+              URL gốc và cho họ biết liên kết của họ bị hỏng.
             </p>
           </div>
         </div>
diff --git a/src/pages/index.js b/src/pages/index.js
index 790efd439..acd8e6226 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -50,7 +50,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; Một thư viện JavaScript xây dựng giao diện người dùng"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -133,7 +133,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    Một thư viện JavaScript xây dựng giao diện người dùng
                   </p>
                   <Flex
                     valign="center"
@@ -148,12 +148,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Bắt đầu
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Làm theo hướng dẫn
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -285,12 +285,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Bắt đầu
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Làm theo hướng dẫn
                   </ButtonLink>
                 </CtaItem>
               </Flex>

From d14d126f8e08fdc5e1014bf6991c73bbac09d1cb Mon Sep 17 00:00:00 2001
From: TuanTV <tuanhanhphuc123@gmail.com>
Date: Thu, 11 Apr 2019 18:13:56 +0700
Subject: [PATCH 2/6] small fix content

---
 content/docs/nav.yml                                        | 2 +-
 content/home/examples/a-component-using-external-plugins.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index eff955a4e..26480cb23 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -8,7 +8,7 @@
       title: Create a New React App
     - id: cdn-links
       title: CDN Links
-- title: Khái niệm
+- title: Khái niệm chính
   isOrdered: true
   items:
     - id: hello-world
diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index 1fc156ecd..f5f666378 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,5 +1,5 @@
 ---
-title: Một thành phần sử dụng plugins bên ngoài
+title: Component sử dụng plugins bên ngoài
 order: 3
 domid: markdown-example
 ---

From 4478b3f81b9b99f997c7ae17e6e8c86a7ead8985 Mon Sep 17 00:00:00 2001
From: TuanTV <tuanhanhphuc123@gmail.com>
Date: Fri, 12 Apr 2019 10:00:35 +0700
Subject: [PATCH 3/6] translate more literally home page

---
 content/home/marketing/component-based.md           | 4 ++--
 content/home/marketing/declarative.md               | 2 +-
 content/home/marketing/learn-once-write-anywhere.md | 2 +-
 src/pages/index.js                                  | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index 2dcd3a0ac..6e0b4146b 100644
--- a/content/home/marketing/component-based.md
+++ b/content/home/marketing/component-based.md
@@ -3,6 +3,6 @@ title: Component-Based
 order: 1
 ---
 
-Xây dựng các thành phần đóng gói quản lý 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.
+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.
 
-Vì logic thành phần đượ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.
\ No newline at end of file
+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.
\ No newline at end of file
diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index de6092e48..ceb86f7ac 100644
--- a/content/home/marketing/declarative.md
+++ b/content/home/marketing/declarative.md
@@ -3,6 +3,6 @@ title: Declarative
 order: 0
 ---
 
-React giúp tạo UI tương tác đơn giản. Thiết kế các khung nhìn đơn giản cho từng trạng thái trong ứng dụng của bạn và React sẽ cập nhật và thông dịch đúng các thành phần phù hợp khi dữ liệu của bạn thay đổi.
+React giúp tạo UI tương tác đơn giản. Thiết kế các khung nhìn đơn giản cho từng trạng thái trong ứng dụng của bạn và React sẽ cập nhật và render đúng các thành phần phù hợp khi dữ liệu của bạn thay đổi.
 
 Các câu khai báo làm cho mã của bạn dễ sử dụng hơn và dễ tìm lỗi hơn.
diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md
index d5248d0b3..a1958e81f 100644
--- a/content/home/marketing/learn-once-write-anywhere.md
+++ b/content/home/marketing/learn-once-write-anywhere.md
@@ -5,4 +5,4 @@ order: 2
 
 Chúng tôi không đưa ra các giả định về phần kĩ năng công nghệ của bạn, vì vậy bạn có thể phát triển các tính năng mới trong React mà không cần viết lại mã hiện có.
 
-React cũng có thể thông dịch trên máy chủ bằng Node và xây dụng ứng dụng di động bằng cách sử dụng [React Native](https://facebook.github.io/react-native/).
\ No newline at end of file
+React cũng có thể render trên máy chủ bằng Node và xây dựng ứng dụng di động bằng cách sử dụng [React Native](https://facebook.github.io/react-native/).
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index acd8e6226..b20fb7ce0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -153,7 +153,7 @@ class Home extends Component {
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Làm theo hướng dẫn
+                        Xem hướng dẫn
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -290,7 +290,7 @@ class Home extends Component {
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Làm theo hướng dẫn
+                    Xem hướng dẫn
                   </ButtonLink>
                 </CtaItem>
               </Flex>

From 32242e6636d63bb1ad211fcb63faac906a03ffef Mon Sep 17 00:00:00 2001
From: TuanTV <tuanhanhphuc123@gmail.com>
Date: Fri, 12 Apr 2019 10:40:07 +0700
Subject: [PATCH 4/6] translate vietnamese faq-ajax

---
 content/docs/faq-ajax.md | 18 +++++++++---------
 content/docs/nav.yml     |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md
index 102e1c07e..854f7b818 100644
--- a/content/docs/faq-ajax.md
+++ b/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:
 
 ```
 {
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 26480cb23..df0d0ae37 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -136,7 +136,7 @@
 - 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

From 123a6e00a574e2d8fd28b7443132c9e71a32adb5 Mon Sep 17 00:00:00 2001
From: TuanTV <tuanhanhphuc123@gmail.com>
Date: Fri, 12 Apr 2019 11:13:06 +0700
Subject: [PATCH 5/6] translate vietnamese faq-build

---
 content/docs/faq-build.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/content/docs/faq-build.md b/content/docs/faq-build.md
index b071cc131..e80e16160 100644
--- a/content/docs/faq-build.md
+++ b/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>
 ```

From f9d0a9fcdd6871138cfb2fbd5aed41463130fa66 Mon Sep 17 00:00:00 2001
From: TuanTV <tuanhanhphuc123@gmail.com>
Date: Fri, 12 Apr 2019 18:13:15 +0700
Subject: [PATCH 6/6] translate head fag-styling

---
 content/docs/faq-styling.md | 20 ++++++++++----------
 content/docs/nav.yml        |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md
index ddc955e3d..ef4890b6f 100644
--- a/content/docs/faq-styling.md
+++ b/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).
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index df0d0ae37..9e6ee493d 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -144,7 +144,7 @@
     - 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