Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

773: React Native with Robin Heinze

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Scott and Wes dish out a feast with Robin Heinze from Infinite Red, diving into the world of React Native. They discuss how React Native differs from other webview platforms, highlight popular apps built with it, and serve up essential tools and libraries to spice up every React Native project. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:13">01:13</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:30">01:30</a> React Native is different than Cordova or other webview platforms.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=04:18">04:18</a> Is there a ‘write once deploy everywhere’ aspect?</li> <li class="has-line-data" data-line-start="8" data-line-end="10"> <a href="#t=05:48">05:48</a> What are some React Native apps people may not realize? <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://apps.apple.com/us/app/mercari-buying-selling-app/id896130944"> Mercari: Buying & Selling App</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=07:13">07:13</a> What about Twitter + Facebook?</li> <li class="has-line-data" data-line-start="11" data-line-end="13"> <a href="#t=09:15">09:15</a> What is Expo? Is Expo Required? <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://expo.dev/">expo.dev</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=13:27">13:27</a> Does it require a Mac to build an iOS app?</li> <li class="has-line-data" data-line-start="14" data-line-end="16"> <a href="#t=14:58">14:58</a> React Native and routing. <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://docs.expo.dev/router/introduction/">Expo Router</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=16:56">16:56</a> How do native apps normally work without a URL?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=18:35">18:35</a> Can you use CSS with React Native?</li> <li class="has-line-data" data-line-start="18" data-line-end="21"> <a href="#t=20:27">20:27</a> Do React Native or Tamagui translate to CSS or Yoga? <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://tamagui.dev/">Tamagui</a>.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://www.yogalayout.dev/">Yoga Layout</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=21:02">21:02</a> React Native app styling on Android and iOS.</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href="#t=22:20">22:20</a> React Native’s own JavaScript engine. <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://reactnative.dev/docs/hermes">React Native Docs: Using Hermes</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=23:30">23:30</a> Does Hermes have full JS support?</li> <li class="has-line-data" data-line-start="25" data-line-end="28"> <a href="#t=23:52">23:52</a> What is the new architecture of React Native? <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href= "https://github.com/reactwg/react-native-new-architecture">New Architecture</a>.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://blog.logrocket.com/leveraging-react-native-jsi-enhance-speed-performance/"> React Native JSI</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=26:11">26:11</a> Avoiding translation errors.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=27:24">27:24</a> Will this change break a lot of older React Native apps?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=28:24">28:24</a> Has React Native improved update stability?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=29:55">29:55</a> Where else can React Native run?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=32:52">32:52</a> JavaScript on smart TVs and other smart devices.</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="#t=33:57">33:57</a> Bridging to native APIs. <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://tauri.app/">Tauri</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="35" data-line-end="38"> <a href="#t=37:14">37:14</a> State management. <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://redux.js.org/">Redux.js</a>.</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://mobx-state-tree.js.org/intro/welcome">MobX State Tree</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="38" data-line-end="42"> <a href="#t=39:30">39:30</a> What are some tools + libraries that you install on most projects? <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://jestjs.io/">JestJS</a>.</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://maestro.mobile.dev/platform-support/react-native">Maestro</a>.</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://github.com/wix/Detox">Detox</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="#t=41:58">41:58</a> How do you manage authentication?</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="#t=44:55">44:55</a> Does Facebook use React Native?</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="#t=47:15">47:15</a> Supper Club Questions.</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="#t=50:29">50:29</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="48" data-line-end="49"> <a id="Sick_Picks_48"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="50" data-line-end="53"> Robin: <a href="https://awesomesocks.club/">Awesome Sock Club</a> <a href= "https://twitter.com/wesbos/status/1790416987241283824">Wes’ X Post</a>.</li> </ul> <h3 class="code-line" data-line-start="53" data-line-end="54"> <a id="Shameless_Plugs_53"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="55" data-line-end="57"> Guest: <a href="https://infinite.red/">Infinite Red</a>, <a href= "https://chainreactconf.com/">ChainReactConf</a>, <a href= "https://reactnativeradio.com/">React Native Radio</a>.</li> </ul> <h3 class="code-line" data-line-start="57" data-line-end="58"> <a id="Hit_us_up_on_Socials_57"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Scott and Wes dish out a feast with Robin Heinze from Infinite Red, diving into the world of React Native. They discuss how React Native differs from other webview platforms, highlight popular apps built with it, and serve up essential tools and libraries to spice up every React Native project.
 Show Notes  00:00 Welcome to Syntax!
 01:13 Brought to you by Sentry.io.
 01:30 React Native is different than Cordova or other webview platforms.
 04:18 Is there a ‘write once deploy everywhere’ aspect?
 05:48 What are some React Native apps people may not realize?  Mercari: Buying & Selling App.

 07:13 What about Twitter + Facebook?
 09:15 What is Expo? Is Expo Required?  expo.dev.

 13:27 Does it require a Mac to build an iOS app?
 14:58 React Native and routing. Expo Router.

 16:56 How do native apps normally work without a URL?
 18:35 Can you use CSS with React Native?
 20:27 Do React Native or Tamagui translate to CSS or Yoga?  Tamagui.
 Yoga Layout.

 21:02 React Native app styling on Android and iOS.
 22:20 React Native’s own JavaScript engine. React Native Docs: Using Hermes.

 23:30 Does Hermes have full JS support?
 23:52 What is the new architecture of React Native?  New Architecture.
  React Native JSI.

 26:11 Avoiding translation errors.
 27:24 Will this change break a lot of older React Native apps?
 28:24 Has React Native improved update stability?
 29:55 Where else can React Native run?
 32:52 JavaScript on smart TVs and other smart devices.
 33:57 Bridging to native APIs. Tauri.

 37:14 State management. Redux.js.
 MobX State Tree.

 39:30 What are some tools + libraries that you install on most projects?  JestJS.
 Maestro.
 Detox.

 41:58 How do you manage authentication?
 44:55 Does Facebook use React Native?
 47:15 Supper Club Questions.
 50:29 Sick Picks + Shameless Plugs.
  Sick Picks  Robin: Awesome Sock Club Wes’ X Post.
  Shameless Plugs  Guest: Infinite Red, ChainReactConf, React Native Radio.
  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott:X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

773: React Native with Robin Heinze

Poslechněte si podcast