Getting Started with React

A light but powerful way to build dynamic real-time applications using ReactJS

About This Book

• Learn how to develop powerful JavaScript applications using ReactJS
• Integrate a React-based app with an external API (Facebook login) while using React components, with the Facebook developer app
• Implement the Reactive paradigm to build stateless and asynchronous apps with React

Who This Book Is For

This book is for any front-end web or mobile-app developer who wants to learn ReactJS. Knowledge of basic JavaScript will give you a good head start with the book.

What You Will Learn

• Understand the ReactJS basics through an overview
• Install and create your first React component
• Refactor the ReactJS component using JSX
• Integrate your React application with the Facebook login and Graph API, then fetch data from your liked pages in Facebook and display them in a browser
• Handle UI elements events with React, respond to users input, and create stateful components
• Use some core lifecycle events for integration and find out about ES6 syntaxes in the React world
• Understand the FLUX architecture and create an application using FLUX with React
• Make a component more reusable with mixins and validation helpers and structure your components properly
• Explore techniques to test your ReactJS code
• Deploy your code using webpack and Gulp

In Detail

ReactJS, popularly known as the V (view) of the MVC architecture, was developed by the Facebook and Instagram developers. It follows a unidirectional data flow, virtual DOM, and DOM difference that are generously leveraged in order to increase the performance of the UI.

Getting Started with React will help you implement the Reactive paradigm to build stateless and asynchronous apps with React. We will begin with an overview of ReactJS and its evolution over the years, followed by building a simple React component. We will then build the same react component with JSX syntax to demystify its usage. You will see how to configure the Facebook Graph API, get your likes list, and render it using React.

Following this, we will break the UI into components and you'll learn how to establish communication between them and respond to users input/events in order to have the UI reflect their state. You'll also get to grips with the ES6 syntaxes.

Moving ahead, we will delve into the FLUX and its architecture, which is used to build client-side web applications and complements React's composable view components by utilizing a unidirectional data flow. Towards the end, you'll find out how to make your components reusable, and test and deploy them into a production environment. Finally, we'll briefly touch on other topics such as React on the server side, Redux and some advanced concepts.

Style and approach

The book follows a step-by-step, practical, tutorial approach with examples that explain the key concepts of ReactJS. Each topic is sequentially explained and contextually placed to give sufficient details of ReactJS.

一本輕巧但功能強大的書籍，教你如何使用ReactJS建立動態實時應用程式。

關於本書
- 學習如何使用ReactJS開發強大的JavaScript應用程式
- 整合React應用程式與外部API（Facebook登入），同時使用React元件和Facebook開發者應用程式
- 使用Reactive範式建立無狀態和非同步應用程式

適合閱讀對象
本書適合任何前端網頁或行動應用程式開發人員，想要學習ReactJS的人。具備基本JavaScript知識將有助於更好地理解本書內容。

你將學到什麼
- 通過概述了解ReactJS基礎知識
- 安裝並創建你的第一個React元件
- 使用JSX重構ReactJS元件
- 整合React應用程式與Facebook登入和Graph API，然後從Facebook中獲取喜歡的頁面數據並在瀏覽器中顯示
- 使用React處理UI元素事件，回應用戶輸入，並創建有狀態的元件
- 使用一些核心生命週期事件進行整合，並了解React世界中的ES6語法
- 了解FLUX架構，並使用React創建應用程式
- 使用mixin和驗證助手使元件更具重用性，並適當結構化你的元件
- 探索測試ReactJS代碼的技術
- 使用webpack和Gulp部署你的代碼

詳細內容
ReactJS，被廣泛稱為MVC架構中的V（視圖），是由Facebook和Instagram開發人員開發的。它遵循單向數據流、虛擬DOM和DOM差異，這些特性被廣泛利用以提高UI的性能。

《React入門》將幫助你實現Reactive範式，使用React建立無狀態和非同步應用程式。我們將從ReactJS的概述和其多年來的演進開始，然後建立一個簡單的React元件。接著，我們將使用JSX語法重構相同的React元件，以解析其用法。你將學習如何配置Facebook Graph API，獲取你的喜歡列表，並使用React渲染它。

接下來，我們將將UI拆分為元件，並學習如何在它們之間建立通信，並回應用戶的輸入/事件，以使UI反映其狀態。你還將熟悉ES6語法。

之後，我們將深入研究FLUX及其架構，它用於構建客戶端Web應用程式，通過利用單向數據流來補充React的可組合視圖元件。最後，你將了解如何使你的元件可重用，並測試和部署它們到生產環境。最後，我們將簡要介紹其他主題，如服務器端的React、Redux和一些高級概念。

風格和方法
本書採用逐步實踐的教學方法，通過例子解釋ReactJS的關鍵概念。每個主題都按順序解釋，並提供足夠的ReactJS細節。