React Native

Mobile vs Computer
Mobiles and computers have some fundamental differences, which started creating problems in
rendering the mobile web application:
1. Lack of keyboard API — The WebView had no keyboard API, which is the most essential for
mobile web to detect availability of on-screen keyboard.
2. Gestures and touch events – Mobile OS overloads all applications with gestures and touch
handling, which is much faster than any onClick event. Sometimes the gestures are very rich
events like two- or three-finger gestures. The WebView did not have the necessary code to
handle this.
3. Lack of image management capability — Unlike computer browsers, mobile browser cache
cannot be queried to see whether the image has been loaded or not. The WebView being
used inside the mobile native container could not handle image management.
React Native
Declarative
Declarative views make your code more predictable and easier to debug.
Component-Based
Build encapsulated components that manage their own state, then compose them to make
complex UIs.
Learn Once, Write Anywhere
React Native
React Native
JSX
JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts the HTML tags
into React elements.
Variabel
◦ var
◦ Variable values
◦ The variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm.
◦ The variable defined in global
◦ let
◦ Variable values
◦ The variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm.
◦ The variable will be used only in the block it’s defined in, which is not always the entire containing function.
◦ const
◦ Constant values
◦ The identifier won’t be reassigned.
Variabel
◦ Var
Variabel
◦ let
Variabel
◦ const
Props and State
There are two types of data that control a component: props and state.
Props (short for “properties”) and state are both plain JavaScript objects. While both hold
information that influences the output of component render, they are different in one important
way: props get passed to the component (similar to function parameters) whereas state is
managed within the component (similar to variables declared within a function).
Props
State
Component Life Cycle
Each component has several “lifecycle methods” that you can override to run code at particular
times in the process.
Components
Components are the building blocks of React applications. They let us split the UI into
independent, reusable pieces, and think about each piece in isolation.
Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function
components. Hooks don’t work inside classes — they let you use React without classes.

useState
◦ useState hook is used to manage the state of a component in functional components. Calling useState
returns an array with two elements: the current state value and a function to update the state.

useEffect
◦ useEffect is a special hook that lets you run side effects in React. It is similar to componentDidMount
and componentDidUpdate, but it only runs when the component (or some of its props) changes.
Hooks
Terima Kasih