Introduction
In recent years, the need to build cross-platform mobile applications has led to the emergence of several frameworks that allow developers to use a single code base to deploy apps on iOS and Android. Among all the options available, React Native, created by Facebook, has established itself as one of the most popular and powerful tools for this purpose. By uniting the power of React with the versatility of JavaScript, React Native allows developers to create robust, high-performance applications. This article will guide you through the steps needed to start building mobile apps with React Native and JavaScript.
What is React Native?
React Native is a framework for mobile development, which allows programmers to use the well-known JavaScript programming language to create native mobile applications for iOS and Android. Unlike other solutions that simply present a web view, React Native translates app components into native platform elements, providing a user experience close to that of a traditional native app.
React Native Basics
React Native is based on the principles of React, such as components, state, and properties (props), but brings them to the context of a mobile application. Developers can leverage their prior experience in React and JavaScript to build apps without needing to learn mobile-specific languages like Swift or Kotlin.
Development environment configuration
Before you start building apps with React Native, you need to set up your development environment. The following tools will be required:
- Node.js and npm: They must be installed on the computer. Node provides the runtime environment, while npm is the package manager used to install React Native libraries and tools.
- Expo CLI or React Native CLI: Both are command line tools for starting new React Native projects. Expo is simpler as it handles much of the configuration automatically, while the React Native CLI offers more control and customization.
- IDE or code editor- Visual Studio Code is widely recommended by the community due to its great support for JavaScript and React Native.
Installing Node.js and npm
Visit the official Node.js page (https://nodejs.org/) and download the latest LTS version of the installer. Npm will be automatically installed along with Node.js.
Installing Expo CLI or React Native CLI
To install Expo CLI, run the following command in the terminal:
npm install -g expo-cli
If you prefer to use React Native CLI, you first need to install the Android and/or iOS environment and then use this command:
npm install -g react-native-cli
Creating a new project with React Native
With the environment configured, the next step is to start a new project. Here's how to do it with the Expo CLI, which is the quickest method to get started:
expo init ProjectName
You will be asked to choose a template for your new project. For this example, select the "blank" option which creates a clean, minimal application.
Structure of an application in React Native
After creating the project, you will have a series of initial files and folders. The most important are:
App.js: The main entry point of the application.package.json: A file that lists dependencies and scripts./node_modules: A folder containing all installed libraries./assets: Directory to store images and other static resources.
Components in React Native
React Native offers a number of built-in components that map to their native counterparts on each platform. Some of the most used include:
View: It is similar to a container<div>in web development.text: To display text on the screen.button: A simple interactive button.
Here is an example of how a component is created in React Native:
import React from 'react'; import { View, Text, Button } from 'react-native'; const MyComponent = () => ( Hello React Native!
Styling components with StyleSheet
In React Native, styles are not defined with CSS but with its own system based on JavaScript that is very similar to CSS. Use is made of StyleSheet, which is a similar abstraction to inline styles in React:
import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { padding: 20, backgroundColor: '#fff' }, text: { fontSize: 20, color: 'black' } }); const MyComponent = () => ( Styling in React Native );
Navigation between screens
To handle navigation between different screens, React Native uses libraries such as React Navigation or React Native Navigation. Here is an example with React Navigation:
First, install the necessary dependencies:
npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context npm install @react-navigation/native-stack
Next, configure a stack navigator:
import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from './HomeScreen'; import ScreenDetail from './ScreenDetail'; const Stack = createNativeStackNavigator(); function App() { return ( ); }
State management with Hooks and Context API
React Native uses hooks like useState y useEffect for state management and component lifecycle. Here a simple example using useState:
import React, { useState } from 'react'; import { View, Text, Button } from 'react-native'; const Counter = () => { const [counter, setCounter] = useState(0); return ( {counter}
API calls and remote data management
React Native makes it easy to integrate with external APIs for data retrieval. You can use the fetch API or libraries like axios to make HTTP calls:
import React, { useEffect, useState } from 'react'; import { View, Text } from 'react-native'; const APIData = () => { const [data, setData] = useState([]); useEffect(() => { fetch('https://api.example.com/datos') .then((response) => response.json()) .then((json) => setData(json) ) .catch((error) => console.error(error)); return ( {data.map((item) => ( {item.title} ))} ); };
Testing and debugging
Testing and debugging are crucial for any software development. React Native provides tools and libraries like Jest for testing and the built-in development menu for real-time debugging.
npm install --save-dev jest
Preparation for publication
Before publishing your app, you should make sure it is well tested and optimized. Additionally, each app store has its own review process and requirements that must be met, such as app listing settings, screenshots, and descriptions.
Conclusion
React Native combines the ease of web application development with the performance and capabilities of native applications. Through its use of JavaScript and the powerful architecture of React, along with an active community and a large number of available libraries, it is an excellent option for any developer looking to enter the world of cross-platform mobile development.
Building mobile apps with React Native and JavaScript is a modern development approach that speeds up and simplifies the process of bringing innovative ideas to market. With a relatively gentle learning curve for those already familiar with JavaScript and React, and the ability to build native apps for both major platforms from a single codebase, it's no surprise that React Native has gained widespread popularity among the developer community.
English 
Spanish