ReactJS vs React Native in 2023, Unraveling the Differences
Hey there, friends! Today, we’ll unravel the differences between ReactJS and React Native. Are you ready to dive into the world of web and mobile development? Let's get started!
React JS and React Native are two popular technologies that are often mistaken for each other. But what sets them apart? And when should you use one over the other? Which should you start by learning? We’re about to dive deep into their common core and differences — some glaringly obvious and others quite subtle. And by the end, you’ll have the means to make informed decisions for your next project… and give you pointers for the cases when you need to use both!
But before we dive deep, let’s get the glaringly obvious out of the way from the start: React JS is used for building Web interfaces. React Native is primarily used to develop mobile applications.
Presumably, you know that already — I mean, there was a clue in the names! So let’s start by exploring what React Native and React JS have in common.
Commonalities between React JS and React Native
React JS and React Native are open-source libraries developed by Facebook that share several core concepts and features.
In particular, React JS and React Native share the same React core, which includes the underlying algorithms for handling state, components, and rendering.
If you’re familiar with React JS, you should have no trouble adapting to React Native and vice versa.
This also means that React JS and React Native use components. And components encourage reusability and modularity.
Both libraries also use JSX, a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript.
Both libraries have the same use state and props. And both libraries support React Hooks, which simplify component logic and encourage the use of functional components.
Although React JS and React Native share these core concepts, they have different purposes and target platforms. This has several implications for the differences between the two libraries.
Differences between React JS and React Native
First, React JS uses standard HTML elements as components (e.g., div, span, img…), while React Native has specific components (e.g., View, Text, Image) that map to native UI elements on the target platform. Although a <View> component maps conceptually to a <div> and a <Text> component maps to a <span>, they are not precisely the same, and the differences might trip you up.
Whereas React JS renders components using HTML and CSS, React Native renders components using native UI components of the target platform.
In the same way, React JS uses standard CSS for styling and layout. With React JS, you can use classes, media queries, and animations. React Native, on the other hand, uses what feels like a subset of CSS styling — for example, it only supports Flexbox layout, and its defaults are not the same as the Web’s.
Likewise, navigating between screens is URL-based using React, typically using the React Router library. However, you don’t navigate between views with URLs on mobile, so React Native recommends you use the React Navigation library.
And, of course, where you can test React output directly in your browser, you’re better off using Expo to supplement React Native. And you’ll need simulators and Android and iOS SDKs. Ideally, you also need to test on physical devices.
What if you can’t choose?
But what if you need to create a website and an app? What then? The best solution is to share code between React Native and React JS. Or, more precisely, between React Native and Next JS, which is quickly becoming the reference implementation of React-based websites.
And your best bet, in this case, is to use a mono repository setup that allows you to share code and logic across both applications. One solution is T3 Create Turbo, a mono-repo using Turborepo, Expo, Next JS, Prisma and tRPC.
Another solution I’ve encountered is TamaGUI , a UI component library that allows you to set up a common interface language. However, the starter for TamaGUI also sets up a mono repo with NextJS and Expo, i.e. React Native and ReactJS. In addition, it relies on the Solito library, which allows you to share navigation logic between React Native and React JS.
Which should you start with?
If you’re wondering which to learn, I recommend starting with React JS. Why? For two reasons. First, all the basics of React apply to React Native. In fact, the React Native document will regularly refer you to the React website for further reading. Second, the React tutorial (particularly the TicTacToe project on the React website) is very well-made and educational. It’s how I started learning React a few years back, and the tutorial has stood the test.
And if you want to keep learning with me… I’ll see you in the next video!
