FoundationsIntermediate12h

React Native fundamentals.

Components, JSX, props, and state on mobile.

What is React Native?

React Native lets you build genuinely native mobile apps using React. You write components with JSX, manage props and state with hooks — exactly like React for the web — but they render to real native UI views instead of HTML elements.

Why it matters

This is the core of the track. React Native is one of the most popular ways to build mobile apps, and it lets web React developers ship to iOS and Android with their existing skills. Everything later — navigation, native modules, animation — builds on a firm grasp of components, props, and state here.

What to learn

  • Components and JSX rendering to native views
  • Props and state with hooks
  • The difference from web React: no DOM, native components
  • Handling touch and input events
  • Component composition and reuse
  • The Metro bundler and fast refresh
  • Reading the React Native component docs

Common pitfall

Reaching for web HTML elements like div and span, which do not exist in React Native. You use View and Text instead, and all text must live inside a Text component. Forgetting this — especially that bare strings cannot float outside Text — is the most common beginner error coming from the web.

Resources

Primary (free):

Practice

Build a small screen with state: a counter or a simple form, using View, Text, and a button, with a useState hook driving the UI. Handle a press event to update state. Done when the screen updates on interaction and all text is correctly wrapped in Text.

Outcomes

  • Build components with JSX that render native views.
  • Manage state and props with hooks.
  • Use View and Text instead of web elements.
  • Handle touch and input events.
Back to Mobile roadmap