React Native - First Steps

Explore choosing a text editor for React Native development, with the recommended editor and Sublime Text as a solid alternative, plus setup tips.

Install node and npm to enable JavaScript for React Native, choosing latest stable or long-term release. Verify with node -v and npm -v, and restart if problems persist.

Set up React Native by following the documentation, use expo for a quick start or switch to the native cli, and install node, npm, and Android Studio for Android development.

Set up a React Native project from scratch, explore the file structure, understand package.json metadata and the React and React Native dependencies, and identify the index.js entry point.

Build your first hello world program in React Native, clean up index.js and JSON references, remove Flow, and prepare to run the app on Android and iOS.

Run a react native app on ios with xcode on mac, using an ios simulator like iphone 10. Learn how the metro bundler and babel compile JavaScript.

Test your React Native app on Android by enabling USB debugging on your device, connect it to your computer, and run react native run android to build and install quickly.

Learn how React is a JavaScript library for building user interfaces using components, with a declarative style; React Native extends this approach to mobile apps.

Explore JSX in React Native, a JavaScript-like syntax that lets you write markup inside a JavaScript file and keep component logic and view in one place.

Explore how components build the UI in React and React Native, bootstrapping with a single App component and rendering text with the Text component.

Learn how props pass data from a parent app component to a child text component using a view container and render, with strings, numbers, or functions delivered through curly braces.

Learn how state drives interactivity in React applications, how it differs from props, and how to update it with setState to trigger re-renders after component did mount.

Start building a jokes application in React Native, learning essential concepts such as error handling, navigation, and creating beautiful components as you craft your first app.

Learn to debug React Native apps using remote debugging, shake the device to enable it, attach browser debugger via a web socket, and inspect logs and sources with Chrome inspector.

Explore a practical React Native project structure with a source and components folder, creating a home page component and planning future pages like settings for navigation.

Learn to add and use the React Native Paper UI library, install and link native modules, and wrap your app in a paper provider to implement material components.

Learn to style React Native components using the style prop and a StyleSheet, creating a 300x300 black box with white centered text. Center with justifyContent and alignItems.

Fetch jokes from a public api, handle possible errors with try-catch, and display the joke in a react native app using a header, state, and loading indicators.

enhance the react native ui by using safe area view, a single view with light content, switch to material icons while wiring a button to trigger a get request.

Learn to add navigation in a React Native app using the React Navigation library, building a stack navigator for home and settings screens and wiring navigation with an app container.

Create a settings page in React Native with a header and back navigation. Provide checkboxes for explicit and nerdy jokes, and a save button to store user preferences.

Learn how to implement async storage in a React Native app to save and retrieve user preferences, manage checkboxes, and drive API queries with category filters.

Apply user interface refinements on the settings page, adjusting typography, padding, borders, and button styling to create a centered, full-screen layout with a save icon and nerdy jokes.

Test Android deployment on a connected device, generate a signed ap file with a keystore and signing config, then build release for Google Play.

Learn to generate an iOS production build with Xcode by signing in with your Apple developer account, configuring bundle identifier, version, and build number, and archiving for App Store distribution.

Explore your next steps by reading the documentation, imagining an app idea, and building with React Native components from the material library and reactive paper.