DEV Community

Cover image for React Native for Web Developers
joespaf
joespaf

Posted on

React Native for Web Developers

#webdev #react #reactnative #javascript

One of the libraries that new web developers quickly become familiar with is React. Its integration of HTML and JavaScript into one document can supercharge development, allowing developers to quickly and clearly block out and implement features to webpages. However, as mobile usage continues to eclipse desktop, the need for native mobile apps has become paramount. Luckily for web developers, a simple bridge between web and native development exists in React Native.

What is React Native?

"React Native brings the best parts of developing with React to native development." -React Native Docs

React Native is a library that translates the straightforward syntax of React into a native app, allowing your projects to be run seamlessly within a user's device. It avoids the hiccups of running a browser by cutting it out entirely.

No browser? How does the app render?

Instead of a browser, React Native uses the native API's of the device it is running on to display the app. This does require a number of changes from your typical React code, but much of the basic logic and structure remains the same. The most notable difference is the lack of a traditional DOM.

What replaces the DOM?

In a web app, the browser creates a DOM to represent the whole of the page, all its elements, and all attributes of those elements. In React, the DOM is populated with components, represented by HTML tags. React Native keeps the style and structure of these tags, but switches the HTML out for its own components.

HTML tags and their React Native counterparts;

<span> => <Text>
<img> => <Image>
<div> => <View>
Enter fullscreen mode Exit fullscreen mode

Styling without CSS

React Native does not have a built in way to use CSS. Instead, styling is provided to components as a JavaScript object. It can be provided inline, with the declaration of the component, or the StyleSheet module can be used to provide styles to components.

Example styling

// inline
<View style={{ padding : 15 }} />

// using StyleSheet
import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  container: {
    padding: 15
    backgroundColor: '#fff'
  }
});

<View style={styles.container} />
Enter fullscreen mode Exit fullscreen mode

Navigation without a browser

One of the most significant differences between React and React Native is navigation. In a React web app, navigation is often handled with changes to the URL, which libraries like react-router take full advantage of. A native app handles displays in a fundamentally different way. Both iOS and Android phones display Screens, and they handle navigation between Screens as a stack, where a new Screen enters on top of the previous one. From a Screen, a user can go back down the stack to previous Screens.

A simple graphic of a phone with layered panels labeled

Where does the JavaScript go?

JavaScript in React Native behaves much the same as it does in a browser environment, just with a few exceptions. Most notably, it loses access to values and APIs that the browser would provide, like document, window, and workers. Other than that, JavaScript can be used similarly to how it is used in any other React app.

Community support

React famously has countless officially supported and community maintained libraries that expand its capabilities. Similarly, React Native has a plethora of options for almost any use case.

Final Thoughts

React Native is a familiar yet powerful tool that web developers can use to apply their existing skills to app development. Its widespread usage, unopinionated framework, and community support make it invaluable for any developer looking to dip their feet into native apps.

Top comments (0)