React Native makes it possible to make native iOS and Android mobile apps without needing to know any iOS or Android programming - just JavaScript!
In this course, we'll write a simple mobile app that you can run on your own phone and share with your friends!
In order to take advantage this course, you should have the following experience.
- JavaScript - Some previous JavaScript programming knowledge is required, since we won't have time to start learning programming from scratch.
- HTML/CSS - Basic understanding of how to make a web page. React Native doesn't actually use HTML or CSS, but the concepts are very similar to how React Native works, and having some experience with these will make the course a lot more rewarding.
For this course, you'll need
- A Macbook OR a Windows or Linux laptop.
- An iPhone OR an Android smartphone
Before the course, please make sure you have the following software installed on your computer:
- Node.js 6.x or later
- Make sure you know how to open your "Command Line" or "Terminal" and type
node -v
. You should see the your Node.js version printed in the terminal.
- Make sure you know how to open your "Command Line" or "Terminal" and type
- A text editor that can be used to edit JavaScript, for example Atom, VS Code, Sublime Text
- If you don't have a preference, I recommend Atom, but any text editor will do!
You should also install the Expo app on your phone (iOS App Store | Android Play Store)
Optionally, you can install the following on your laptop:
- Create React Native App (with
npm install -g create-react-native-app
)
The following topics will help you on this course, but are not mandatory. The React Native Express tutorial is great for studying all of these topics. Read as much or as little of it as you'd like, but don't worry if it doesn't all make sense to you.
- ES6 - React Native applications are written in the new ES6 version of JavaScript. We will only use the most basic features, but familiarity with the following language features will be helpful:
- Modules (
import
andexport
keywords) - Arrow functions (the
=>
syntax) - Classes (the
class
keyword) - Block-scoped variables (the
const
andlet
keywords) - Study materials: ES6 chapter of React Native Express
- Modules (
- JSX - React Native uses a JavaScript language extension called JSX that allows us to define HTML-like elements inside our code. Learning JSX is easy, but the syntax might look strange at first. Getting used to seeing JSX will help on the course.
- Study materials: JSX chapter of React Native Express
- React - React Native uses the same components as React for the web. Some knowledge of React will be helpful, but not necessary, as we will cover all required features on the course
- Study materials: React Component API chapter of React Native Express
Basically, if you can understand what each of the keywords and syntax in this example does, you'll be in great shape!
import React from 'react'
class App extends React.Component {
render() {
const message = 'Hello world!';
return (
<Button onPress={() => console.log(message)}>
Press me!
</Button>
)
}
}
Hi, where is this course hosted?