React Native: How To Get Started With React

What React Native is?

React Native is a rapidly expanding and popular framework for building cross-platform mobile apps. It uses JavaScript and React to render app interfaces and comes with its own UI components. This framework allows developers to take advantage of the benefits of using JavaScript, like fast development time and easy data management, while also allowing users to use their favorite native mobile SDKs. Developers can share code between platforms with React Native, which is absolutely flawless for teams working on multiple projects.

You may also be interested in : “AWS Cloud Development Kit using Java”

React Native: Core Components and Native Components

It is an open-source mobile application development framework for users to develop Android and iOS applications using React and the native platform’s capabilities. This framework allows you to use JavaScript for accessing your platform’s APIs and describe the appearance of your user interface using React components: blocks of reusable, nested code.

Native Components

We use Java or Kotlin to write views in Android development; in IOS development we use Swift or Objective C. We can easily invoke these views with JavaScript using React components using Native. It creates the corresponding Android and iOS views for those components at runtime. Since the Native components are backed by the same views as Android and iOS, Native apps look, feel, and perform like any other apps. These are platform-backed components Native Components.

Core Components

React comes with a set of important, ready-to-use native Components we can use to start building our app instantly. These are React Native’s Core Components. However, React gives us the opportunity to build our own Native Components for both Android and iOS to suit our app’s individual needs. React Native has many core components, but here I’ll only show you the most used core components below.

Development Environment Setup

There are two ways you can set up the development involvement for your first React Native project.

Expo CLI

The best way for beginners to get started is to develop an application using Expo CLI. Expo is a set of tools built for React Native, and the most helpful thing for us now is that it allows us to build apps using this framework in the nick of time. You just need an up-to-date version of Node.js and a phone or emulator. If you’d like to try Native directly in your web browser without installing any tools, you can try out the Snack.expo.dev to get started with any project involving React Native.

React Native CLI

If you have experience in mobile development, you can use React Native CLI. Xcode or Android Studio is necessary to get started with React Native CLI. If you already have one of these apps installed, you should be able to get started in a few minutes. If they are not available already, expect to spend an hour installing and setting them up.

Starting with the Expo CLI on Windows

If you have Node 12 LTS or the latest version installed, you can use npm to install the Expo CLI command-line utility. Otherwise, you may need to install Node 12 LTS or the newest version first. You can check your version of the Node you’re using by typing this command below:

C:Usersuser>node -v
C:Usersuser>node --version

Now run the following command to install the Expo CLI on your machine.

C:Usersuser>npm install -g expo-cli.

Depending on your PC’s configuration and internet speed, it may take a while to install Expo CLI on your PC (around 5-10 min). 

After completing the installation process, type this command to see the version of Expo CLI.

C:Usersuser>expo --version

Now that everything is set up and running, we’re good to go to create our first project with React Native.

Creating Our First React Native App

You can create the project folder wherever you want, and it’s up to you. I will create a folder on my Desktop called “ReactNative” Now type the following commands to create your very first app:

C:UsersuserDesktopReactNative>expo init MyFirstApp

Now the project is ready! To run the project, we need to the project directory and run the following commands.

C:UsersuserDesktopReactNative>cd MyFirstApp

Now type the following commands below to start the development server for you. You can open iOS, Android, or Web from here or run them directly with the specific command.

C:UsersuserDesktopReactNativeMyFirstApp>npm start
C:UsersuserDesktopReactNativeMyFirstApp>npm run android
C:UsersuserDesktopReactNativeMyFirstApp>npm run ios
C:UsersuserDesktopReactNativeMyFirstApp>npm run web

The result might be as follows:

http://localhost:19002/ is the development tools URL. Visit this URL in your favorite web browser. And click on the link wherever you want to see the result. I’m going to click on the “Run in web browser” the result should be as follows:

Now open up the App.js file with your favorite code editor in the project folder. I’m going to open it in Notepad++ and add some basic code to it.

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function app(){
    return(
        <View style = {styles.container}>
            <Text style = {style.cong}> Congratulations! </Text>
            <Text> You've built your first React Native App. </Text>
            <StatusBar style = "auto"/>
        </View>
    );
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    cong:{
        backgroundColor: 'red',
        padding: '10px',
    },
});

How React Native Helps To Build a Fantastic App Development Career

React Native allows you to target mobile devices directly with it instead of browsers, and you can use this function to compose native applications for android and iPhone. It is a fantastic technology to get into. If you would like to learn React, below are some reasons you should choose to build a fantastic app development career.

• It is easy to learn
• It is similar to React.js, so you don’t have to learn extra things
• Lack of competition
• It is a high paying service

The React Native framework is a dynamic platform that assists you in making efficient and instinctive mobile apps using your existing knowledge of JavaScript. React makes it simple for you to build mobile applications that run on a variety of platforms like Android and iOS with seamless codes without compromising the UI and user experience. React Native will undoubtedly do well in the IT industry.

In conclusion, React Native is a popular framework for mobile app development because it offers cross-platform support for both Android and iOS without violating the interface or user experience.

React Native has proven to be an effective way to create high-performance cross-platform apps. The key is finding the right balance between native and web technologies.

Find our other React blogs here.

Unimedia Technology

Here at Unimedia Technology we have a team of Cloud Native Developers that can help you develop your most complex AWS and Azure Applications.