3 Easy Steps for Setting up React Native Development Environment
Tags: reactnative
Published: 2023-02-10 05:59:29

<p class="paragraph"> One of the top cross-platform Interface frameworks for
developers in 2022 is undoubtedly <b>React Native</b>. It was introduced by Meta early
in 2015 and is now the best-known UI framework supporting cross-platform
development.  </p><p class="paragraph"> We can create apps with React Native for almost every known
mobile, web, and Smart TV operating system, spanning Android, iOS, macOS,
Android TV, tvOS, and Windows. Going to set up the <a href="https://www.4waytechnologies.com/react-native-app-development">React Native Development</a> Environment
ought to be the initial stage of your project, regardless of the platform you
are developing on.  </p><p class="paragraph"> We will discuss how to set up the React Native Development
Environment for Windows in this article.  </p><p class="paragraph"> It can also be configured in iOS, but
we'll learn how to do it in a future blog post. </p><h2>Why is a development environment necessary?</h2><p class="paragraph"> Before deploying our codes, we need to construct and edit
them locally in a development environment. This gives programmers a significant
deal of freedom and flexibility. </p><p class="paragraph"> Simply said, a development environment is a work area where
we conduct development. A development environment is often made up of many
resources and services that help us create the program or write the code for
the application we want. This help can take many different forms and typically
includes everything we would require when coding for our projects. </p><ul><li>The majority of development environments have built-in
debugging and patching facilities.</li><li>They frequently help with activities related to maintaining and updating our codes.<br></li><li>Integrated Development Environments, or IDEs, give us a synchronized interface to inspect our programs as we build them. This is how we typically work today.<br></li><li>&nbsp;For developers, the entire development process—writing, testing, and packaging—is greatly simplified.<br></li></ul><p class="paragraph"> It is crucial to remember that development environments
might be toolkit environments or single-language settings.&nbsp;  </p><p class="paragraph"> Knowing that React Native is supposed to be a
framework that supports several different languages, it should come as no
surprise that we use toolkit environments when developing on React Native. </p><h2>React Native Development Environment Setup</h2><p class="paragraph"> When developing for React Native, we typically use the Expo
CLI or React Native CLI in conjunction with Android Studio as well as XCode.
 </p><p class="paragraph"> You are free to utilize any of these for the projects you work on, but if
you're unsure which is best for you, my article may be able to help. </p><h3>Expo Snack</h3><p class="paragraph"> Snack is a browser-based programming environment for React
Native Development, or as its creators like to refer to it, a playground.
That's true, you don't need to set up any IDEs, customize them, install CLIs,
or start off totally committed to React Native. You may easily start developing
any React Native project by going to the Snack web environment. It is ideal for
both novices and senior citizens who want to experiment a little. You can
simply create, debug, and bundle your codes thanks to it. </p><p class="paragraph"> But we're here on a more serious journey. We'll talk about
how to set up a React Native development environment on your system. There are
two options, one of which is simpler. Let's explore those! </p><h3>Expo Go</h3><p class="paragraph"> If you are new to mobile development, Expo Go is suggested
for starting up a React Native development environment for creating mobile user
interfaces. As we will discover in a moment, setting up Expo Go is pretty
simple. A number of helpful features that are based on React Native are
included with Expo Go. All that is required to establish Expo Go is one
emulator as well as the latest edition of Node.js, and you should be all set. </p><p class="paragraph"> Let's make a "<b>MyfirstProject</b>" React Native project
in Expo Go! </p><p class="paragraph"> You can quickly launch a development server if you're using
npm by: </p><pre><code class="code-block">npx create-expo-app MyfirstProject 
cd MyfirstProject
npm start 
# you can also use: npx expo start
</code></pre><p class="paragraph"> For launching this development
server using yarn:  </p><pre><code class="code-block">yarn create expo-app MyfirstProject
cd MyfirstProject
yarn start 
# you can also use: yarn expo start
</code></pre><h2>Problems with Expo Go</h2><p class="paragraph"> Expo Go makes it simple to begin working on a new React
Native project, but it comes with a number of limitations that will ultimately
limit your ability to code in React Native. </p><ul><li>It forbids the use of native codes.<br></li><li>&nbsp;In Expo Go, a number of Android and iOS APIs might not be available.<br></li><li>Not always appropriate when you intend to create lightweight apps.<br></li><li>Your free builds may occasionally become queued in Expo Go.<br></li></ul><p class="paragraph"> In light of these, it would be sager to learn how to set up
a React Native development environment in your system using the React Native
CLI. Let’s get to it. </p><h3>React Native CLI</h3><p class="paragraph"> Compared to Expo, setting up React Native CLI is only
slightly more difficult because it needs XCode or Android Studio.  </p><p class="paragraph"> If you have
experience with mobile development, setting up and using React Native CLI
should be a breeze for you.  </p><p class="paragraph"> It would take some time to install and set up any
of the IDEs when you are a newbie and also do not already have XCode or Android
Studio installed. This can be a little intimidating, especially if you're just
starting. </p><p class="paragraph"> As we will be creating a development environment for
projects targeted at Android OS, we will be using Android Studio for these
demonstrations. It's crucial to remember that the setup procedures vary
slightly depending on the Development OS. The instructions for Windows will be
covered in this blog. </p><h3>Step 1 - Installing Dependency</h3><p class="paragraph"> You would also require Node.js, the Java SE Development Kit
(JDK), plus Android Studio to be installed in addition to React Native CLI.
Using the well-known Windows package manager Chocolatey, you would have to
install the LTS version of Node. However, it would be preferable to install
Node using the Node version of Windows manager, nvm-windows, if you are going
to swap between LTS and other versions of Node. To install JDK using Chocolatey:
 </p><pre><code class="code-block">choco install -y nodejs-lts openjdk11</code></pre><h3>Step 2 - Installing Android SDK in Android Studio</h3><p class="paragraph"> Given the number of stages, establishing the development
environment may seem a little challenging. Installing and configuring Android
Studio is required to create the development environment. React Native requires
the Android 12 (S) SDK which can be installed from the SDK Manager in Android
Studio. Also, you have to ensure that 31.0.0 is opted for under the Android SDK
Build-tools in the SDK Tools tab. </p><figure class="fig-img"><img class="img   " src="https://res.cloudinary.com/dvo6eiftd/image/upload/v1662993655/vsswezjm6pxx3b0yhawc.jpg" alt="Android-Studio"><figcaption class="fig-cap">Android-Studio</figcaption></figure><h3>Step 3 - Configuring ANDROID_HOME </h3><p class="paragraph"> An environment variable called ANDROID HOME is required to
use React Native. To set this up from the Windows Control Panel, go to User
Accounts and select Change my environment variable. Now you can click
"New…" to establish a new user variable called ANDROID_HOME that
points to your Android SDK path. </p><figure class="fig-img"><img class="img   " src="https://res.cloudinary.com/dvo6eiftd/image/upload/v1662993665/lxvcsxzuoydfjb2izmqq.jpg" alt="Configure-Android-home"><figcaption class="fig-cap">Configure-Android-home</figcaption></figure><p class="paragraph"> Android Studio is now fully set up. Simply use the npx react-native
&lt;command&gt; to run React Native CLI to finish setting up your
development environment. </p><p class="paragraph"> You are now prepared to launch a new React Native project on
Windows! Use the following command to start a new project:  </p><pre><code class="code-block">npx react-native init MyfirstProject</code></pre><h4>Wrapping up</h4><p class="paragraph"> Now that you've hopefully successfully installed the React
Native Development Environment and even launched your first React Native
Project on your computer.  </p><p class="paragraph"> Run my first project is all that remains to be done!
To run applications, React Native leverages Metro, a JavaScript bundler that is
included with it. To learn how to launch and execute your React Native
applications using the Metro Bundler, refer to the Metro Docs. Additionally,
the React Native Team's Integration Guide may be useful to you if you wish to
integrate your newly created React Native code within an already existing
application. If not, feel free to return here for another in-depth discussion
of these! </p>