React has become a popular library to build websites, earning second place in the most loved libraries according to the 2018 Stack Overflow survey. In the same way, React Native has also been increasing its popularity. However, there are some differences between these two technologies that we would like to discuss with you today: React vs React Native.
Library vs Framework
React on the web modifies the browser DOM using a browser-independent DOM system for performance and cross-browser compatibility. When using React Native, mobile apps are rendered natively; therefore, an Android project can create an Android native LinearLayout with a Text inside. Similarly, an iOS app will render a UILabel inside a UIView.
For that reason, the naming convention is different on both platforms. The React library lets us use the same HTML tags we use on the web, for example, “div”, and “p”, while in the React Native framework, we have to use a more generic naming for UI components like View and Text.
Animations are another feature that is done differently on React and React Native. On the web, we can use the famous CSS animation, but on React Native we should use the Animations API. We can see an example on the official documentation:
Of course navigation on the web is different from navigation on the native code. In this case, the number of libraries to navigate between pages and screen is too high and the choice is personal. We recommend react-router for React and React Navigation for React Native.
React Native on the web
What if you want to build a single app and use it in Android, iOS and the web? During his time in Twitter, Nicolas Gallagher created a library to achieve this, which is currently used by Twitter, Major League Soccer, Flipkart, PlayStation, Uber, and The Times. React Native for the web makes it possible to run React Native components and APIs on the web using React DOM.
You can see a list of examples here: http://necolas.github.io/react-native-web/examples/
React vs React Native: They have several similarities that allow developers to build modern websites and native mobile apps in less time. Learning these differences allows a developer to build websites and mobile apps indistinctly. Additionally, new libraries like React Native web make it even easier to share code between web and mobile environments.