O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: React And React Native

Video Description

Build awesome UIs and mobile apps with ReactJS

In Detail

React is a JavaScript library that communicates changes on a user interface to the browsers quickly, without having to re-render anything except the part of the display that needs to change. React Native is a fantastic new framework produced by Facebook that allows developers to create truly native applications running on both iOS and Android, all while writing code in JavaScript. Become familiar with the full set of core technologies behind modern full stack development using ReactJS and learn iOS and Android development with this Learning Path.

Prerequisites: Requires working knowledge of JavaScript

Resources: Code downloads and errata:

  • Learning ReactJS

  • Learning Full Stack React

  • Learning React Reusable Components

  • React Native Projects

  • PATH PRODUCTS

    This path navigates across the following products (in sequential order):

  • Learning ReactJS (3h 11m)

  • Learning Full Stack React (2h 33m)

  • Learning React Reusable Components (3h 44m)

  • React Native Projects (4h 7m)

  • Table of Contents

    1. Chapter 1 : Learning ReactJS
      1. The Course Overview 00:03:16
      2. Setup Guide 00:08:51
      3. Why React? 00:06:41
      4. The React Way 00:11:14
      5. The Virtual DOM 00:09:07
      6. React's Language 00:04:51
      7. JSX 00:04:25
      8. Defining Components 00:07:02
      9. Using JSX 00:03:04
      10. Readability and Reusability 00:05:49
      11. Composability 00:06:38
      12. Reading and Updating the State 00:07:48
      13. Deciding Who Owns the State 00:05:30
      14. Giving Children Components Access to the State 00:03:13
      15. React's Event System 00:03:09
      16. Working with DOM Nodes 00:04:44
      17. Controlled Components 00:04:21
      18. Mounting and Unmounting Components 00:05:15
      19. Updating Components 00:03:34
      20. What Are We Building? 00:02:33
      21. Building the Presentational Components 00:05:35
      22. Initializing the State 00:07:11
      23. Separating Components into Modules 00:04:37
      24. Implementing the Delete Action 00:06:46
      25. Handling Edge Data Cases 00:03:35
      26. Reading User Input from the DOM 00:05:48
      27. Using a Controlled Input Component 00:05:16
      28. Displaying the Author Information 00:07:31
      29. Moving Data to the Backend 00:02:51
      30. Fetching Data to React State 00:03:29
      31. Improving the Data API 00:05:50
      32. Configuring Store and Reducers 00:05:35
      33. Dispatching Actions 00:07:00
      34. Working with the Redux Promise Middleware 00:02:41
      35. Deleting a Book 00:05:25
      36. Final Thoughts 00:01:15
    2. Chapter 2 : Learning Full Stack React
      1. Course Overview 00:02:38
      2. Creating my First React Element 00:07:17
      3. Getting to Know JSX and Babel 00:10:35
      4. Creating a React Component 00:08:11
      5. Passing Components and Properties 00:10:55
      6. Building with Forms and States in React 00:08:35
      7. Walking through a Full State Cycle 00:11:56
      8. Using http-server as a Quick Server Solution 00:04:23
      9. Going Back to React 00:02:25
      10. Using Express Generator 00:03:52
      11. Back to React 00:17:28
      12. Installing MongoDB 00:07:52
      13. MongoDB Driver in Node.js 00:15:12
      14. Setting Up the Server 00:08:01
      15. Working with Template Systems – EJS 00:07:02
      16. Running React on the Server Side 00:07:49
      17. Configuring Babel 6 the Right Way 00:07:27
      18. Creating a Full Registration with MongoDB 00:11:29
    3. Chapter 3 : Learning React Reusable Components
      1. Overview and Setting Things 00:10:57
      2. Configuring the Webpack Development Server 00:08:03
      3. Developing in ES2016 Today with Babel 00:09:35
      4. Hello JSX 00:08:55
      5. Creating a Component 00:08:28
      6. Using Components Inside Components 00:07:00
      7. Passing Properties to Components 00:05:53
      8. Dynamically Passing Components into Components 00:09:08
      9. Components That Change with State 00:09:58
      10. How React Works and Arrow Functions 00:09:57
      11. Sectioning our Site into components 00:07:26
      12. Composition Instead of Inheritance 00:08:19
      13. Dynamic Children from Model Data 00:07:22
      14. Understanding var, let, and const 00:07:21
      15. Exploring ES6 Strings 00:05:12
      16. Finding Bugs 00:09:49
      17. Extracting the Model from the View 00:11:19
      18. Using the JSX and ES6 Spread Features 00:08:54
      19. Validating Development Props 00:07:48
      20. Making Everything Dynamic 00:05:47
      21. Final Thoughts on Reusability 00:05:15
      22. Preparing for Idiomatic JavaScript 00:07:08
      23. Building Out the Site Navigation 00:07:07
      24. Bubbling Events in React 00:12:56
      25. Merging Our Model with Our View 00:08:21
      26. Making Things Dynamic with Maps 00:05:05
      27. SPA – Creating a Single Page Application 00:11:30
    4. Chapter 4 : React Native Projects
      1. The Course Overview 00:03:59
      2. Introduction to React and React Native 00:09:46
      3. Installation (Mac) 00:05:36
      4. Installation (Windows) 00:07:03
      5. Verifying Installation 00:08:20
      6. Environment Setup for Sublime Text 00:07:38
      7. Starting the RelaxationStation App 00:06:04
      8. Basic React Native Code Structures and Organization 00:03:31
      9. Adding and Styling Components 00:06:31
      10. Adding Buttons and Images 00:06:09
      11. Custom Components and Props 00:07:14
      12. Navigation in React Native 00:07:36
      13. Static Data and Properties 00:05:56
      14. Intermediate Styling Techniques 00:06:12
      15. Flexbox and Application State 00:09:30
      16. Animations with LayoutAnimation 00:06:17
      17. Starting the BeBriefed App 00:04:04
      18. Pulling in Third-party Libraries 00:06:45
      19. Debugging Techniques in React Native 00:07:48
      20. Introducing Tabbed Navigation 00:04:59
      21. Switching Between Tabs 00:05:56
      22. Styling Enhancements 00:02:55
      23. Integrating Data from an External API 00:05:27
      24. Starting the Chat Now App 00:07:07
      25. Advanced Navigation Techniques 00:07:32
      26. Using the Linking API 00:02:29
      27. Introduction to Flux and Redux 00:02:59
      28. Redux Reducers and Actions 00:08:51
      29. Redux and Containers 00:08:21
      30. Chat Screen and Keyboard Tips 00:09:12
      31. Thunks, Pure Reducers, and Scrolling 00:09:14
      32. Two-way API Communication 00:06:41
      33. More Navigator Techniques 00:04:37
      34. AsyncStorage 00:06:18
      35. AysncStorage (Continued) 00:05:39
      36. Generating App Icons 00:05:04
      37. iOS App Icons and Display Name 00:03:30
      38. Android App Icons and Display Name 00:02:06
      39. Creating a Production Bundle 00:03:03
      40. Upgrading React Native Versions 00:03:37
      41. Community Resources and Giving Back 00:05:58