Why you should use React Native for your Web apps
React Native for Web, a web clone of the widely embraced React Native framework, is really something you should consider when doing a front-end not just for its prowess in cross-platform applications but as a standalone solution for web development.
React Native for Web, when if was originally created, was not supposed to be a clone of React Native. It was just supposed to bring a web SDK, inspired by React Native yes, but not a clone. At this time, it was called React Web SDK. The motivation probably lies into the fact that React itself, was a framework focused on the web but heavily relying on the DOM. Thus the name React DOM that we know this days. React is a low level library, and React DOM is the glue between React and the DOM. Like React Native is the glue between React and the native platforms. React DOM is just an implementation of the React reconciler for the DOM. There are other implementations like React Native for Windows and macOS or even @react-three/xr for VR content.
So back in time, React Native for Web creator, @necolas, probably just aimed to offer a simple set of primitives to build web applications, not explicitely tied to the DOM, like React Native offers for iOS and Android. Simple things like <View />, <Text />, <Image />, <ScrollView />, <Touchable /> and so on. But as the project grew, it became more and more a clone of React Native, with the same API, the same components, the same behavior, the same everything. And this is a good thing, because it means that you can use React Native for Web as a standalone solution for web development, not just as a companion for cross-platform applications.
Front-end developers all knows that consistency in styling is a perennial challenge in web development. React Native for Web offers a reliable styling solution. By relying on the CSS subset React Native offers (mainly Flexbox), developers can maintain consistent styles across browsers on all platforms. This consistency not only streamlines the development process but also ensures that the visual identity of the application remains cohesive, even if a mobile app is not in the immediate development pipeline. But React Native for Web was not just about CSS, as there were already many CSS-in-JS solutions available. It was about the whole web platform. And the result is a framework that could be used to build accessible web applications.
One standout feature of React Native for Web is its commitment to accessibility. HTML itself provides a lot of accessibility features, but it's not always easy to use them. React Native for Web, on the other hand, makes it easy to build accessible web applications. By exposing these accessibility features with simple React props like React Native does (even if there are differences, that might end up in React Native itself someday), developers can ensure that web applications built with React Native for Web are inclusive and adhere to web accessibility standards. This is particularly crucial for projects that prioritize accessibility or need to comply with industry regulations. But when we talk about the web plateform, we are not just talking about desktop. Mobile is a huge part of the web now.
React Native for Web brings the hallmark of React Native - high-quality, native-like user interactions - to the web. The framework's ability to easily handle gestures, animations, and transitions, honed in the mobile realm, translates seamlessly to web applications. This results in a web experience that almost mirrors the smooth and responsive interactions users have come to expect from native mobile applications. When using React Native for Web, a new world of possibilities opens up. You can now use libraries like React Native Gesture Handler and React Native Reanimated which opens the door to a whole new world of possibilities. You can now build web applications with the same level of interactions as native applications by simply using things like React Native Bottom Sheet. That's just an example but you can easily do so much more with these kind of libraries.
One of the key strengths of React Native for Web is its compatibility with React DOM, allowing for incremental adoption. Developers can gradually introduce React Native for Web components into an existing React application, selectively replacing parts of the UI. This incremental approach facilitates a smooth transition, enabling teams to integrate React Native for Web into their projects without the need for a full-scale rewrite. And on the other hand, if you directly start a project using React Native for Web, you are not stuck with React Native API. At any moment, you can just decide in some components to use React DOM API and use the whole web platform without any kind of limitation. You can use <div>, <canvas> or anything you want to. No restrictions ! And it's very easy to do so. You can rely on the Platform API or directly create a specific web file, using .web.js extension.
Wait what ? What did I just mention ? A web implementation for a given component ?
Even if your immediate plan does not include the development of an iOS or Android app, using React Native for Web can keep a door open to these platforms while the opposite isn't true. If you start a web app using React DOM directly, you won't easily be able to share your codebase with other platforms since you will be restricted to the DOM. The shared codebase and components between React Native for Web and React Native for mobile make it easier to extend the application to mobile platforms in the future. This strategic choice allows for flexibility in future development plans without the need for a complete overhaul of the existing web application, or worst and even more expensive: multiples implementations. You could even use your codebase for Windows or macOS applications using React Native for Windows and macOS, a project maintained by Microsoft, used on huge products like Office or the Windows Xbox app. Yes Microsoft Office and Xbox app use React Native API ! That's something isn't it ?
But keep in mind that React Native for Web is not just here as a capable companion for cross-platform development but mainly as a standalone powerhouse for web applications. With its commitment to accessibility, native-like interactions, styling consistency, and seamless incremental adoption, React Native for Web offers a versatile and robust solution. Moreover, by keeping the door open to future mobile platforms, developers can make strategic choices that allow for flexibility and scalability, making React Native for Web a key player in the dynamic landscape of web development.
And it might becomes something even more serious in the future. Necolas is working at Meta for a while now and made a lot of contributions to React itself to ensure a bright future for cross-platform codebase. If you are curious, you can take a look at its latest RFC: React DOM for Native or even the StyleX project that will end up in React Native and React Native for Web.
So next time you start a web app, consider using React Native for Web instead of React DOM directly. You won't regret it. I never did for the past years I have been using it.
