React Native from the perspective of a React Developer
React Developers, here’s what you need to know when getting into React Native development
If you’ve been working with React for a while and wondering how it’ll be to get into cross-platform mobile application development with React Native, this article will help you understand what differences that you’ll have to get used to in the early stages of learning.
Let me set things clear for any of you Java developers who wondered if JavaScript was some sort of a Java variation, but ended up having to learn a completely different language that has pretty much nothing similar to Java. No, React to React Native is not like Java to JavaScript!
Learn Once, Write Anywhere
This is the tag-line that React Native goes with. This is to express its cross-platform development supportive nature. Let’s get into perspective now…
React — A JavaScript library for building user interfaces.
Actually, React is what’s used for both the web app and the mobile app. Don’t get confused now.
What we call React is actually the underlying code that handles the view. Basically, the underlying logic is handled by React. React-Dom is actually what is used to render whatever that is displayed in the browser in a web app. Similarly, what React Native does is, it compiles React components to Native iOS/ Android components. It basically, connects JavaScript and native platform code.
Ultimately, it’s the same React library that’s being used. This is why it’s quite easy for an existing React developer to quickly pick-up with React Native development. In fact, it’s even possible to share code between React & React Native projects.
Both Hooks or class-based Components can be used for a React Native project, just like a React project.
I started off with Hooks ’cause I’ve already used Hooks in my React projects. So, the only difference was in the render() method compared to any other React Native project. And of course, a few extra imports were added.
I would suggest that you take a look at Hooks if you’ve been using class-based Components in your React projects, ’cause Hooks are used in almost every single updated React Native course out there. It’ll be more convenient for you to follow along (or copy-paste any code 😜)
The Views
HTML, CSS isn’t supported. Simply because no native platform can understand that. A browser would be needed for that purpose, which would’ve made things slow. The almost native-like performance won’t be able to be achieved. JSX (extended JavaScript) does come into the party. Simply put, that’s why React is needed to be imported into each file. React is taking care of all that, just like in a web app.
The main difference you’ll see in a React Native project as a React developer is that the render method has a lot of components that you’ve never seen before. But when you read them, you should be able to get an idea of what they would do ’cause it’s mostly direct English of what each component would do.
Whatever that’s inside the <View> of the render() method is compiled into native components.
While most components are universal for both iOS & Android, there’re a few components that are unique as well. These are just to give that added extra-functionality offered by each platform.
The JavaScript Logic
None of the JavaScript logic is compiled. The React Native app hosts the JavaScript logic on a separate thread. This is a VM(Virtual Machine) known as the JavaScriptCore. This VM then connects with native modules/ platforms using the ‘Bridge’. Basically, it’s like having another mini-app running inside the app to tell the main app what to do.
The reason to have this is that iOS doesn’t allow third-party apps to generate code at run-time. Therefore, the usual V8 engine that runs in a React web app, can’t be run in iOS. The JavaScriptCore is an alternative to the V8 engine. And yep! it’s developed by Apple 😂. You can read about it in Apple’s documentation here if you’re interested. It’s not a necessity though.
Styling the Views
Even though styles look kind of like CSS, React Native actually uses JavaScript for styling. There’s no CSS involved at all. Instead of pixels in CSS, React Native styles use numbers for sizes.
If you’ve applied inline-styles using CSS defined in a constant, in a React project, it does look a little like that, but not exactly the same thing. There’s a React Native component called ‘StyleSheet’ which is used to create the styles.
Expo vs React-Native-CLI
Well, after matching up the pros and cons of using these two I figured out that this deserved its own blog post. You can read all about it here.
Native code can be included in the project if you go with React-Native-CLI. But, it’s unlikely that you’ll need this for most apps.
If you’re new to React Native, just start off with Expo. You can jump ships at any moment.
Using NPM packages in React Native
Pretty much every npm package which can be used in a React web app project should be able to be used in a React Native project apart from the packages that depend on the React-DOM. I haven’t really checked if this is true for every single NPM package out there.
If you face any problems with getting an NPM package to work in your React project, I’ve come across this toolkit that may be able to help you. It allows any Node.js package to run behind both Android & iOS apps built using React Native.
The other popular natively-compiled cross-platform development UI-toolkit, Flutter uses Dart as its programming language. Flutter has its own pros. Faster, beautiful apps are what it mainly promises and it does that very well. But, if you’re already a React developer, going with React Native for cross-platform development might be better for you because the transition would be easier.
Even most online tutorials would expect you to have some prior knowledge in React to get started with React Native. So, if you already don’t have any knowledge of React, it would be advantageous to learn it. It’s the most loved language by developers after all and there're many reasons for that. So, it won’t be a waste to spend time learning it anyway.
If you’re already a React developer, I would suggest that you have a go with React Native. These are answers to most of the queries I had when deciding how it would be to get into React Native development. I hope this blog-post cleared up your <View> about how <div> would be! 😜
The following two links are what I followed to get into React Native development.
To get a quick look into React Native, checkout Traversy Media’s React Native Crash Course 2020
React Native — The Practical Guide on Udemy is what I’ve been following and so far, and it seems to be quite good.
