Learning React Native as a Python Developer
As a Python dev I am currently undergoing the process of self-learning React Native without much JavaScript / Web background.
While the documentation that I have read is full of examples and well explained, It is also fragmented (since you need a lot of separate tools to develop with React) and sometimes hard to find as a newbie.
That is why I’ll be posting here the resources that have helped me in order of recommended reading. I hope that this will help future learners (including my future Self) cut off the hours that I’ve spent searching for the right things to read.
Installing Node and NPM
You will need them in order to use React Native. If you are on Windows or Mac you can just download a single installer for both of them from the Node website. If you are on Ubuntu follow my tutorial here.
The Basics: JavaScript
First you need to be able to understand JavaScript. You probably won’t need to study anything if you already know Python. Yes, there are a lot of differences, and some of them will hurt (since JavaScript does not seem to have something similar to The Zen of Python). But maybe you know enough to Google about the syntax that you don’t understand.
Anyway, just in case you want a JavaScript primer, A Re-Introduction to JavaScript is the more condensed and complete one that I’ve found to the date.
The Basics: React Native
Now it’s time to start talking React Native.
The first thing to read is the full React Native Documentation. It is not long, since it won’t go into much detail. Just read each entry, click Next at the bottom and keep reading and understanding. Don’t bother to study the Components or API sections, these are just for reference.
React Native Navigation
Now you know how to make a screen, but you don’t know how to navigate between multiple ones. This is where React Navigation comes in. Just read the React Navigation Docs like you did with the basic React Native ones and you’ll understand it enough to begin working with it.
Firebase (and first learning project)
OK, now we know how to make the User Interface of a React Native App. Two things we are lacking are data persistence and authentication. Two things that are needed in a high percentage of the apps and that Firebase makes easy.
Firebase is a Google product that has a huge free tier and React libraries that allows us to have a cloud data storage and authentication without having to write back-end code.
To learn how Firebase works I went hands on with an example project. It’s time to stop reading docs and start reading (and writing) real code!
I followed this FreeCodeCamp React Native and Firebase Tutorial. It’s nice because it will allow you to translate into practice all you have read about React Native and React Navigation, while learning how to use Firebase.
Beware though because the tutorial has some pitfalls that will require some Googling to overcome. Please read until the end of this section before starting the tutorial.
What I recommend is:
- Do as the tutorial suggests and start a project from scratch (without cloning the git hub repo that already has al the code). Copying the files for yourself will allow you to distinguish between what you are supposed to write and what comes by default in a React Native project.
- Test out each step and try to understand every bit of the code. Avoid changing it yet, since it may interfere with later steps.
- Check out the references and troubleshooting I give you below when you get stuck.
- When you get all working and you understand how the app works, feel free to edit the code as you wish. I recommend you to use git in order to track your changes. This will allow you to troubleshoot much more easily if you break something.
- If you really get stuck and my tips below did not help, clone the git hub repo provided by the author of the tutorial and try to understand the code from there (it is slightly different at the repo, because the tutorial is outdated).
Relevant docs (don’t study, just consult as needed):
- Cloud Firestore Docs — This is the part of Firebase that takes care of persistence.
- Auth Docs — This is the part of Firebase that takes care of authentication.
Troubleshooting (don’t study, consult as needed):
- “I can’t find my Firebase Config data” — The tutorial instructs you to create an iOS app and an Android App, and to get the config data from Firebase Console > Project Settings. OK, that’s wrong. Here is what you need to do:
- First you need to go to Build > Cloud Firestore, and follow the steps to create a Firestore (the database that we will work with.
- In your new Firestore, go to Rules. Substitute the default code with this:
// Allow read/write access on all documents to any user signed in to the application
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}It will allow only authenticated users to read and write from the database.
3. Now go to Project Overview and create a Web App. Go tho the web app configuration and scroll down. You will see the exact FirebaseConfig that you need to paste into your Firebase config file.
- “I can’t enter the Home screen” — You won’t be able to do so until you complete Step 7. When you get to understand the code you’ll know why. Also, you should know that a couple lines of code present in the Login and Registration screen are wrong:
navigation.navigate('Home', {user})Just delete them, they are not needed. Read the React Navigation Authentication Flow Guide to understand why.
OK, I hope you did it!
You can check the repo where I have my code and a lot of explaining. But beware that I have modified the app. In the future I may writean updated version of the tutorial so you don’t have to pass trough this again.
Paper and Material Design
Nice work. You have a lot of the basics covered by now. Lets now learn a bit about design.
A good way to design is using a Design System. A Design System is a predefined set of rules and components for visual and interaction design that allows you to create a consistent and good looking user interface without having to re-invent the wheel.
Material Design is the design system from Google, and one of the more widely used ones (source). You will definitely benefit to take a look at its website. It includes rules and specifications for components like buttons, cards and menus.
The good thing is that there exists a library of production ready components for React Native, based on Material Design. It is open source and free, and will allow you to avoid writing a lot of styling code.
To use it, just read the Paper’s Getting Started Guide and then pick and use the components that you need. In my FireBase project repo I’ve re implemented the home screen using Paper. And believe me, I’ve been able to delete a whole lot of styling.
Other resources
Other resources that I have read but not put into practice yet:
Next steps
Other resources that I have noted down but not studied yet: