What Is React Native
Before we know about react native basic tools and dependencies, Let us understand about What is React Native.
React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words, it enables web developers to write mobile applications that look and feel truly “native,” all from the comfort of a familiar JavaScript library. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.
Similar to React for the web, React Native applications are written with a mixture of JavaScript and XML-esque markup, known as JSX. Then, under the hood, the React Native “bridge” invokes the native rendering APIs in Objective-C (for iOS) or Java(for Android). Thus, your application will render using real mobile UI components, not webviews, and will look and feel like any other mobile application.
React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera or the user’s location.
Following are the basic tools and dependencies used in React Native:
1. Babel :-
Babel is a open source JavaScript compiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.Babel is popular tool for using the newest features of the JavaScript programming language.
Basically Babel works by converting ECMAScript 2015+ code into JavaScript that is understandable by older JavaScript browsers and engines. Because some old browsers does not understand ECMAScript 2015+ code , so babel works as JavaScript compiler for making them able to run this code.
ECMAScript 2015 is also known as ECMAScript 6 and ES6. Some people call it JavaScript 6. It is the sixth and latest version of the scripting standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.
2.Webpack :-
Webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
Webpack takes modules with dependencies and generates static assets representing those modules. Webpack is a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.
3.Jest :-
Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase. It allows you to write tests with an approachable, familiar and feature-rich API that gives you results quickly.
Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take. Jest uses a custom resolver for imports in your tests making it simple to mock any object outside of your test’s scope
Jest can be used in projects that use webpack to manage assets, styles, and compilation. webpack does offer some unique challenges over other tools because it integrates directly with your application to allow managing stylesheets, assets like images and fonts, along with the expansive ecosystem of compile to JavaScript languages and tools.
So basically it is used for managing assets, styles and compilation. You can find more detail about Jest on its official website Jest .
4.Expo :-
Expo is a set of tools and services for building, deploying, and quickly iterating on native iOS, Android, and web apps from the same codebase. The tools provided by Expo are the Expo client app, CLI, SDK, and Snack. The services are build, update, and notify. In short, Expo can be used for running your React Native apps on Android, iPhone and Web.
Now Expo also enables you to build cross-platform native apps using only JavaScript. Use your favorite text editor to write powerful React Native components without ever opening Xcode or Android Studio.
In addition to React Native components, you’ll have access to the Expo SDK, a library that provides a wide variety of native APIs on iOS and Android. Expo can also manage your assets for you, take care of push notifications, and build your final native binary for submission to the app store.
5. Metro:-
Metro is a JavaScript bundler. It takes in an entry file and various other options, and produces a single JavaScript file that includes all your code and its dependencies. Every time you run a react native project, a compilation of many javascript files are done into a single JavaScript file and that is done by Metro. It works with thousand of modules in a single application.
What Metro do basically is, it combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax) into a format that is understandable by your device. It is a sort of Webpack, but for React Native apps.
It also converts assets (e.g. image(jpeg/png) files) into objects that can be displayed by an Image component.
6. ESLint:-
ESLint analyzes your code to quickly find problems. ESLint requires Node.js and works on Windows, Mac and Linux. Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won’t experience errors introduced by traditional find-and-replace algorithms.
You can customize ESLint to work exactly the way you need it for your project. You can find more about ESLint here on its official website.
So these are the basic dependencies and tools you would be using during React Native Application Development. I hope you have understood about the basic dependencies and tools used in React Native and Now you have basic knowledge about them.
Thanks!
