I have just begun learning React Native, transitioning from ReactJS. The core difference between ReactJS and React Native is that ReactJS runs on a web platform whereas React Native runs on a mobile platform. But, there are many more key differences between them that new developers should keep in mind. Here are some of the differences I’ve noticed when developing in React Native.
Getting Started
ReactJS and React Native use a similar but different setup.
ReactJS Setup:
npm install -g create-react-app
create-react-app [app name]
cd [app name]
npm startReact Native Setup:
npm install -g create-react-native-app
create-react-native [app name]
cd [app name]
npm startHowever, unlike ReactJS that runs on a browser, to run your react native app, you will need a mobile device or simulator.
Android Studio
Install Android Studio to run React Native code on an android simulator.
Follow these steps to download and setup Android Studio.
Select “React Native CLI Quickstart” tab. Select your computer’s operating system as the Development OS and “Android” as the Target OS for simulating in android. You can select any combination of Development OS and Target OS that fits your needs. After completing the steps, you now have a platform to run your react native code on.
Working with the DOM
React Native does not use HTML elements to render their components. They use alternative components that work similarly to their HTML counterparts. For example, <View> elements in react native serve similar purpose as <div> elements in ReactJS. Likewise, <Text> elements are closely related to <p> elements. One difference is that <Text> and <View> elements are built-in components in React Native. Another difference is events. In ReactJS, onClick events are most commonly used, but in React Native, there is no onClick events. React Native uses onPress events because you press on your mobile device, different from clicking on the DOM with the cursor.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.intro}>Hello world!</Text>
</View>
);
}
}Styling in React Native
In ReactJS, you utilize HTML files and CSS files to render your application on the browser, but React Native is not made from web elements and can’t be styled the same way. You will have to create your own stylesheets using React Native. Fortunately, the code looks similar to CSS, but don’t forget it’s not the same.
import { StyleSheet } from 'react-native';const styles = StyleSheet.create({
container: {
flex: 1,
},
content: {
backgroundColor: '#fff',
padding: 30,
},
button: {
alignSelf: 'center',
marginTop: 20,
width: 100,
},
});
Developer Tools
React Native provides built-in developer tools that are very useful for testing.
These are some of the useful developer tools built in React Native that helped me test my code when creating my first React Native application.
Reload
Refreshes the application. Updates any changes made on React Native.
Debug JS Remotely
Allows you debug JS remotely on a browser.
Enable Live Reload
Refreshes automatically when you make changes on React Native.
Conclusion
Building my first React Native application was a good learning experience. I would say that these are some differences that I can tolerate coming from ReactJS. They don’t make a big impact in regards to using React, but these are important differences that developers should know when they’re working with React Native. My transition from ReactJS to React Native is quite easy and I encourage others to give React Native a try.
