Discover React Native for creating rich, cross-platform mobile apps with reusable components. Gain insights into UI components, styling, navigation, Hooks, state, and database management.

native.tar.gz

reactNative

React Native is a well-known mobile application development framework that allows developers to create rich, cross-platform mobile application UI using reusable components. It's ideal for building mobile applications and supports multi-platform reusable code, pre-built components, and a rich UI. Most well-known social media platforms, such as Facebook and Instagram, have been built using React Native. 

In this course, you’ll start with a brief introduction to React Native and then cover various built-in components of React Native categorized into different categories such as basic, user interface, user interaction, and list view components. Next, you’ll learn about concepts such as application styling, navigation, Hooks, state management, and database management. You’ll find interactive quizzes and challenges throughout the course to test your understanding.

By the end of this course, you’ll be able to develop mobile applications and kickstart your journey as a React Native developer.

Getting Started with Mobile App Development with React Native

Hooks cannot be called inside nested functions.

Hooks can be called at the top level of a component.

**(Select all that apply.)** 
Which statement regarding Hooks is true?

<p><strong>(Select all that apply.)</strong>
Which statement regarding Hooks is true?</p>


```
const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Button title="Decrement" onPress={() => setCount(count - 1)} />
    </View>
  );
};
```

```
const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={setCount(count + 1)} />
      <Button title="Decrement" onPress={setCount(count - 1)} />
    </View>
  );
};
```

```
const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress=setCount(count + 1) />
      <Button title="Decrement" onPress=setCount(count - 1) />
    </View>
  );
};
```

```
const Counter = () => {
  const [count] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Increment" onPress={() => count = count + 1} />
      <Button title="Decrement" onPress={() => count = count - 1} />
    </View>
  );
};
```

What is the correct way to implement a counter using the `useState` Hook in React Native?

<p>What is the correct way to implement a counter using the <code>useState</code> Hook in React Native?</p>


Which Hook can be used to count the number of rerenders caused by an application? 



<p>Which Hook can be used to count the number of rerenders caused by an application?</p>


Which Hook allows us to share the state between deeply nested components without prop drilling?

<p>Which Hook allows us to share the state between deeply nested components without prop drilling?</p>


The `useState` returns only the current state, and `useRef` returns a single object called current.

The `useState` returns the current state and an updater function, and `useRef` returns a single object called current.

The `useState` causes the rerendering of components, while `useRef` does not.



The `useRef` causes the rerendering of components, while `useState` does not.

What is the difference between the `useState` and `useRef` Hooks? 

<p>What is the difference between the <code>useState</code> and <code>useRef</code> Hooks?</p>


```javascript
const {value, setValue} = useState(0)
```

```javascript
const [value, setValue] = useState(0)
```

```javascript
const [setValue, value] = useState(0)
```

```javascript
const {setValue, value} = useState(0)
```

What is the correct method to use the `useState` Hook?

<p>What is the correct method to use the <code>useState</code> Hook?</p>


The `useMemo` returns a memoized value, and `useCallback` returns a memoized function.

The `useMemo` returns a memoized function, and `useCallback` returns a memoized value.

There is no difference between the `useMemo` and `useCallback` Hooks.

The `useMemo` returns both a memoized function and value, while `useCallback` returns only a memoized value.

What is the difference between the `useCallback` and `useMemo` Hooks?

<p>What is the difference between the <code>useCallback</code> and <code>useMemo</code> Hooks?</p>


Quiz yourself on what you've learned about Hooks in React Native.

Before We Begin

Introduction to React Native

Basic Components

User Interface and User Interaction

List View

Android Components and APIs

Miscellaneous Components and APIs

Application Styling

Navigation

Hooks

State Management

Database Management

Appendix

Quiz: Hooks