React Native Web Full App Tutorial - Build a Workout App for iOS, Android, and Web

React Native Web Full App Tutorial - Build a Workout App for iOS, Android, and Web

freeCodeCamp.org

55 лет назад

304,394 Просмотров

Learn to use React Native for Web to create a workout app that works on Android, iOS, and the web. The app uses Mobx, Typescript, React Navigation, React Hooks, AsyncStorage / Localstorage, and more. Once the app is complete, you will learn how to deploy it to Netlify.

💻 Code: https://github.com/benawad/react-native-web-series

⭐️ Contents ⭐️
⌨️ (0:00:00) Setting Up a React Native Web Project
⌨️ (0:09:04) Setting Up React Native Hooks
⌨️ (0:15:03) Setting Up a React Native Web Monorepo
⌨️ (0:28:24) Configuring React Native for Yarn Workspaces
⌨️ (0:39:58) How to use Mobx with React Hooks
⌨️ (0:49:15) Navigation in React Native Web
⌨️ (1:03:28) Styling a Component in React Native Web
⌨️ (1:27:40) Mobx Root Store
⌨️ (1:45:20) Workout Timer with Mobx
⌨️ (2:11:20) React Router with React Native Web
⌨️ (2:22:45) How to Persist Mobx Stores
⌨️ (2:30:47) Storing and Displaying Workout History
⌨️ (2:54:33) React Router Params in React Native Web
⌨️ (3:17:30) Floating Action Button React Native Web
⌨️ (3:34:45) Deploy React Native Web to Netlify

⭐️ Links: ⭐️
🔗 https://stronglifts.com/apps/
🔗 https://github.com/necolas/react-native-web/blob/master/docs/guides/client-side-rendering.md

🔗 VSCode settings used: https://gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3

Course from Ben Awad. Check out his YouTube channel: https://www.youtube.com/benawad97

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology: https://youtube.com/subscription_center?add_user=freecodecamp

Тэги:

#react_native_web #react_native #mobx #react_native_web_tutorial #react_native_web_app #react_native_web_course #react_native_for_beginners #typescript #react_native_tutorial #netlify #react #deploy_to_netlify #components #react_hooks #react_navigation #javascript
Ссылки и html тэги не поддерживаются


Комментарии: