In the past few months I’ve been doing work with React Native, which is a change of pace from the React web apps I was more familiar with developing. Now that i’ve gained experience with React Native, I’m going to explain a bit how React Native differs from React for the web, and what to expect when developing with React Native.
state , and all the standard React component lifecycle methods. You can use the same state management libraries (e.g. Redux) in React Native as you would for React on the web.
React Native stills uses JSX as the templating language in the component’s render method to define the UI. Although the base components used in React Native aren’t DOM elements, like
<div>, you still use the same syntax since it’s all JSX.
console.log() statements and read the output in a browser’s console. You can also inspect XHR requests being made and if you’re using Redux, you can take advantage of the Redux Devtools as well.
npm and you will see all those lovely dependencies tracked in a
package.json file. This allows you to take advantage of all the packages NPM has to offer and so popular dependencies such as
immutable can be used in React Native projects. However, any dependency that relies on HTML, SVGs or the browser canvas will not be usable with React Native.
React native comes with a set of built-in components that can be used to render UI elements on the page. These are different than the standard
<input>, and other DOM elements that are used with React on the web. Some of the React Native built-in components include
<Image>. There are of course many other and there are also some 3rd party components that can be downloaded from NPM.
Styling isn’t done with CSS in React Native, however the syntax is quite similar. To apply styles in React Native, a
StyleSheet object is created and applied to a component’s
style attribute. The property and values used in the
StyleSheet object are similar to what you would find in CSS, but the naming uses camelCase and there are also many features missing in the React Native styles that you would otherwise find in regular CSS.
Styling on the web:
Styling on native:
Routing & Navigation
Honestly, incorporating Navigation on Native can be painful when dealing with complex nested routing and styling navigation related elements isn’t always obvious. Routing React web apps is much simpler.
Platform Specific Code
React Native can detect which platform an application is running on (iOS or Android) and serve a different set of code based on that platform. This can either be done by separating React Components into files ending in
android.js or it can be done using the Platform module that ships with React Native.
The React Native architecture is quite interesting and you can find many good talks on YouTube from the Facebook developers talking about the inner workings of React Native. Here’s two talks worth checking out if you’re interested in learning more: one, two.
Ok, real talk: developing for the web is more pleasant then developing for mobile. React Native doesn’t have as large of a developer community than the the community surrounding web applications, so it isn’t surprising that the tooling isn’t as great for React Native. Debugging code in React Native can be difficult at times which can be the cause of some frustration.
Although React Native is arguably the best tool for cross platform mobile apps, i’m hoping that Progressive Web Applications continue to grow in popularity and will eventually allow for responsive web applications to include native mobile functionality. When that day comes, developers will be able to develop a web application that is responsive, include some native mobile functionalities through browser APIs, and only have to worry about one codebase!