App.js
- React Native course
- Beginner
- Lesson 4/116
- 4 min
Learn the App.js structure and export default.
What is App.js?
App.js is the entry component of an Expo project. When the app opens, the App component here is rendered first.
The component is defined with export default function App() { ... }. The export default clause lets this component be used as the default import in other files.
For this reason, Expo recognizes App.js specifically and loads it as the application root.
export default
The most common way to export a component is using export default. This marks the file's default export.
Example: export default function App() { return ... }. A file can have only one export default.
To use this component in another file, you write import App from './App';. No curly braces are needed; the default export is imported on its own.
Practice Complete the App.js skeleton
Write the import line and the export default function App() declaration. App should return <View> containing <Text>Welcome</Text>.
Starter code
// Import View and Text from react-native
// Export the App component with export default function App()Sample solution
import { View, Text } from 'react-native';
export default function App() {
return (
<View>
<Text>Welcome</Text>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does App.js do?
- Lists dependencies
- Defines the app icon
- Holds the entry component Correct answer
- Holds the stylesheet
Explanation: App.js holds the app's entry component.
2 Default export
____ default function App() { return null; }export default function App() { return null; }Explanation: export default exports the component.
3 Match the keywords
| Term | Meaning |
|---|---|
App |
Entry component |
export |
Send out |
default |
Default |
function |
Function |