General

Videos

Introduction to React Native

This course is going to be all about the React Native library. Like React, React Native was originally created by Facebook and then made open source in 2015. It allows you to create a project with React but then run your application on a mobile device instead of a web browser.

You might be asking yourself "Why does React Native get its own course, isn't it just React?"

Well... not quite. Developing applications for mobile is a very different animal than writing web applications and I think you'll soon see there is more to learn than I can fit in this course.

The video below will go over a few of the main differences between web and mobile projects.

Summary

In this course we are going to transplant our JavaScript skills and knowledge from a web context to a mobile context. Core JavaScript concepts and syntax will remain the same but some things we will need to re-learn or adapt to new strategies. By learning React Native you will see React in a new light and will hopefully cement your understanding of how it works.

Code Editor

In this course, we'll use Visual Studio Code(opens in a new tab) to build our React applications. Feel free to follow the instructions on the official website to install it (if you haven't done so already) on your local machine.

The video screencasts (i.e., code demos) in this course will also make use of the Prettier(opens in a new tab) extension for Visual Studio code for simple code formatting. If you choose to use a code formatter, be sure to install the extension and enable it as the Default Formatter in Settings. You may also choose to Format On Save as well.

GitHub repo for the exercises in this course: (opens in a new tab)https://github.com/udacity/cd0444-react-native-exercises(opens in a new tab)

Dependencies

Local Machine install

1. Install npm(opens in a new tab)
   • npm is the package manager for the Node JavaScript platform.
   • create-react-app command
   • Included in npm is Create React App(opens in a new tab), which is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
2. Install Node(opens in a new tab)
   • Node.js is a free, open source, cross-platform JavaScript run-time environment that lets developers write command-line tools and server-side scripts (i.e., outside of a browser).
3. Testing:
   • Install Jest(opens in a new tab)
   • Jest is a testing framework to test Javascript and React code.
   • Installing React-Testing-Library(opens in a new tab) (if not using create-react-app):

npm install --save-dev @testing-library/react @testing-library/jest-dom

package.json File

After installing Jest, you need to update your package.json file to include a script section so that you can run the Jest tests through npm:

{
  "devDependencies": {
    "jest": "^27.4.5"
  },
  "scripts": {
    "test": "jest"
  }
}

Workspace

You are welcome to use the provide "Lesson Workspace' which is provided in every lesson to allow you to code along with the instructor. This page is located on the last page of each lesson

💡 React Version 💡

This course was built using React v17.0.2(opens in a new tab). Around the time that this course was published, React v18 Release Candidate was made available to developers. Per React's documentation:

Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon.

Optional: If you prefer to migrate your application to React 18, please feel free to follow this guide from React: How to Upgrade to the React 18 Release Candidate(opens in a new tab).

The Power of Abstraction

In the video above we talked a little bit about how React components are an abstraction. Abstraction is a powerful concept in computer science and the right abstraction can make problems that felt huge almost melt away by unburdening a solution from needing to solve every problem. By definition it is

"The quality of dealing with ideas rather than events".

Abstraction as a computer science concept is one you've probably heard about and seen around, but sometimes these technical terms are not pinned to concrete examples and remain ephemeral. So here is my opportunity to say -- React Native is a great example of a helpful abstraction. It simplifies the task of writing an application because it takes the problem of turning JavaScript into native code and solves it elsewhere. When things are complicated because we're trying to solve too many problems at one time, abstracting one of those problems away to tackle it on its own can make everything easier to handle.

So, because of abstraction, you get the benefit of developing an app once but have it work across multiple platforms. React Native leverages React and JavaScript as an abstraction over Java & Objective C. This lets you focus on what makes your app awesome, special, and different without needing to always worry about the differences of each platform.

If you feel like you haven't ever quite understood the principle of abstraction, some good resources are listed below. It might help you recognize an abstraction the next time you come across one, and maybe someday you'll find yourself creating one to solve a problem you encounter.

Good articles/resources:

An article from Valuable Dev on What Are Abstractions in Software Engineering with Examples(opens in a new tab).