Making the Jump From React to React Native: A Simple Comparison
Hey everyone! If you went to a coding bootcamp recently like me, you may have learned some React. If that’s the case, you may have also wondered how easily someone could make the jump from React web development to React Native mobile development. I started learning React Native recently and have discovered a few simple reasons why making the jump from React to React Native isn’t so foreign, even if you don’t have a ton of React experience like myself.
To demonstrate my points, I’ll build a simple app in both React and React Native called “ScoreKeeper”, and attempt to make them as similar as possible to each other. This way we can look into some code from both sides and make comparisons.
I have already created the apps, cleared out the initial boilerplate code in App.js for both, and added a maroon background color, with other minor styling changes in each. Here’s what they look like side by side at the moment:
We can already start to see some differences and similarities by looking at the initial setup code for both projects:
Basic Structure
First and foremost, notice that they both use and import the same React library. That by itself should tell us there are a lot of similarities. Both React and React Native still use JSX, so no difference there. We can also see they both use a similar syntax when it comes to the component structure (lines 4–10 in both projects).
Elements and Components
There is a pretty clear difference between the HTML looking elements used in the React web project and the base components used in the React Native project. For example, a <div> is sort of a catch-all, container type HTML/DOM element. As you can see in the React Native project, instead of a <div> I used a base element called a <View> that I imported on line 2 from ‘react-native’. The reason for this is that React Native does not use the HTML type elements, it only uses base components imported from ‘react-native’, and custom components we the developers create.
React Native uses these special components to be able to translate them into native widgets for Android and iOS. Both Android and iOS use different base components, so React Native components provide a way to write code for both platforms at once. For this demonstration, I am only using the iOS simulator. Click here to go to the docs to learn more about the core components in React Native.
Styling
Another noticeable difference between the two starting setups is the way they are styled. In React apps, we are able to use CSS and then import the .css files into our components at the top, however in React Native, the way styling is done is CSS-like, but not truly CSS. The properties are very similar, but use a different camelCase syntax for the keys, and most values need to be in single quotes.
Instead of importing a .css file, React Native requires us to import the StyleSheet component, and create a StyleSheet object (lines 12–18), which we set to a variable name (line 12). Inside the object, we name the keys what we want each component to be styled (line 13), and set the value of each key to an object filled with the CSS-like properties (lines 12–17).
Lastly about the styling, if you noticed in the React web app <div> I set “display” to “flex”, and set “justify-content” to “center” to get the title in the center of the screen. In React Native, Flexbox is default, and the “flex-direction” is already set to “column”, which is the opposite of the default “flex-direction” for React’s Flexbox settings, “row”. Hence the reason why in the React Native styling I had to set “align-items” to “center” instead of “justify-content” in order to get the “ScoreKeeper” title to center the same as the React web app. React Native’s default styling settings are set up to cater to mobile, but it really isn’t that major of a difference.
State and Props
The functional (stateless) components can be replaced with class (stateful) components in React Native just as they can be in React. Custom props can be created and passed down to other components just the same, also known as “prop drilling”. React Hooks, and lifecycle methods all work the same for both React and React Native, and so do alternative forms of state management such as Redux.
— — — — — — — — — — — — — — — — — — — — — — — —
Here I will build out the remainder of the app and conclude comparison between React web development and React Native mobile development.
Starting with the React web app:
The completed matching React Native version:
Final result:
Final Comparisons
There’s just a few more comparisons I wanted to make after showing the remainder of the code. The events I used in the React web app’s buttons were “onClick” props, and in React Native the correct prop for the “TouchableOpacity” (a type of button) is “onPress”, but this is still very similar.
Another thing I wanted to point out is that although you cannot use true CSS in React Native, you can do inline styling in both React and React Native, as I demonstrated in some of the <h2> and the <Text> components with the “style” prop.
Lastly, in React, you can put text in between a lot of different types of elements, but in React Native, text ONLY goes inside a <Text> component, which is why I had to add a <Text> component to every single <TouchableOpacity> in the above app.
Conclusion
Thank you for reading if you made it this far, I hope it helped you learn that jumping from React to React Native isn’t all that wild, although there are clearly differences. In general, a lot of the concepts and syntax are the same, after all, they were both made using the same library. The biggest differences between the two in my opinion aren’t huge mental hurdles, and if you already know some React, diving into React Native should be relatively simple. I personally recommend the 2020 React Native Udemy Course to jumpstart your learning. Happy coding!
