https://github.com/h5sh/cs50m--lecture-5
https://github.com/h5sh/cs50m--lecture-5
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/h5sh/cs50m--lecture-5
- Owner: H5SH
- Created: 2023-06-25T09:15:39.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-25T09:21:06.000Z (about 3 years ago)
- Last Synced: 2025-05-19T13:16:36.516Z (about 1 year ago)
- Language: JavaScript
- Size: 189 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LECTURE 5 - Lists & User input
## Lists
● In web, browsers will automatically become scrollable for content with heights taller than the window
● In mobile, we need to do that manually. We can do that using the following Components from React Native
○ ScrollView
○ ListView (deprecated)
○ FlatList, SectionList
### ScrollView
● The most basic scrolling view
● I renders all of its children before appearing
● To render an array of data, we can use .map()
○ Components in an array need a unique key prop
**REF** 👉🏿 https://facebook.github.io/react-native/docs/scrollview.html
### FlatList
● A performant scrolling view for rendering data
● “Virtualized:” only renders what’s needed at a time
○ Only the visible rows are rendered in first cycle
○ Rows are recycled, and rows that leave visibility may be unmounted
● Pass an array of data and a renderItem function as props
● Only updates if props are changed
○ Immutability is important
**REF** 👉🏿 https://facebook.github.io/react-native/docs/flatlist.html
### SectionList
● Like FlatList with additional support for sections
● Instead of data prop, define sections
○ Each section has its own data array
○ Each section can override the renderItem function with their own custom renderer
● Pass a renderSectionHeader function for section headers
**REF** 👉🏿 https://facebook.github.io/react-native/docs/sectionlist.html
# CONTINUES TO LECTURE 5 - User input & Debugging
### User Input
● Controlled vs uncontrolled components
○ Where is the source of truth for the value of an input?
● React recommends always using controlled components
● Pass value and onChangeText props
**REF** 👉🏿 https://facebook.github.io/react-native/docs/textinput.html
## Live Demo
This simple phone book App has been hosted in my Expo snacks
⚙️ Project page: https://snack.expo.dev/@qbentil/lecture-5---contacts