Introduction to React Native

React Native is a framework for developing mobile applications using JavaScript and React.

It allows developers to build mobile user interfaces using React components and React concepts.

React + JavaScript
        ↓
   React Native
        ↓
 Mobile Applications

React Native was developed by Facebook, which is now known as Meta.

The technology was created to help developers build mobile applications using JavaScript and React concepts.

Traditionally, developers often needed different technologies and codebases for different mobile platforms.

React Native provides a way to build mobile applications using React and JavaScript while targeting multiple mobile platforms.

React Native applications are primarily developed using JavaScript or TypeScript.

For example, a component can be written using JavaScript and React syntax.

function App() {
    return (
        <View>
            <Text>Hello React Native</Text>
        </View>
    );
}

React Native is based on React concepts.

If you understand React components, props, state and hooks, you already have an important foundation for learning React Native.

React Native is mainly used to develop mobile applications.

Applications can contain screens, buttons, forms, images, lists, navigation and many other mobile interface elements.

React Native can be used to create applications that run on Android devices.

Developers can test applications using Android emulators or physical Android devices.

React Native can also be used to develop applications for Apple's iOS platform.

The same React Native development approach can be used while targeting iOS.

React Native supports cross-platform application development.

This means developers can use a common React Native codebase while building applications for multiple mobile platforms.

React Native provides components for creating mobile user interfaces.

Some commonly used components include:

• View
• Text
• Image
• TextInput
• ScrollView
• Pressable
• FlatList

The View component is one of the most commonly used React Native components.

It can be used as a container for other components.

<View>
    <Text>Welcome</Text>
</View>

The Text component is used to display text in a React Native application.

<Text>Hello World</Text>

Unlike normal HTML development, React Native provides its own components for mobile interfaces.

React Native uses JSX, which allows developers to describe the user interface using a syntax similar to HTML.

function App() {
    return (
        <View>
            <Text>My App</Text>
        </View>
    );
}

React Native uses JSX syntax, but its components are not normal HTML elements.

For example, React Native commonly uses View and Text instead of HTML elements such as div and p.

React Native provides a styling system for designing mobile interfaces.

The StyleSheet API is commonly used to create styles.

const styles = StyleSheet.create({
    container: {
        padding: 20
    }
});

Flexbox is widely used to arrange components in React Native.

It helps developers create layouts for different mobile screen sizes.

container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
}

React Native applications can use React state to store changing data.

The useState Hook is commonly used for managing state.

const [count, setCount] = useState(0);

Props are used to pass data from one component to another.

function Student({ name }) {
    return (
        <Text>{name}</Text>
    );
}

React Native applications can respond to user actions such as pressing buttons or entering text.

<Pressable onPress={() => alert("Hello")}>
    <Text>Click Me</Text>
</Pressable>

Forms can be created using components such as TextInput, buttons and state.

Forms are commonly used for login, registration, search and data-entry screens.

Mobile applications frequently need to display lists of data.

React Native provides components such as FlatList and SectionList for this purpose.

Real mobile applications usually contain multiple screens.

Navigation libraries can be used to move between screens such as Home, Profile, Login and Settings.

React Native applications can communicate with backend servers through APIs.

Developers can use technologies such as fetch() or Axios to request data from a server.

fetch("https://example.com/api/students")
    .then(response => response.json())
    .then(data => console.log(data));

A React Native application can communicate with a backend API that works with a database.

For example, a PHP and MySQL backend can provide student, course, payment or product data to a mobile application through APIs.

Mobile applications sometimes need to store information locally on the device.

For example, application preferences or temporary user information can be stored locally using suitable storage solutions.

Many mobile applications require users to log in before accessing private features.

React Native can communicate with an authentication API to implement login, logout and user sessions.

Mobile applications may need access to device capabilities such as camera, location, notifications and media.

React Native projects can use suitable APIs and libraries to work with these capabilities.

React Native applications can be tested using emulators, simulators and physical mobile devices.

Testing helps developers identify layout problems, navigation issues, API errors and device-specific problems.

In this React Native tutorial, you will gradually learn how to build mobile applications from basic concepts to complete projects.

• React Native fundamentals
• Components and props
• State and Hooks
• Styling and layouts
• Forms and validation
• Lists
• Navigation
• APIs
• Storage
• Authentication
• Real-world mobile projects

A good learning path for React Native is:

JavaScript
    ↓
React
    ↓
React Native Basics
    ↓
Components & Styling
    ↓
State & Hooks
    ↓
Forms & Lists
    ↓
Navigation
    ↓
APIs
    ↓
Storage
    ↓
Authentication
    ↓
Device Features
    ↓
Real Projects
    ↓
App Deployment

Because React Native is based on React, your existing knowledge of JavaScript and React will be very useful throughout this course.