## Variables
Types of variables
| Code | Explanation |
| ---------------------------------------- | ----------- |
| `const varName = "value"` | constant |
| `let age = 20` | can change |
| `const [items, setItems] = useState([])` | |
| | |
## Arrays
| Code | Explanation |
| --------------------------------- | ------------ |
| `const colours = ["red", "blue"]` | normal array |
| | |
### useState
* An array where `[0]` is the current value and `[1]` is the function to update the value
* `useState([])` is a React function that returns the array by
* Creating storage for the data
* Returning `[currentValue, functionToUpdateIt]`
```js
const [items, setItems] = useState([])
// ↑ ↑
// getter setter
```
## Objects
### Creating an object
```js
// Object structure:
{
key: value,
key: value,
key: value
}
// Your menu item object:
{
name: "Coke", // key: "name", value: "Coke"
price: 2.99, // key: "price", value: 2.99
location: "Cafe" // key: "location", value: "Cafe"
}
```
### Accessing values inside objects
```js
// Your menu item object:
const item = {
name: "Coke",
price: 2.99,
location: "Cafe"
}
// Access values using dot notation:
[Link] // Returns "Coke"
[Link] // Returns 2.99
[Link] // Returns "Cafe"
```
## Functions
### Example
```js
const renderItem = ({ item }) => {
// ↑ ↑
// function name parameter
// This code runs when the function is called
return (
<View>
<Text>{[Link]}</Text>
</View>
)
}
// Function call (FlatList does this automatically):
renderItem({item: {name: "Coke", price: 2.99}})
```
### Types of functions
* Return types: Not in JS but in TS
### Declaring functions
```js
// Method 1: Arrow function with const
const fetchItems = async () => {
// code here
}
// Method 2: Function declaration (no const)
function fetchItems() {
// code here
}
// Method 3: Function expression
const fetchItems = function() {
// code here
}
```
### Async
await tells JavaScript: "Don't continue until the server gives me the actual data."
```js
const fetchItems = async () => {
const response = await [Link](`${API_BASE_URL}/items`)
// ↑
// This waits until your server responds
// Could be 100ms or 5 seconds - depends on your server
}
```
### Export and default
```js
// export default (one main thing per file):
export default function HomeScreen() { }
// regular export (multiple things per file):
export const styles = [Link]({ })
export const colors = { red: '#FF0000' }
export const API_URL = '[Link]
// [Link]
export default function HomeScreen() { // ← Main component
// ...
}
// [Link]
export const styles = [Link]({ // ← Regular export
// ...
})
// How they're imported:
import HomeScreen from './index' // ← Import default (no { })
import { styles } from './styles' // ← Import named export (with { })
```
## Built-in JS functions
### .filter()
Go through an array, decide whether to keep each item
```js
[Link](callback(element, index, array), thisArg?)
```
Parameters
- **callback**: Function to test each element
- **element**: Current element being processed
- **index**: Index of current element (optional)
- **array**: The array filter was called upon (optional)
- **thisArg**: Value to use as `this` when executing callback (optional)
Return
- **New array** with elements that pass the test
- **Empty array** if no elements pass
## Try/Catch error handling
```js
try {
} catch (error) {
// error is a parameter; JS automatically creates the error object
[Link]('title of the error', 'message for the error')
}
```
`[Link]` is a React Ntive function that shows a popup for users
```js
[Link] = "Request failed with status code 404"
```
## Axios library
JS library for HTTP requests
```js
// axios is like a messenger between your app and server:
import axios from 'axios' // External library (you installed it)
// It can make different types of requests:
[Link]('/api/items') // GET request (read data)
[Link]('/api/items') // POST request (create data)
[Link]('/api/items/1') // PUT request (update data)
[Link]('/api/items/1') // DELETE request (remove data)
```
