This self-guided workshop aims to get you up and running with React Native and understand the fundamentals.
Prepared by React Native School.
If at any point you feel lost or like you're missing "something" outside of the scope of the lessons please check out these articles to help fill any gaps.
Each lesson also provides links to further your knowledge on the topic at hand.
We'll be leveraging Expo in this workshop. It makes React Native development very easy to get started with (it also provides a great way to build large React Native apps as well).
Follow the Expo installation documentation for your machine. Once complete, you should have Expo installed on your computer and the app installed on your phone.
You'll also want to install Git.
Once complete the following tools should be available on your system.
- Node
- npm
- Git
- Expo
You can check installation by running the following commands:
node --version
npm --version
git --version
expo --version
From the command line, run the following commands.
git clone https://github.com/ReactNativeSchool/react-native-fundamentals.git
cd react-native-fundamentals
npm install
With the project installed you can start the project by running npm start.
This will output a QR code in your terminal which you can scan from the Expo app (Android) or the Camera app (iOS).
Once that is complete shake your device (yes, physically shake it) at which point a menu should pop up.
Make sure that Fast Refresh is enabled.
With this complete the app will now refresh with the latest code any time you save a file.
You can find a pre-made file for each exercise in the exercises directory. Each exercise has a .js file and .md file. The .md files will give you context about what you're doing and give you the exercise(s). The .js file will be where you do your work.
Important: Make sure you use
export defaultfrom the exercise js file so that the app can pick up your code.
You can find solutions for each exercise in the solutions folder (they use the same file name).
- Exercise 1 - Hello, World!
- Exercise 2 - Capturing Taps
- Exercise 3 - Building a Custom Component
- Exercise 4 - State & Props
- Exercise 5 - Styling
- Exercise 6 - Scrolling Content
- Exercise 7 - Building a Form
- Exercise 8 - Long Scrolling Lists
- Exercise 9 - Working with Remote APIs
- Exercise 10 - Splitting Code into Multiple Files
- Exercise 11 - Class Components
- Exercise 12 - Component Lifecycle
This workshop (concept and structure) is heavily inspired by Kent C. Dodds' React Fundamentals workshop. Thank you for putting it together and sharing it publicly.