The Vocabulary Board
This term describes a reusable piece of a screen, like a single button, picture, or line of text, the building blocks every screen is made of.
What is a component?
The four parts every React Native file always has, in the same order.
What are imports, component, return, and styles?
This is what a red screen actually means, and it's not failure.
What is an error, pointing you right at the problem so you can fix it?
The reason a red screen is described as a "friend" rather than a failure.
What is: it points directly at the problem so you can fix it?
Name two real apps mentioned in class that were built using React Native.
What are two of: Discord, Amazon Shopping, Instagram, or the NFL App?
Grab a pencil and write the exact line of code that displays a picture in the return section, using a constant called myPicture.
What is <Image source={{uri: myPicture}} />?
Unlike View or Text, this components tag closes itself with a slash instead of a separate closing tag.
What is Image (<Image />)?
These are the two most common JSX mistakes that cause a red screen.
What are Capitalization and Self-Closing tags?
OR
What are forgetting to capitalize a component and forgetting to self-close a tag like <Image />?
The reason comments look different inside the return section ({/* */}) versus outside it (//).
What is: JSX has its own rules for what counts as code versus a note, so it needs its own comment style?
In a Spotify song row, these three separate components sit right next to each other to make one row.
What are a picture, some text, and a button?
The empty space on the INSIDE of a component, between its edge and whatever's inside it.
What is padding?
The pattern a component uses to point to its look in the StyleSheet, written as style={styles.___}.
What is a style name, like styles.title?
This bug happens when a style's name in the StyleSheet doesn't exactly match the name on the component, and it never turns the screen red.
What is the sneaky rename bug?
The reason changing just one flexbox property, like justifyContent, can rearrange an entire screen at once.
What is: flexbox is the invisible arranger repositioning everything, so one change moves the whole layout?
Before changing any code, students were told to look at their screen honestly, like one of these, to judge if it felt centered and balanced.
What is a user?
This line of code, with a screen name inside its parentheses, tells the app where to go.
What is navigate() or navigation.navigate('ScreenName')?
The two words used to read navigation.navigate('Screen2'); out loud, describing exactly what the app should do.
What is "Navigate to Screen 2"?
This is the error you get if you rename a route so it no longer matches App.js.
What is an unhandled action error?
The reason App.js is never touched all sprint, even though it's the file that connects both screens.
What is: it already wires the two screens together correctly, and editing it could break navigation?
This everyday app behavior, tapping something, moving somewhere new, and sometimes going back, is controlled by this system.
What is navigation?
Grab a pencil and write the exact useState line that creates a piece of state called count, starting at zero.
What is const [count, setCount] = useState(0);?
The three parts of this line, in order: const [count, setCount] = useState(0);
What are the value, the updater function, and the starting value?
If a leftover // is left in front of a line copied from the Parts Bin, this is what happens on screen instead of a red screen.
What is nothing? The feature just silently doesn't appear.
The reason a state value resets to its starting point after you navigate away from a screen and back.
What is: React Native rebuilds that screen from scratch, so any state inside it starts over?
Tapping a heart on a post updates the like count instantly and changes the heart's color, with no page refresh. According to the lesson, this is the specific thing being tracked as state.
What is the like count?