Bukunmi Odugbesan
A frontend engineer with a desire to be a JavaScript expert
Article by Gigson Expert
React and React Native were built by Meta to address specific changes in mobile and web development. React, a JavaScript library for building user interfaces, was built to address the need for dynamic, high-performing interfaces. React Native was built to solve the problem of developing native applications for multiple platforms(IOS and Android) using a single codebase. They both share the same foundational philosophy (components and state management), but have different use cases and characteristics.
Why React Was Created
- Inefficiencies in traditional web development: Before React was built, building complex and interactive user interfaces with efficiency was difficult. Manipulating the DOM directly could be slow and lead to performance issues.
- Component-based architecture: React introduced a component-based approach, allowing developers to build reusable elements, manage state more effectively. This improved code organization and maintainability
- Virtual DOM for efficient rendering: React’s provision of a virtual DOM allowed for optimised updates to the actual DOM, leading to faster and smoother user experiences. Rather than re-rendering the entire page when data changes are made, React calculates the minimal changes needed and only updates that part of the DOM.
Why React Native Was Created
- Platform-specific development challenges: Originally, building native mobile apps required separate codebases and development teams for IOS(Objective-C/Swift) and Android(Java/Kotlin), which was time-consuming and resource-heavy.
- Leveraging existing web development knowledge: Transitioning into mobile app development was easier for developers with knowledge of React and JavaScript because they could reuse knowledge and a significant portion of their codebase.
React vs React Native
- Target Platform: The first and most important distinction between React and React Native is that they are built to create applications for different platforms. React is a JavaScript library used for building user interfaces on the web, while React Native is a framework built on React that specifically targets mobile operating systems. React renders in the browser’s DOM, while React Native renders actual native mobile UI components.
- Rendering Mechanism: The rendering philosophy is where the divergence is most technical. In React, a component might render a <div>: In React Native, the same logic renders a platform native <View> element, leveraging the device’s native rendering capabilities. React uses the virtual DOM to efficiently reconcile and update HTML elements in the browser. React Native uses Native APIs to render actual platform-specific UI components.
- Component Structure: The component vocabulary is completely different. React uses HTML tags
<p>, <img>, <div>.React Native uses a set of core components that map directly to native UI components<View>,<Text>, and<Image>. This encourages developers to think in terms of native mobile paradigms, ensuring the final app follows OS-specific accessibility and design guidelines.
- Styling: Web developers moving to mobile often find the styling difference most shocking. React relies on the established web ecosystem, using CSS or CSS-in-JS libraries for styling. React Native uses a JavaScript-based stylesheet API where styles are objects, not traditional CSS strings, and only a subset of CSS properties are supported. Transitioning developers leave behind the full power of CSS in favor of a JavaScript object approach, which is designed to cleanly integrate with native layout systems like flexbox.
- Performance: React offers excellent performance for the web via the virtual DOM. React Native offers near-native performance on mobile, often superior to traditional hybrid apps that rely on WebViews. React Native’s strength in compiling to native code, bypassing the WebView bottleneck and giving a smoother experience that’s hard to distinguish from an app built in Swift or Kotlin.
- Navigation: Mobile app structure follows different conventions from the web. Developers will transition from thinking about ‘routes’ and ‘pages’ to ‘stacks’ and ‘screens’ - a conceptual shift necessary to provide the expected native user flow, complete with platform-specific transitions. React navigation is basically URL-driven. React Native uses stack-based and tab-based navigation concepts to mimic native mobile flows.
- Access to Native features: React is restricted to browser APIs and cannot access device features like the camera, GPS, or push notifications. React Native provides direct or library-based access to Native Device APIs.
- Code Reusability: React’s code is not inherently reusable without a separate tool like React Native Web. While logic can be shared, the UI components themselves often require platform-specific tuning or separate files.
- Long-term maintenance and project scope: The final choice is dictated by the project's long-term vision. If you need a web app with strong SEO and browser flexibility, React is your winner. If your priority is market speed and a consistent experience across iOS and Android with a single team, the cross-platform efficiency of React Native is unmatched.
- Development ecosystem and tooling: The tooling is a major difference in the day-to-day work. Setting up a React Native environment is generally more complex than a standard React project because it requires native development kits, emulators, and specialized mobile bundlers like Expo. React utilizes standard web tooling: Webpack, Babel, browser DevTools, and React Router for navigation. React Native relies on mobile-centric tooling: Metro Bundler, Xcode/Android Studio, and React Navigation.
Difference Between React and React Native Code
The best way to show the difference between React and React Native is to compare how they handle fundamental building blocks and styling. For example, if you want to wrap a group of text in a container in React, you use the <div> tag.
<div>
<p> This is an example of a text </p>
<p>This is another example of a text</p>
<div>In React Native, the <View> tag is the appropriate choice.
<View>
<p> This is an example of a text </p>
<p>This is another example of a text</p>
</View>To render texts on a page in React, you use the <p> tag.
<p> I am a boy </p>
In React Native, the <Text> tag is used
<Text> I am a boy </Text>React uses the web attribute “className” to link to a separate CSS file or module. React Native uses the “style” prop, which points to a JavaScript style Object.
How Styling Differences Affect Component Design
- Conditional Styling: In React Native, conditional styling is done directly in JavaScript, not through CSS manipulation. In React, you toggle CSS class names based on state. E.g
className = {isActive? ‘active’ : ’inactive’}
In React Native, you pass an array of style objects to the style prop, and the latter styles override the former.<View style={[styles.base, isActive && styles.active]} />
- No Pseudo-classes: The absence of
‘:hover’, ‘:active’and other pseudo-classes means that feedback from interactions must be handled using specific native components. For example, React Native uses<TouchableOpacity>instead of styling a button’s‘:active’state with CSS.
Conclusion
React is your best choice for web interfaces where SEO and browser capabilities matter. React is your best choice for web interfaces where SEO and browser capabilities matter. React Native is ideal for fast, cross-platform mobile development with native performance. Many teams use both in parallel, sharing logic but tailoring UI to each platform.
Frequently Asked Questions
Is React Native just React wrapped in a mobile app?
No. While React Native is built on top of react principles and uses the same Javascript syntax, it uses a completely different rendering layer which uses a bridge to communicate with native APIs rather than rendering to the browser’s DOM like in React.
Can I use React Native to build a desktop app?
Yes. There are community driven projects like React Native Windows and React Native MacOS that extend the framework to desktop platforms.
Can I use my React code directly in a React Native project?
You can use the majority of your non-UI code like
.webp)
