How to Create React Native App From Scratch

Quick Summary

If you are wondering How to Create React Native App then you are at the right place. While creating a React native app you need to follow React native project structure. Here you can see a step-by-step guide to creating a React native app for your business. If you are a beginner then you can easily build a React native app by following these steps.

React native is a JavaScript-based framework that is used to develop real-time native mobile applications for Android and iOS. If you are thinking about how to create a new React native project then you should be aware that it only uses JavaScript to build a mobile app.

Here you can see some of the skills and tools that you require when you are trying to figure out how to build a React native app from scratch.

• Basic knowledge of HTML, CSS, and JS(Javascript) 
• Before you start going through the tutorial, you will need to install NodeJs which will install NPM with it.
• You need to have a good editor to work with the project files. You can install, use, and create a react native app in Visual Studio code.

Setup of the react-native environment:

If you are trying to figure out how to build and run react native app, you need to understand that it is necessary to set up the react-native environment before you start creating a react native project. Here you can see steps to set up the environment and various code editors that you can use.

• You must follow this link to set up the environment for creating the react-native apps.

• For a code editor, you can use any editor of your choice such as Visual Studio Code, Android Studio, Sublime Text, or Atom.

6 Steps to Create React Native App from Scratch

When you wonder how to create react native app you need to follow the steps that are mentioned below. By following these steps you can easily create a react app quickly without any problems.

Step 1: Init a React Native Application

To Create React Native App, you need to follow this step-by-step tutorial.
Open the Command Prompt and go to the path where you want to create the project.

Ex: Documents\project\MyFirstReactNativeProject

Init App:

npx react-native init my-first-react-native-app

The execution of the above command will help you create a folder name with my-first-react-native-app automatically on your system. And all the required packages will be installed, too.

Step 2: Overview of Default React Native App Structure

After the installation of the required project files, your project structure may look something like this:

First, you create a new app in react-native then it looks like this.

Now let’s understand the basic usage of these files and folders that are mentioned below.

Node_modules:

It is a folder with all of the Create React-Native App installed dependency-related code. There will not be any need to access this folder.

package.json

It’s a file created by NPM. It contains all the metadata, dependencies, and scripts for your app. One of the important things the package file lists are the dependencies. Dependencies are modules or packages that are going to be used within your app.

.gitignore

It is a file that tells Git not to monitor certain files and folders. Actually, we would not need any large folder, such as the node_modules folder.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const App = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Hello World!</Text>
        </View>
    )
}

export default App

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        fontSize: 18,
        fontWeight: 'bold'
    }
})

The output of App.js file

“App. js” is the starting point of your Application and Main component that starts your whole app

Step 3: Overview of Custom React Native App Structure

This is the new project structure of react native project:

• assets: Asset folder to store all images, vectors, fonts, etc.
• src: This folder is the main container of all the code inside your application.This folder has the source code and all React-native related code. Eventually, we will work mostly on it to create a React Native project.
  • components: Folder to store any common component that are used in app (such as a generic button).
  • Config: Folder to store api config, notification config that are used in app.
  • constants: Folder to store any kind of constant that are used in app.
  • navigation: Folder to store the navigators that are used in app.
  • redux: Folder to store the redux related things such as actions, reducers and store that are used in app.
  • screens: Folder to store all the screens/features that are used in app.
  • styles: Folder to store common styles/global styles that are used in app.
  • utils: Folder to store any common function such as calculate radius, different date formatting functions, common strings and common colours that are used in app.
• App.js: Main component that starts your whole app.
• index.js: Entry point of your application as per React-Native standards.

Step 4: Run your application

To run your application on an Android and ios device, open a new terminal window and navigate to your project directory. Then run one of the following commands, depending on your platform.

For Android:

1. Using npx:

npx react-native run-android

2. Using yarn:

yarn run android
yarn android

For IOS:

1. Using npx:

npx react-native run-ios

2. Using yarn:

yarn run ios
yarn ios

These commands will build your app and launch it on the specified platform.

Step 5: Make Changes to Your App

Developers may want to modify the code to improve react native performance. Now that your project is set up, you can start making changes to your app. Open the project directory in your preferred code editor and modify the source code files to create the desired application.

Step 6: React Native Debugging

1. Use console.log() statements:

The easiest way to debug a React Native app is by using console.log() statements. You can add console.log() statements to your code to output variables, objects, and other data to the console. This can help you to identify issues in your code.

2. Use the Chrome debugger:

React Native provides a Chrome debugger that you can use to debug your app. To use the Chrome debugger, open your app on an Android device or emulator and shake your device to open the developer menu. Then select ‘Debug with Chrome ’.This will open a new tab in Chrome and allow you to debug your app using the Chrome Developer Tools. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on macOS, and Ctrl+M on Windows and Linux.

By using these tools and techniques, you can identify and fix issues in your app, and create a high-quality app for your users.

Conclusion

I hope that the steps mentioned above are useful for you to create a react native app. For new developers, these steps can be helpful to create a simple react native app and they can learn some new things from this blog. You can even hire React native app developers if you want to have a fully-functional cross-platform application for your business.

FAQ’S: