React Native vs React: A Couple First Impression Differences
The prospect of learning a new programming language is far more daunting than the idea of expanding upon a language you already know (in my opinion). That’s why once you know JavaScript, it’s easier to learn React, and once you know React, it’s easier to learn Redux. Now, I know this isn’t the best analogy because React and Redux are JavaScript libraries and not their own languages, but I like to look at them as important stepping stones to a broader understanding of the JavaScript ecosystem as a whole.
My next stepping stone to JavaScript mastery — this was hard to even type, as I’m so far from it — is React Native. Apps are ubiquitous, whether they’re used for games, productivity, banking, social media, or one of the other seemingly infinite methods of interacting with our mobile devices. And with React Native, you can create applications for both iOS and Android devices.
I’m writing this after only a few days of learning React Native, so these are very much first impression realizations, but I’m going to highlight a few differences between React Native and its parent framework.
Components and how they interact with one another through props and state are part of what makes React special, and luckily, they are integral to the structure of the native environment, too. With a base understanding of these core React principles, I was able to put together some (very) mini apps with little difficulty. I will highlight in sample files below some minor syntax and layout differences that make the native environment unique.
View, referred to in the docs as “the most fundamental component for building a UI” (wow!), is the most notable addition I faced in my introduction.
As its name suggests, View refers to the look and layout of the app. All of your visual elements should be wrapped in View components.
Text is another RN component that stays true to its name. With View and Text at our command we can return a statement to the screen (once we wire it in to the rest of the app).
This might be the very least exciting bit of code in the world — it’s not even styled!! — but here’s how you get a bit of text to the screen.
In the above code, you see the Text and View components are imported from react-native, just as you would import { useState } from “react.” It’s part of the boilerplate code for a RN file.
Another imported component I’ve included is StyleSheet, which is an “abstraction similar to CSS StyleSheets,” say the docs. The difference is the RN StyleSheet lives in the component itself, so you create named styles and then make inline style adjustments all in one place.
Here is a little bit of basic styling to show you how it could look. You could do the same inline styling within the Text component by writing style={{fontSize: 45, fontWeight: “bold”}}, but that’s just not as tidy and readable.
These are just the very teeniest tip of the React Native iceberg in terms of what it can do and where it differs, but they are notable variations from your everyday React code. I will dive into more complex differences next week.
