Introduction to React Native Web
HTML-код
- Опубликовано: 10 фев 2025
- In this video we convert a scoreboard in React to use React Native Web, learn how to style our elements and some differences when collecting input, using buttons, and rendering lists.
---------- Course
Want to go deeper with Next.js? Join me in my Next Level Next.js course where over 29 videos and 8 hours of content we'll build a full application from start to finish. We use TypeScript, GraphQL, Prisma, Apollo, Mapbox, Firebase and lots more. courses.leighh...
---------- Links
React Native Web - necolas.github...
Starting Code - github.com/lei...
Source Code - github.com/lei...
---------- Connect
Join this channel - / @leighhalliday
Join me on Discord - / discord
Informative and well organized content Leigh. It's hilarious for me as a 20-year CSS guy, how that world always reinvents new complexities to do the exact same damn thing we were doing in the last century. Now FB is introducing that shockingly new concept, the "Stylesheet" lol.
I see where you're coming from, but if you follow this train of thought you will end up having to type assembly or binary code. Or lets toss out our tracktors and start plowing our fields with our bare hands again for that matter. What I'm trying to say: let's not bash too much on "shockingly" new concepts, this way of working brought us to where we are today. Cudoz to you, 20-year CSS guy, lol.
You are very good at explaining! Congratulations! One observation about conditional rendering:
At the FlatList part, you have: {data && }
This is good until data is falsy (let's say an empty string) and instead of showing nothing, it will show the falsy value, causing a "Values can only be rendered inside Text components" error on React Native.
The same can happen with numbers.
So the best way to do conditional rendering, is to do it with a ternary operator.
I.E. { data ? : null }
Hola Leigh, llegué desde el canal @Leigh en Español,
excelentes videos, gracias por el excelente contenido en ambos canales, por favor no abandones el otro canal !
Excellent video. I was wondering how could I add React Native Web to my RN mobile app.
Thanks to the developer(s) of this babel plugin. I was thinking maybe we need to separate the UIs after all. 😅
Awesome video. Thanks!
I'd love to see a follow-up to this with actually deploying a RNW app to Apple and Play Stores, as well as the web. Bonus points if it's setup so a push to master deploys everywhere. 😇 I feel like if someone could figure out Next/RNW with Expo + ToDesktop deploys then they'd have The Holy Grail of one-codebase setups.
I am currently developing an app with expo, react native and firebase which has both native and web side, I'll figure it out! lol
@@ashleyhylton802 best of luck, I'm starting a project with that aim too!
How to add an icon for web??
Thanks for sharing
Brilliant explanation
Thank you Leigh!
Glad you liked it!!
Thanks for sharing, very informative. ☘
Thank you noccer!!
How is this for seo?
Thanks for share Leigh! Is there any specific use case when to use React Native Web instead of Reactjs?
Can we have same code base for navigation. I was trying to use react-navigation. But it doesn't seem to work.
This is very interesting and thank you for sharing. But, what is the purpose of using React Native Web? In which case do we want to use it? Are these both compatible and responsive in both mobile and web?? Can we still upload in App store or Android store?It would be great if that's possible.
Yes. One codebase to rule them all.
Is it a smart idea to convert an existing ecommerce RN app to RNW ?
How do you handle responsive design with RNW? Is it possible to leverage media queries?
The RNW Dimensions API.
We didn’t really of your app still works. You should try another value when porting your code to another UI.