A simple tutorial to help you build your app with React Native.
In this article, we will be teaching the basics when it comes to React Native and also further explaining how to create your first app with React Native.
Although it's not a mandatory step, still, we highly recommend creating a couple of sketch designs regarding your app so that you can get some sort of guidance regarding your app's aim. Creating some sketches is great as you get the rough idea of the app's flow and it also saves a lot of time.
The first and the obvious step is to install react, here is the LINK where you can download it from. When it comes to building a React Native application, there are two ways by which it can be done:
a) you can use a toolchain to build the app
b) you can move ahead without using any toolchain.
Our team of experts suggests that it is better to proceed with toolchain as it helps to smoothen out the process of app building. Let's take an example of an Expo, a toolchain that was turned into the create-react-native-app library that removes many barriers from the front-end development segment.
For today, let’s move ahead without the use of toolchain but don’t worry at the end of this article we will be sharing a few of the most popular reasons why to use React toolchains with you.
Screens: These are known to be our main views.
Assets: There two folders in this directory called images and animations.
Components: This is the location where you will put all your shared components.
Config: You can set up your app’s color scheme in a colors.js file to keep things managed.
Firstly, install it once globally:
$ npm install -g create-react-native-app
$ yarn global add create-react-native-app
You need to make sure to use Node v6 or a version after it with npm v3 or npm v4 version of Yarn. We are not asking you to use the npm v5 because of the bugs issues faced in that npm version.
Then to create an app, run:
$ create-react-native-app my-app
$ cd my-app
After running the above-mentioned line of codes, a directory will be created by the name 'my-app' inside the current working directory. This will further generate the initial structure of the project inside 'my-app' so go ahead and install all its dependencies.
If you are previous experience with React Native, you will be aware of the fact that you won't be seeing any 'android' or 'ios' directories. So once the installation is complete, some commands are to be run in the project directory by you:
It will run your app in development mode with an interactive prompt and to run it without a prompt, use the '--no-interactive' flag.
If you want to view it, then open it in the Expo app on your mobile phone to view the file. And it will reload itself if you save edits to your files. With this, you can also see the build errors surfaced and log at the terminal.
It runs the JEST test runner for your tests.
It's like npm start, but this also attempts to open your app in the iOS Simulator if you're on a Mac device or have it installed.
Like npm start, this one also attempts to open your app on a connected Android device or even an emulator. But it requires an installation of Android build tools.
It will start the process of 'ejecting from Create React Native App's build scripts. And then you'll be asked a few questions about how you'd like to build your project.
Here are the few of the main reasons why you should use React toolchains when building an app with React Native:
We hope you liked this short and quick guide on how to build an app using React Native.
Twinkle is an experienced business and marketing consultant of the mobile app industry. She advocates perfect branding to the latest tech releases. She is passionate about writing well-researched reports to help the app owners and the mobile app industry audience. Also, she has a vibrant touch that goes well in her writing as well.