Scribd
Upload
315 views

Chapter 1-React Native App Development

Uploaded by

Oscar Banda Acp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
315 views

Chapter 1-React Native App Development

Uploaded by

Oscar Banda Acp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Lecture Notes: Introduction to React Native

What is React Native?


● A JavaScript framework for building native mobile apps for iOS and Android.
● Uses the same design as React, but instead of targeting the browser, it targets mobile
platforms.
● Leverages the power of JavaScript and React to create high-performance, native-looking
apps.

Why React Native?


● Cross-platform development: Write once, run on both iOS and Android.
● Hot reloading: See changes instantly without recompiling the app.
● Large community and ecosystem: Abundant resources, libraries, and support.
● Performance: Nearly native performance due to using native components.

Setting Up the Development Environment

Prerequisites

● Node.js and npm (or yarn) installed.

Installing Expo CLI

● Open your terminal and run the following command:


Bash
npm install -g expo-cli
or
Bash
yarn global add expo-cli

Creating Your First React Native App


● Open your terminal and navigate to the desired project directory.
● Run the following command to create a new project:
Bash
expo init MyFirstApp
Replace MyFirstApp with your desired project name.
● Navigate into the project directory:
Bash
cd MyFirstApp

Running the App


● Start the development server:
Bash
expo start

● This will open a development server in your browser. You can use the QR code to open the
app on your phone using the Expo Go app.

Basic React Native Components


● View: The most basic building block, similar to a div in HTML.
● Text: Displays text.
● Image: Displays images.
● Button: Creates interactive buttons.
● StyleSheet: For styling components.

JSX Syntax
● A combination of JavaScript and XML-like syntax.
● Used to describe the structure of your UI.
● Example:
JavaScript
import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems:
'center' }}>
<Text>Hello, World!</Text>
</View>
);
};
export default MyComponent;

Additional Notes
● Expo: A set of tools and services built around React Native to simplify development.
● Hot reloading: A feature that allows you to see changes in your app instantly without
restarting the app.
● Component-based architecture: React Native promotes building reusable components.
● Styling: Use StyleSheet or inline styles to style your components.

This is a basic introduction to React Native. In the next session, we will dive deeper into
components, styling, and layout.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy