What to Know About React Native After Working in React
I’ve used React to build several web apps, and I’ve enjoyed working with it, especially for larger apps. Having only looked into mobile development a little bit, I was curious about what the learning curve would be for someone with my background trying to learn React Native. In this blog post, I will outline the high-level similarities and differences between React and React Native, and go over what stood out to me as someone familiar with the former but not the latter.
What’s The Same
It’s tough to narrow it down because there’s a lot more similarities between React and React Native than there are differences. In both cases, you’re using React to build reusable UI components that make use of state and props to dynamically update.
Here’s a simple “Hello” component in React:
And here’s a “Hello, world!” in React Native:
They largely look the same, with a few differences. Let’s get into those now.
What’s Different
No HTML
In React, you can write components in a combination of Javascript and JSX that are rendered to the DOM. Thus, you can structure React components using the HTML tags you otherwise would in web development.
In React Native, you use React to build components that compile to native mobile environment code. This means there is no HTML or manipulating the DOM, as you’re dealing with a native mobile environment instead of the web. React Native has its own built-in components for these elements, such as View, Text, TextInput, and many more. While this is largely a manner of learning new vocabulary, it has other side effects, such as…
No CSS
Since there’s no HTML in React Native, you can’t use CSS to style it. It doesn’t end up looking so different, but you have to define the styles within your component before you apply them. Here’s an example from the React Native docs:
One of the smaller differences you may notice is needing to camelcase style properties like fontWeight instead of hyphenating them like you may be used to seeing in CSS. One of the bigger differences is that you must use Flexbox in React Native. Flexbox is a popular grid-based layout style that is also available in CSS, but in CSS it is one of several options instead of the default one.
Event Handlers
Lastly, in considering the differences between the web and mobile environments, simply dealing with click handlers and text inputs is no longer sufficient.
React Native has a robust set of platform-specific event handlers used to deal with common mobile behavior such as swiping, scrolling with a finger, and pinching to zoom in.
Conclusion
I hope you found this to be a helpful overview of the similarities and differences between React and React Native. If you would like to explore this subject further, I encourage you to check out the resources below:
