🥷 ReactNative101

📈 React Native 101: A Beginner's Guide for Building Cross-Platform Apps

Welcome to React Native 101, your comprehensive guide to getting started with React Native development! This repository serves as a beginner-friendly resource for those interested in building powerful cross-platform mobile applications using React Native.

In this guide, we'll cover the fundamentals of React Native, including setting up your development environment, understanding the core concepts of React Native, and building your first React Native app from scratch. Whether you're a seasoned JavaScript developer or new to mobile development, this repo will provide you with a solid foundation to start building robust, native-like apps for iOS and Android.

General Files Installation

1) NodeJS : It is the root of any React projects, so make sure you should have installed it in your system.

Recommended : use LTS version for better support.

2) OpenJDK / JDK : React Native have some dependencies which also includes Java Development kit (JDK).

Recommended JDK version /OpenJDK : `11` ( as per the ReactNative docs )

Link : https://learn.microsoft.com/en-us/java/openjdk/download#openjdk-11

Note : Java JDK version and gradle version should match ! ( what is gradle ? will see further)

Here you can check the version compatibility : https://docs.gradle.org/current/userguide/compatibility.html

3) Android Studio : Without Android Studio , your app will not run on the system.

Link: https://developer.android.com/studio

You may be wondering if there will be any impact on the speed or responsiveness of your system.

Answer is NO ! , we are not going to open Android studio for ReactNative, we will be doing all the programming related to React Native inside our Vscode.

Do this Steps :

This will be the First Screen you will get , just hit `more actions` and select `SDK manager`

a) SDK Manager:

Inside the SDK Platforms tab , Make sure that Android SDK Platform 34 , Android SDK Platform 33, Google APIs intel x86_64 Atom System image or intel x86_64 Atom System image is selected.

Go to SDK Tools and select the versions : 33.0.0 , 33.0.2 , 30.0.3

b) Virtual Device Manager :

Now , there will be 2 preferences : Either you want to use directly the app inside your computer ( using Virtual Device Emulator ) or by attaching the Smartphone( android or IOS ) to the System.

Steps :

Click Create Virtual Device
Select any device accordingly and hit apply.

OR

Using your smartphone :

Enable USB Debugging :

Environment Variables ( DO IT CAREFULLY )

YAY ! Done with the Setup .

Installation of React Native

Type this Command on your Command prompt (cmd) or in Vscode Terminal but before that create a folder where you want to create React native apps.
```
   npx react-native init <yourProjectName>    // dont include <> this brackets.
```
Install React Native Doctor : This will help you to find and fix the issues related to installation and checking the dependencies.

npx @react-native-community/cli doctor

Note : Sometimes gradle doesn't recognise the Java version , so we have to set the jdk path :
To run the React Native Application , simply type : cd <yourProjectName> then run this command : npx react-native run-android

So , it will build some of its files before actually deploying the app to your smartphone. Once everything is done , it will look like :

yash-devop / reactnative101 Goto Github PK

reactnative101's Introduction

🥷 ReactNative101

📈 React Native 101: A Beginner's Guide for Building Cross-Platform Apps

Welcome to React Native 101, your comprehensive guide to getting started with React Native development! This repository serves as a beginner-friendly resource for those interested in building powerful cross-platform mobile applications using React Native.

General Files Installation

1) NodeJS : It is the root of any React projects, so make sure you should have installed it in your system.

2) OpenJDK / JDK : React Native have some dependencies which also includes Java Development kit (JDK).

Recommended JDK version /OpenJDK : 11 ( as per the ReactNative docs )

Note : Java JDK version and gradle version should match ! ( what is gradle ? will see further)

3) Android Studio : Without Android Studio , your app will not run on the system.

You may be wondering if there will be any impact on the speed or responsiveness of your system.

This will be the First Screen you will get , just hit more actions and select SDK manager

a) SDK Manager:

b) Virtual Device Manager :

Steps :

OR

Using your smartphone :

Environment Variables ( DO IT CAREFULLY )

YAY ! Done with the Setup .

Installation of React Native

Note : Sometimes gradle doesn't recognise the Java version , so we have to set the jdk path :

🎉 We finally created our First app using React Native. 🎉

reactnative101's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Recommended JDK version /OpenJDK : `11` ( as per the ReactNative docs )

This will be the First Screen you will get , just hit `more actions` and select `SDK manager`