React Native

Question 1

What do we need to create to get content on the screen?

Answer 1

We need to create a component, wich is a JavaScript Function and then Render it to the UI (user interface)

Question 2

What’s a component?

Answer 2

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Question 3

What are the 2 types of components?

Answer 3

Functional and Class Components

Question 4

What’s the only thing that is required when creating a component?

Answer 4

The only thing that’s required is a Render function which returns some JSX to render.

Question 5

What can you do with components?

Answer 5

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Question 6

What is React?

Answer 6

React is a declarative, efficient, and flexible JavaScript library for building user interfaces(UI’s).

Question 7

What is React Native?

Answer 7

React Native is like React, but it uses native components instead of web components as building blocks. Its the mobile or App kind of version.

Question 8

‘React’ Library points

Answer 8

• Knows how a component should behave
• Knows how to take a bunch of components and make them work together,
• It’s kind of the brain.

Question 9

‘React Native’ Library points

Answer 9

• Can be thought of as our portal to the mobile device
• Knows how to take the output from a component and place it on the screen
• Provides default core components (image, text, etc).

Question 10

The import statement

Answer 10

it is used to import functions, objects, libraries or primitives which are defined in and exported by an external module, script, or the like.

Question 11

How do you define a component?

Answer 11

To define a component you need to write a JavaScript function, This function must ‘return’ some object that describes what it should look on our device.

Question 12

Create a symple component (write the code)

Answer 12

const App = () => {
  render () {
  }
};

Question 13

What is JSX?

Answer 13

JSX is an extension to the JavaScript language that is used to write React components, its syntaxis sugar to make our code more legible.

Question 14

What is JSX definition?

Answer 14

JSX is a preprocessor step that adds XML syntax to JavaScript.

Question 15

What’s a component? ‘My definition’

Answer 15

A component is a JavaScript function that returns some amount of JSX.
React Native is going to take our component and decide based on the information what is going to get rendered to the screen.

Question 16

What is AppRegistry?

Answer 16

AppRegistry is the JS entry point to running all React Native apps.

Question 17

How should root component be registered?

Answer 17

App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it’s ready by invoking AppRegistry.runApplication.

Question 18

Whta’s AppRegistry for?

Answer 18

In any ReactNative application that we create we need to at least register one component to the application, so it knows that its about to render an aplication called “SomeApp” (The name of the string must match the name of the app).
Second we pass a function that returns the first component(function) to render for our application.

Question 19

Write an AppRegistry

Answer 19

ReactNative.AppRegistry.registerComponent(‘appName’), () => Component);

or deconstructed:

import { AppRegistry, View } from ‘react-native’;

AppRegistry.registerComponent(‘appName’), () => Component);

Question 20

Are there global variables on React Native?

Answer 20

No, everything is an independent component.

Question 21

Import Destructuring, what it is?

Answer 21

When we import the React Native Library, we don’t want to import the whole library, so instead we import only the properties that we want.

Question 22

Give an example of importing a Text property from React Native.

Answer 22

import { Text } from ‘react-native’;

Question 23

How many component should we create per file?

Answer 23

In React Native we create only one component per file.

Question 24

How to name a component.

Answer 24

As a rule of thumb we always name the function component with the same name as the file in wich is created, to make it more readable.

Question 25

What’s a root component?

Answer 25

Root components are the firsts components to be rendered to the screen. Usually the App component.

Question 26

What’s a child component?

Answer 26

The child components are all the components that we nest inside our Root component.

Question 27

What’s the ‘export’ method used for?

Answer 27

The ‘export’ method is used to make components or other js files available to other files in the same project. it works exactly as the import method.
ex: export default Header;

Question 28

How do we import components to our files?

Answer 28

import NameOfFile from ‘./Path/to/our/component’;

Question 29

Where do we put our styling on React Native?

Answer 29

We put the styling inside of our component file.

Question 30

How do you style a component?

Answer 30

We have to create a new component usually called ‘styles’ inside of our component file that we want to style.

Question 31

What’s Flexbox?

Answer 31

Flexbox is an algorithm used to specify the layout of its children (It’s a system to positioning elements within a container).
Flexbox is designed to provide a consistent layout on different screen sizes.

Question 32

What properties do we use with flexbox to center an element in our container?

Answer 32

justifyContent: ‘center’; and alignItems: ‘center’;

Question 33

For what do we use props or properties?

Answer 33

Whenever we want to pass some information from our root component to our child component we use properties.

Question 34

How do we pass properties?

Answer 34

1. Identify the value or variable that we want to be provided by the parent. ex: const Header = (props) => {
2. We provide a reference to the props that’s coming from the parent component. ex: {props.headerText}
3. We’ll make sure that the parent component provides that specific prop. ex: we pass the properti of headerText and the string ‘Albums’

Question 35

What do we use to make reference to a javascript variable in React?

Answer 35

we use curly braces {props}

Question 36

Why do we make components reusable?

Answer 36

It save us a lot of time by having to make less files for the same kind of component.

Question 37

There are three main patterns to customize components.

Answer 37

1. Pass data via props
2. Nest component
3. Higher order component

Question 38

Return two components at the same time.

Answer 38

In React Native when we want to return two or more compnents of JSX at the same time we need to nest or wrap them in a single tag, we can’t return two siblings at one time.

Question 39

Functional Components

Answer 39

Functional components as the name says it, it’s a JavaScript function that returns some amount of JSX.
Data inn –> Functional Component –> out JSX
- Used for presenting static data
- Can’t handle fetching data
- Easy to write

Question 40

Functional Component Example:

Answer 40

const Header = () => {
  return Hi there!
};

Question 41

Class Components

Answer 41

They have more functionality built to them, more capability. they can be used for:

• Used for dynamic sources of data
• Fetching data
• User events
• Easier to write large components
• Easier to organize large amounts of code
• Class type structure
• Knows when it get rendered to the device (useful for data fetching)
• More code to write

Question 42

Class Component Example:

Answer 42

class Header extends Component {
  render () {
    return Hi there!
  }
};

Question 43

extends Component

Answer 43

Whe use extend Component to let React Native that our function is a component class type and we want to use its properties.
We also have to import it from the react library in our import statement as so: import React, { Component } from 'react';

Question 44

Trivia

Answer 44

Class based components do not requite semicolon ; but they do require a render method.

Question 45

Lifecycle methods:

Answer 45

Life cycle methods are like functions that will be placed on our class component that will be automatically called at some or diferent point on our program, depending on wich method we use

Question 46

componentWillMount():

Answer 46

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state synchronously in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.

Question 47

Axios

Answer 47

It’s a Library that can be installed using npm that is used to make HTTP requests.

Question 48

Axios HTTP request code example:

Answer 48

axios.get(‘https://url’)

.then(response => this.setState({ albums: response.data }));

Question 49

Synchronous vs Asynchronous operations.

Answer 49

A synchronous operation blocks a process till the operation completes. An asynchronous operation is non-blocking and only initiates the operation.

Question 50

State

Answer 50

There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.

In general, you should initialize state in the constructor, and then call setState when you want to change it.

Question 51

How do we set an initial state (code)?

Answer 51

state = {};

this is an empty initial state, we can change it later on with: this.setState