Computer Science
Grade 10
20 min
React Native Basics
React Native Basics
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 Free