React Native allows developers to build cross-platform apps for iOS, Android, and the Web from a single JavaScript codebase. Get started building your first native mobile app with React Native

#react #mobiledev #100SecondsOfCode

🔗 Resources

React Native Docs https://reactnative.dev
Expo https://expo.dev
RN Bridge https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:44:24.340Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
8e0aa124-9b2e-425b-953e-ebe815689199
405a9d3d35716ad2655fb4ca3f00ee171af9fdda62b7c1e68d7a0dec776aea6b
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
React Native.
Write JavaScript and React to build apps for iOS, Android, and the web from a single codebase.
According to law, any application that can be written in JavaScript will eventually be written in JavaScript.
The first way JS developers tried to build mobile apps was by wrapping their native applications in a sandbox browser called a webview, using tools like Apache Cordova and Adobe PhoneGap.
The philosophy is write once, run anywhere.
This works, but it can be hard to make a website feel like a true native experience, React Native takes a different approach.
It feels just like React DOM for the web, but instead of using HTML and the DOM as building blocks for the UI, it uses the native components that you would find on iOS and Android.
The philosophy is learn once right anywhere.
You can't just take your existing React web app and upload it to the app store, but you can use the React skills you already have to build a native app without ever having to touch Java or objective c, instead, you import building block components like button, switch, scroll view, and the most fundamental of which is view, at runtime, it will use the true native component on the corresponding platform like uiview, android.view, or div on the web.
It's like building 3 apps for the price of 1.
But in some cases, you may want a different visual experience based on the underlying OS.
The platform module allows you to check which platform you're on and render different components accordingly.
When it comes to visuals, there's no CSS in React Native.
Instead, every core component takes a style prop that can be customized with a style sheet constructed from JavaScript.
In development, it supports fast refresh, which means you can instantly see the changes you make to your code on any platform.
You may also want to tap into native features like the device camera, push notifications and geolocation, these concerns are handled by one of the most active open source communities on GitHub.
There's open source packages for almost Everything, that can be installed with NPM just like any other JavaScript project.
And there's frameworks like Expo that build on top of React Native primitives to provide all the tooling required to ship your app to production, you can use React Native to build a complete mobile app or integrate it with existing iOS and Android projects.
It's not an all or nothing solution.
This has been React Native in 100 seconds.
If you wanna see more short videos like this, hit the like button and subscribe.
And let me know if you wanna see more React Native content in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: React Native. Write JavaScript and React to build apps for iOS, Android, and the web from a single codebase. According to law, any application that can be written in JavaScript will eventually be written in JavaScript. The first way JS developers tried to build mobile apps was by wrapping their native applications in a sandbox browser called a webview, using tools like Apache Cordova and Adobe PhoneGap. The philosophy is write once, run anywhere.

This works, but it can be hard to make a website feel like a true native experience, React Native takes a different approach. It feels just like React DOM for the web, but instead of using HTML and the DOM as building blocks for the UI, it uses the native components that you would find on iOS and Android. The philosophy is learn once right anywhere. You can't just take your existing React web app and upload it to the app store, but you can use the React skills you already have to build a native app without ever having to touch Java or objective c, instead, you import building block components like button, switch, scroll view, and the most fundamental of which is view, at runtime, it will use the true native component on the corresponding platform like uiview, android.view, or div on the web. It's like building 3 apps for the price of 1.

But in some cases, you may want a different visual experience based on the underlying OS. The platform module allows you to check which platform you're on and render different components accordingly. When it comes to visuals, there's no CSS in React Native. Instead, every core component takes a style prop that can be customized with a style sheet constructed from JavaScript. In development, it supports fast refresh, which means you can instantly see the changes you make to your code on any platform.

You may also want to tap into native features like the device camera, push notifications and geolocation, these concerns are handled by one of the most active open source communities on GitHub. There's open source packages for almost Everything, that can be installed with NPM just like any other JavaScript project. And there's frameworks like Expo that build on top of React Native primitives to provide all the tooling required to ship your app to production, you can use React Native to build a complete mobile app or integrate it with existing iOS and Android projects. It's not an all or nothing solution. This has been React Native in 100 seconds.

If you wanna see more short videos like this, hit the like button and subscribe. And let me know if you wanna see more React Native content in the comments. Thanks for watching, and I will see you in the next one.
React Native. Write JavaScript and React to build apps for iOS, Android, and the web from a single codebase. According to law, any application that can be written in JavaScript will eventually be written in JavaScript. The first way JS developers tried to build mobile apps was by wrapping their native applications in a sandbox browser called a webview, using tools like Apache Cordova and Adobe PhoneGap.
The philosophy is write once, run anywhere. This works, but it can be hard to make a website feel like a true native experience, React Native takes a different approach. It feels just like React DOM for the web, but instead of using HTML and the DOM as building blocks for the UI, it uses the native components that you would find on iOS and Android.
ideologies
The philosophy is learn once right anywhere. You can't just take your existing React web app and upload it to the app store, but you can use the React skills you already have to build a native app without ever having to touch Java or objective c, instead, you import building block components like button, switch, scroll view, and the most fundamental of which is view, at runtime, it will use the true native component on the corresponding platform like uiview, android.view, or div on the web.
It's like building 3 apps for the price of 1. But in some cases, you may want a different visual experience based on the underlying OS. The platform module allows you to check which platform you're on and render different components accordingly. When it comes to visuals, there's no CSS in React Native. Instead, every core component takes a style prop that can be customized with a style sheet constructed from JavaScript. In development, it supports fast refresh, which means you can instantly see the changes you make to your code on any platform.
graphic design
visualization
software
You may also want to tap into native features like the device camera, push notifications and geolocation, these concerns are handled by one of the most active open source communities on GitHub. There's open source packages for almost Everything, that can be installed with NPM just like any other JavaScript project. And there's frameworks like Expo that build on top of React Native primitives to provide all the tooling required to ship your app to production, you can use React Native to build a complete mobile app or integrate it with existing iOS and Android projects.
software development
infrastructure
It's not an all or nothing solution. This has been React Native in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe.
And let me know if you wanna see more React Native content in the comments. Thanks for watching, and I will see you in the next one.
dialects
React Native. Write JavaScript and React to build apps for iOS, Android, and the web from a single codebase. According to law, any application that can be written in JavaScript will eventually be written in JavaScript. The first way JS developers tried to build mobile apps was by wrapping their native applications in a sandbox browser called a webview, using tools like Apache Cordova and Adobe PhoneGap. The philosophy is write once, run anywhere. This works, but it can be hard to make a website feel like a true native experience, React Native takes a different approach. It feels just like React DOM for the web, but instead of using HTML and the DOM as building blocks for the UI, it uses the native components that you would find on iOS and Android. The philosophy is learn once right anywhere. You can't just take your existing React web app and upload it to the app store, but you can use the React skills you already have to build a native app without ever having to touch Java or objective c, instead, you import building block components like button, switch, scroll view, and the most fundamental of which is view, at runtime, it will use the true native component on the corresponding platform like uiview, android.view, or div on the web. It's like building 3 apps for the price of 1. But in some cases, you may want a different visual experience based on the underlying OS. The platform module allows you to check which platform you're on and render different components accordingly. When it comes to visuals, there's no CSS in React Native. Instead, every core component takes a style prop that can be customized with a style sheet constructed from JavaScript. In development, it supports fast refresh, which means you can instantly see the changes you make to your code on any platform. You may also want to tap into native features like the device camera, push notifications and geolocation, these concerns are handled by one of the most active open source communities on GitHub. There's open source packages for almost Everything, that can be installed with NPM just like any other JavaScript project. And there's frameworks like Expo that build on top of React Native primitives to provide all the tooling required to ship your app to production, you can use React Native to build a complete mobile app or integrate it with existing iOS and Android projects. It's not an all or nothing solution. This has been React Native in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. And let me know if you wanna see more React Native content in the comments. Thanks for watching, and I will see you in the next one.
React
react
Native.
native
Write
write
JavaScript
javascript
and
and
React
react
to
to
build
build
apps
apps
for
for
iOS,
ios
Android,
android
and
and
the
the
web
web
from
from
a
a
single
single
codebase.
codebase
According
according
to
to
law,
law
any
any
application
application
that
that
can
can
be
be
written
written
in
in
JavaScript
javascript
will
will
eventually
eventually
be
be
written
written
in
in
JavaScript.
javascript
The
the
first
first
way
way
JS
js
developers
developers
tried
tried
to
to
build
build
mobile
mobile
apps
apps
was
was
by
by
wrapping
wrapping
their
their
native
native
applications
applications
in
in
a
a
sandbox
sandbox
browser
browser
called
called
a
a
webview,
webview
using
using
tools
tools
like
like
Apache
apache
Cordova
cordova
and
and
Adobe
adobe
PhoneGap.
phonegap
The
the
philosophy
philosophy
is
is
write
write
once,
once
run
run
anywhere.
anywhere
This
this
works,
works
but
but
it
it
can
can
be
be
hard
hard
to
to
make
make
a
a
website
website
feel
feel
like
like
a
a
true
true
native
native
experience,
experience
React
react
Native
native
takes
takes
a
a
different
different
approach.
approach
It
it
feels
feels
just
just
like
like
React
react
DOM
dom
for
for
the
the
web,
web
but
but
instead
instead
of
of
using
using
HTML
html
and
and
the
the
DOM
dom
as
as
building
building
blocks
blocks
for
for
the
the
UI,
ui
it
it
uses
uses
the
the
native
native
components
components
that
that
you
you
would
would
find
find
on
on
iOS
ios
and
and
Android.
android
The
the
philosophy
philosophy
is
is
learn
learn
once
once
right
right
anywhere.
anywhere
You
you
can't
can't
just
just
take
take
your
your
existing
existing
React
react
web
web
app
app
and
and
upload
upload
it
it
to
to
the
the
app
app
store,
store
but
but
you
you
can
can
use
use
the
the
React
react
skills
skills
you
you
already
already
have
have
to
to
build
build
a
a
native
native
app
app
without
without
ever
ever
having
having
to
to
touch
touch
Java
java
or
or
objective
objective
c,
c
instead,
instead
you
you
import
import
building
building
block
block
components
components
like
like
button,
button
switch,
switch
scroll
scroll
view,
view
and
and
the
the
most
most
fundamental
fundamental
of
of
which
which
is
is
view,
view
at
at
runtime,
runtime
it
it
will
will
use
use
the
the
true
true
native
native
component
component
on
on
the
the
corresponding
corresponding
platform
platform
like
like
uiview,
uiview
android.view,
android.view
or
or
div
div
on
on
the
the
web.
web
It's
it's
like
like
building
building
3
3
apps
apps
for
for
the
the
price
price
of
of
1.
1
But
but
in
in
some
some
cases,
cases
you
you
may
may
want
want
a
a
different
different
visual
visual
experience
experience
based
based
on
on
the
the
underlying
underlying
OS.
os
The
the
platform
platform
module
module
allows
allows
you
you
to
to
check
check
which
which
platform
platform
you're
you're
on
on
and
and
render
render
different
different
components
components
accordingly.
accordingly
When
when
it
it
comes
comes
to
to
visuals,
visuals
there's
there's
no
no
CSS
css
in
in
React
react
Native.
native
Instead,
instead
every
every
core
core
component
component
takes
takes
a
a
style
style
prop
prop
that
that
can
can
be
be
customized
customized
with
with
a
a
style
style
sheet
sheet
constructed
constructed
from
from
JavaScript.
javascript
In
in
development,
development
it
it
supports
supports
fast
fast
refresh,
refresh
which
which
means
means
you
you
can
can
instantly
instantly
see
see
the
the
changes
changes
you
you
make
make
to
to
your
your
code
code
on
on
any
any
platform.
platform
You
you
may
may
also
also
want
want
to
to
tap
tap
into
into
native
native
features
features
like
like
the
the
device
device
camera,
camera
push
push
notifications
notifications
and
and
geolocation,
geolocation
these
these
concerns
concerns
are
are
handled
handled
by
by
one
one
of
of
the
the
most
most
active
active
open
open
source
source
communities
communities
on
on
GitHub.
github
There's
there's
open
open
source
source
packages
packages
for
for
almost
almost
Everything,
everything
that
that
can
can
be
be
installed
installed
with
with
NPM
npm
just
just
like
like
any
any
other
other
JavaScript
javascript
project.
project
And
and
there's
there's
frameworks
frameworks
like
like
Expo
expo
that
that
build
build
on
on
top
top
of
of
React
react
Native
native
primitives
primitives
to
to
provide
provide
all
all
the
the
tooling
tooling
required
required
to
to
ship
ship
your
your
app
app
to
to
production,
production
you
you
can
can
use
use
React
react
Native
native
to
to
build
build
a
a
complete
complete
mobile
mobile
app
app
or
or
integrate
integrate
it
it
with
with
existing
existing
iOS
ios
and
and
Android
android
projects.
projects
It's
it's
not
not
an
an
all
all
or
or
nothing
nothing
solution.
solution
This
this
has
has
been
been
React
react
Native
native
in
in
100
100
seconds.
seconds
If
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
hit
hit
the
the
like
like
button
button
and
and
subscribe.
subscribe
And
and
let
let
me
me
know
know
if
if
you
you
wanna
wanna
see
see
more
more
React
react
Native
native
content
content
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, the speaker discusses React Native's approach to building apps for iOS, Android, and the web, emphasizing the use of native components instead of building on top of React. React Native uses the native components available on iOS and Android, and allows for fast refresh, which is an active open source community on GitHub. The speaker also mentions that React Native supports fast refresh, allows for instant updates, and that there are open source packages for almost everything.
React Native in 100 Seconds
React Native. Write JavaScript and React to build apps for iOS, Android, and the web from a single codebase. According to law, any application that can be written in JavaScript will eventually be written in JavaScript. The first way JS developers tried to build mobile apps was by wrapping their native applications in a sandbox browser called a webview, using tools like Apache Cordova and Adobe PhoneGap. The philosophy is write once, run anywhere. This works, but it can be hard to make a website feel like a true native experience, React Native takes a different approach. It feels just like React DOM for the web, but instead of using HTML and the DOM as building blocks for the UI, it uses the native components that you would find on iOS and Android. The philosophy is learn once right anywhere. You can't just take your existing React web app and upload it to the app store, but you can use the React skills you already have to build a native app without ever having to touch Java or objective c, instead, you import building block components like button, switch, scroll view, and the most fundamental of which is view, at runtime, it will use the true native component on the corresponding platform like uiview, android.view, or div on the web. It's like building 3 apps for the price of 1. But in some cases, you may want a different visual experience based on the underlying OS. The platform module allows you to check which platform you're on and render different components accordingly. When it comes to visuals, there's no CSS in React Native. Instead, every core component takes a style prop that can be customized with a style sheet constructed from JavaScript. In development, it supports fast refresh, which means you can instantly see the changes you make to your code on any platform. You may also want to tap into native features like the device camera, push notifications and geolocation, these concerns are handled by one of the most active open source communities on GitHub. There's open source packages for almost Everything, that can be installed with NPM just like any other JavaScript project. And there's frameworks like Expo that build on top of React Native primitives to provide all the tooling required to ship your app to production, you can use React Native to build a complete mobile app or integrate it with existing iOS and Android projects. It's not an all or nothing solution. This has been React Native in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. And let me know if you wanna see more React Native content in the comments. Thanks for watching, and I will see you in the next one.
In this video, the speaker discusses React Native's approach to building apps for iOS, Android, and the web, emphasizing the use of native components instead of building on top of React. React Native uses the native components available on iOS and Android, and allows for fast refresh, which is an active open source community on GitHub. The speaker also mentions that React Native supports fast refresh, allows for instant updates, and that there are open source packages for almost everything.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : React Native in 100 Seconds 
        and a small summary : In this video, the speaker discusses React Native's approach to building apps for iOS, Android, and the web, emphasizing the use of native components instead of building on top of React. React Native uses the native components available on iOS and Android, and allows for fast refresh, which is an active open source community on GitHub. The speaker also mentions that React Native supports fast refresh, allows for instant updates, and that there are open source packages for almost everything.
        [/INST]
        
        Generate the video : React Native. Write JavaScript and React to build apps for iOS, Android, and the web from a single codebase. According to law, any application that can be written in JavaScript will eventually be written in JavaScript. The first way JS developers tried to build mobile apps was by wrapping their native applications in a sandbox browser called a webview, using tools like Apache Cordova and Adobe PhoneGap. The philosophy is write once, run anywhere. This works, but it can be hard to make a website feel like a true native experience, React Native takes a different approach. It feels just like React DOM for the web, but instead of using HTML and the DOM as building blocks for the UI, it uses the native components that you would find on iOS and Android. The philosophy is learn once right anywhere. You can't just take your existing React web app and upload it to the app store, but you can use the React skills you already have to build a native app without ever having to touch Java or objective c, instead, you import building block components like button, switch, scroll view, and the most fundamental of which is view, at runtime, it will use the true native component on the corresponding platform like uiview, android.view, or div on the web. It's like building 3 apps for the price of 1. But in some cases, you may want a different visual experience based on the underlying OS. The platform module allows you to check which platform you're on and render different components accordingly. When it comes to visuals, there's no CSS in React Native. Instead, every core component takes a style prop that can be customized with a style sheet constructed from JavaScript. In development, it supports fast refresh, which means you can instantly see the changes you make to your code on any platform. You may also want to tap into native features like the device camera, push notifications and geolocation, these concerns are handled by one of the most active open source communities on GitHub. There's open source packages for almost Everything, that can be installed with NPM just like any other JavaScript project. And there's frameworks like Expo that build on top of React Native primitives to provide all the tooling required to ship your app to production, you can use React Native to build a complete mobile app or integrate it with existing iOS and Android projects. It's not an all or nothing solution. This has been React Native in 100 seconds. If you wanna see more short videos like this, hit the like button and subscribe. And let me know if you wanna see more React Native content in the comments. Thanks for watching, and I will see you in the next one.
        