Computer Science
Grade 10
20 min
React Native Basics
React Native Basics
What you'll learn
- Identify at least three different reasons why we use functions in computer programs with 100% accuracy.
- Explain, in their own words, what a function is and what it does, using an example from a real-world scenario (e.g., making a sandwich) with at least 80% accuracy based on a rubric.
- Apply the concept of functions by breaking down a simple, multi-step task (like drawing a house) into smaller, reusable function blocks with 100% participation.
- Create a simple program using a visual programming language (e.g., Scratch) that includes at least one function to perform a repetitive task, demonstrating successful execution of the function with 100% participation.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define what React Native is and explain its 'write once, run anywhere' philosophy.
Identify and describe the purpose of core components like View, Text, and Button.
Write JSX to structure a simple mobile app screen.
Apply basic styling to components using the StyleSheet API.
Use the `useState` hook to manage and display a simple piece of state, like a counter.
Create a functional component that accepts and displays data passed through props.
Ever wondered how apps like Instagram or Discord look and feel the same on both iPhone and Android? 🤔 Let's find out how they do it!
In this lesson, you'll learn the fundamentals of React Native, a popular framework for building real mobile apps using JavaScript. We'll explore how to build u...
2
Key Concepts & Vocabulary
TermDefinitionExample
ComponentA reusable, self-contained piece of the user interface (UI). Think of them as building blocks, like LEGO bricks, that you combine to create a full screen or app.A `UserProfile` component could contain an image, a name, and a bio. You can then reuse this component for every user in your app.
JSX (JavaScript XML)A special syntax that lets you write HTML-like code directly inside your JavaScript files. React Native uses it to describe what the UI should look like.Instead of complex function calls to create a text element, you can just write `<Text>Hello, World!</Text>`.
Props (Properties)Data that is passed from a parent component down to a child component. Props are read-only and cannot be changed by the child component.A `Greeting` component could...
3
Core Syntax & Patterns
Functional Component Syntax
const MyComponent = (props) => { return ( <View>...</View> ); };
This is the standard way to define a component in modern React Native. It's a JavaScript function that accepts `props` as an argument and returns JSX that describes the UI.
The `useState` Hook
const [stateVariable, setStateFunction] = useState(initialValue);
Use this hook at the top of a functional component to add state. It returns an array with two elements: the current state value and a function to update that value. Always use the update function (e.g., `setStateFunction`) to change the state, never modify it directly.
Styling with StyleSheet.create
const styles = StyleSheet.create({ styleName: { property: 'value' } });
<View style={styles....
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
You are debugging the 'Simple Tap Counter'. The number on the screen is stuck at 0 even after tapping the button. The button's `onPress` function is: `const handlePress = () => { let currentCount = 0; currentCount++; }`. What is the error?
A.The `let` keyword cannot be used inside a component.
B.local variable is being changed, not the component's state using the setter function.
C.The function should be named `onPress`, not `handlePress`.
D.The `++` operator does not work in React Native.
Challenging
A parent component has state defined as `const [user, setUser] = useState({ name: 'Alex', role: 'Student' });`. It passes this state to a child component like `<ProfileCard data={user} />`. How would the `ProfileCard` component correctly display the user's name?
A.<Text>{props.data.name}</Text>
B.<Text>{props.user.name}</Text>
C.<Text>{props.name}</Text>
D.<Text>{data.name}</Text>
Challenging
In the 'Simple Tap Counter' app, you are asked to add a 'Reset' button. The counter state is managed by `const [count, setCount] = useState(0);`. What should the `onPress` prop for the new reset button look like?
A.onPress={() => count = 0}
B.onPress={() => useState(0)}
C.onPress={setCount(0)}
D.onPress={() => setCount(0)}
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing FreeMore from Mobile Development
Computer Science for other grades
Frequently asked questions
What grade level is "React Native Basics"?
React Native Basics is a Grade 10 Computer Science lesson on ExcelOS.
What will I learn in React Native Basics?
You'll be able to: Identify at least three different reasons why we use functions in computer programs with 100% accuracy; Explain, in their own words, what a function is and what it does, using an example from a real-world scenario (e.g., making….
Is "React Native Basics" free to practice?
Yes. You can read the tutorial preview for free, and signing up for a free ExcelOS account unlocks the full tutorial and all practice questions with instant feedback.
How many practice questions are included with React Native Basics?
This lesson includes 25 practice questions across multiple difficulty levels, each with instant feedback and explanations.