Translate home

content/blog/2015-03-30-community-roundup-26.md

@@ -29,11 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo
 
 Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
 
-<<<<<<< HEAD
-<audio src="https://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
-=======
 <audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style="width: 100%"></audio>
->>>>>>> 5fdb6a2e70018f408c42e012a3f70e066a80e886
 
 
 ## Hacker News {#hacker-news}

content/community/nav.yml

@@ -1,4 +1,4 @@
-- title: Community Resources
+- title: Tài Nguyê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/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: Những 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 Chiếu 
   items:
     - id: react-api
       title: React
@@ -104,7 +104,7 @@
       title: JS Environment Requirements
     - id: glossary
       title: Glossary
-- title: Hooks (New)
+- title: Hooks (Mới)
   isOrdered: true
   items:
       - id: hooks-intro
@@ -123,7 +123,7 @@
         title: Hooks API Reference
       - id: hooks-faq
         title: Hooks FAQ
-- title: Contributing
+- title: Đóng Góp 
   items:
   - id: how-to-contribute
     title: How to Contribute
@@ -133,7 +133,7 @@
     title: Implementation Notes
   - id: design-principles
     title: Design Principles
-- title: FAQ
+- title: Câu Hỏi Thường Gặp 
   items:
     - id: faq-ajax
       title: AJAX and APIs

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

@@ -1,5 +1,5 @@
 ---
-title: A Simple Component
+title: Một Component Đơn Giản
 order: 0
 domid: hello-example
 ---

content/home/examples/an-application.js

@@ -9,19 +9,19 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>TODO</h3>
+        <h3>Việc Cần Làm</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            Bạn cần hoàn thành việc nào?
           </label>
           <input
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            Thêm #{this.state.items.length + 1}
           </button>
         </form>
       </div>

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.
+Bằng cách sử dụng` props` và `state`, chúng ta có thể tạo thành một ứng dụng Việc Cần Làm nho 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ư những chữ mà người dùng đã nhập vào.  Mặc dù ở đây các hàm bắt sự kiện đưa vào ngay trên một hàng, nó sẽ được dùng để thu thập và và triển khai bằng cách sử dụng bộ chuyển giao sự kiện.

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Dựa Trên Component
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Chỉ cần xây dựng những component mà nó có thể tự quản lý state, rồi ghép chúng lại với nhau để tạo thành những giao diện phức tạp hơn.
 
-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.
+Nhờ component được viết bằng ngôn ngữ JavaScript thay vì dùng những cú pháp template, bạn có thể dễ dàng đưa dữ liệu đi xuyên suốt ứng dụng mà không cần gán state vào chung với các thành phần DOM.

content/home/marketing/declarative.md

@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Cú Pháp Rõ Ràng
 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 cho việc xây dựng giao diện có tính tương tác một cách dễ dàng. Trước tiên, thiết kế các component giao diện đơn giản cho mỗi state trong ứng dụng của bạn, và React sẽ cập nhật giao diện tuỳ theo sự thay đổi dữ liệu trong các component đó.
 
-Declarative views make your code more predictable and easier to debug.
+Giao diện được viết cách rõ ràng sẽ làm cho code của bạn dễ quan sát và dễ gỡ lỗi hơn.

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.
+Không cần bận tâm về những công nghệ hiện tại, bạn có thể bắt đầu phát triển chức năng mới bằng React mà không cần viết lại những đoạn code đang hoạt động.
 
-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ể render trên máy chủ bằng NodeJS và ứng dụng di động với sự hỗ trợ đắc lực từ [React Native](https://facebook.github.io/react-native/).

src/components/LayoutFooter/Footer.js

@@ -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"
@@ -128,12 +128,10 @@ 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}>Xem Thêm</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">Hướng Dẫn</FooterLink>
             <FooterLink to="/blog/">Blog</FooterLink>
-            <FooterLink to="/acknowledgements.html">
-              Acknowledgements
-            </FooterLink>
+            <FooterLink to="/acknowledgements.html">Lời Cảm Ơn</FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
               target="_blank"

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

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 giúp 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 giúp 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
+                        Xem 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
+                    Xem Hướng Dẫn
                   </ButtonLink>
                 </CtaItem>
               </Flex>