React Native is an awesome open source framework, that uses Javascript to let you create — without too much effort — Android and iOS applications at once. It is reaching right now (v0.51), in my opinion, a level of maturity high enough to be considered production ready (some examples? Tesla, Airbnb and Skype).
So, what should you do to learn it properly?
STEP 0: Install it
Pretty straightforward, the first task you have to face is to install it correctly: it may sound simple, but trust me it is a long process: head over to the official docs to learn how.
BTW, if you are on Windows and you can’t find a way to make it work, check this blog post from the guys at Infinite Red — which have created one of the best React Native starter kit out there, Ignite.
STEP 1: Get the right equipment
Naturally, next step is to install an IDE (Integrated development environment) that will allow you to write React Native code flawlessly, providing a set of additional tools to help you out.
If you are planning to write code only for React Native, you should consider DECO, which is scoped for RN devs.
For the other 99% of us, the choice will be between (to list the most famous) Sublime Text 3, Atom and Visual Studio Code. I probably would suggest going for VSCode, which (among other cool features) has this dedicated plugin — moreover it is my current IDE, and I wrote about how I set it up for React Native here.
Independently from the IDE, one thing you should do right away is to install a fantastic plugin called ESLint — which will help you writing correct code. I suggest you follow the guide franzejr wrote about it.
STEP 2: Read React Native Express
Plain and simple, React Native Express is the best (IMHO) guide to learn Javascript to write React Native right now.
It is quite complete, starting from plain Javascript to get to complex topics like state management via Redux and Animations. And it’s completely Open Source.
STEP 3: Learn Navigation
In the first version of this article, I was living in a happy world when moving between screen seemed to have finally reached a solid solution (react-navigation).
You see, for a long time navigation in React Native was hard to handle: there were many different navigators (the first one, Experimental, ExNav) and it was quite difficult to learn properly how to use them, let alone integrate them with Redux or MobX.
But now... well, it’s still a bit of a mess. I highly suggest you head to the React Native docs to keep up with which library you should get started with.
STEP 4: Dive into the framework
Once you got a good grasp of React Native (and its architecture), it’s time to get you up to speed: as you may have heard, we are not yet to a 1.x version.
This means that the framework gets regularly updated, once a month to be precise: to keep up the pace, the best way is to keep an eye out for the release page over the GitHub project, and the breaking changes document to know how to keep your code updated.
So, what now?
You learned the basics; it’s time to jump off that cliff and dive: as I mentioned, React Native is an Open Source Project, which means that it will get better the more everyone will participate and help and code and fix and test and comment stuff around. No matter how little you know, remember that even fixing typos in a README file is a way to get started and help everyone else.
So, before you leave, take this with you: it’s not a wooden sword, but it will surely help you out.
React Native Training Program
Objective
The fundamentals of React Native
- To create apps for both iOS and Android
- To create smaller reusable components from complex components
- Creating authentications for apps
- Basic Course for React Native - Beginner Level
- Module 1: What is React Native?
- Abstracting React from the DOM
- Advantages of React Native
- React Native vs Web Apps
- React Native vs React web
React Native Installation
- Installing React Native
- iOS setup – XCode
- Android setup – Android Studio
- Run an example project in iOS and Android simulators
Module 3: Core React Native Components
- Establishing a layout with View
- Displaying text with Text
- Accepting user input with TextInput
- Adding images with Image
- Making components interactive with TouchableHighlight
- Displaying data with ListView
- Changing screens with Navigator
- Expanding touch capability with GestureResponder and PanResponder
Module 4: Styling
- Issues with CSS
- Inline Styles
- Create Immutable style objects with Stylesheet.create
- Pass styles as props
- Positioning components with flexbox
Module 5: React Native APIs
- Using fetch to retrieve data
- Getting a user’s location and handling permissions
- Accessing stored photos with CameraRoll
- Adding animations
Module 6: Deployment
- Deploying to Apple App Store
- Deploying to Android Play Store
Module 7: Application Design (Forms)
- Login Form Scaffolding
- Handling User Inputs
- More on Handling User Inputs
- How to Create Controlled Components
- Making Text Inputs From Scratch
- A Focus on Passing Props
- Making the Input Pretty
- Wrapping up Inputs
- Password Inputs
Module 8: API Integration and Error handling
- Logging a User In
- Error Handling
- Creating an Activity Spinner
- Conditional Rendering of JSX
- Clearing the Form Spinner
- Handling Authentication Events
- More on Conditional Rendering
- Logging a User Out and Wrapup
-- Application developments -- Create Conference App
Happy coding
Comments