Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting started with Web front-end development ...

asmz
January 17, 2025
12

Getting started with Web front-end development using React Native and Expo

React Native+Expoで始めるWebフロント開発
Talked at Sendai Frontend Meetup #15

asmz

January 17, 2025
Tweet

Transcript

  1. asmz.beer 誰なのか? • Akira Shimizu / asmz (@_asmz) • https://asmz.beer/

    • モバイルアプリエンジニア ◦ iOS / Android / React Native / Flutter • お仕事募集中です!
  2. asmz.beer Expo つまりこういう感じ React iOS SDK iOS App Android SDK

    Android App React Native React Native iOS React Native Android 今日の話題 React DOM Web App React Native for Web
  3. asmz.beer Expoプロジェクト作成 $ npx create-expo-app@latest --template blank-typescript Creating an Expo

    project using the blank-typescript template. ✔ What is your app named? … my-expo-web-sample : $ cd my-expo-web-sample $ #web開発に必要な依存パッケージを導入 $ yarn expo install react-dom react-native-web @expo/metro-runtime
  4. asmz.beer コード概要 React Nativeでは抽象化された GUIコンポーネントを使って画面 を生成する UITextView Class <Text> ~~~

    </Text> TextView Class <p> ~~~ </p> iOS Android Web https://reactnative.dev/docs/intro-react-native-components#core-components
  5. asmz.beer Expo Web Appのデプロイ $ yarn expo export -p web

    distディレクトリ配下に公開用のファイル 群がビルドされるので、任意のWebサー バへアップして公開可能