Scribd
Upload
172 views

React Native Workshop: By: Mochamad Halili MZ

This document provides an introduction and overview of React Native, including: - What React is and its key concept of reusable components - How React Native uses React to build mobile apps for iOS and Android using JavaScript instead of platform-specific code - That React Native produces true native mobile apps, not web apps wrapped in a mobile shell - A brief history of how React Native started as a Facebook hackathon project and is now one of the most popular frameworks - Basic steps for getting started with a new React Native project, including installing React Native and Native Base and running on an Android emulator

Uploaded by

mochamz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
172 views

React Native Workshop: By: Mochamad Halili MZ

This document provides an introduction and overview of React Native, including: - What React is and its key concept of reusable components - How React Native uses React to build mobile apps for iOS and Android using JavaScript instead of platform-specific code - That React Native produces true native mobile apps, not web apps wrapped in a mobile shell - A brief history of how React Native started as a Facebook hackathon project and is now one of the most popular frameworks - Basic steps for getting started with a new React Native project, including installing React Native and Native Base and running on an Android emulator

Uploaded by

mochamz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

1

React Native Workshop

By : Mochamad Halili MZ
2

Mochamad Halili
Developer Circle
MZ Surabaya

Email : [email protected]
[email protected]
Facebook : https://www.facebook.com/mochamz
Instagram:
https://www.instagram.com/moc.hamz
LinkedIn : https://id.linkedin.com/in/mochamz
Git : https://gitlab.com/mochamz

FIND MORE
3

React Native
The trend of using React Native for developing iOS and
Android apps is growing. But what exactly is React
Native and how does it work under the hood? To
understand this, we must first know a bit about React.
4

What is React?
React is a JavaScript library for building user
interfaces. A key concept in React is that of a
component. A component is a particular piece of the
user interface, such as this Facebook input field.
To display this component using React, our code
should look something like this:
render() {
return <WriteComment />;
}
5

What is React?
Components in React are composable and reusable. A
component can consist of other components and of
primitives. In the case of a web component, examples
of a primitive would be HTML elements such as div and
span.
render() {
return (
<div>
<ProfilePicture />
<CommentInput />
</div>
);
}
React is smart. It detects which components need to be
re-rendered based on the changes in the data, and
which not. This makes it fast and powerful, and that’s
why it’s a popular choice for development of web
applications.
6

What is React Native?


React Native offers a way to build mobile applications
using React and JavaScript.
Instead of the span primitive, which we have on the
web, React Native offers the Text primitive. If we are
building an iOS app, React Native will make sure that
the Text results with a native iOS UIView containing the
text. If we are building an Android application, it will
result with a native TextView.
This is very important. Even though we are building our
app using JavaScript, we do not get a web app
embedded inside the shell of a mobile one. The result
is a real native iOS or Android app.
7

React Native Story


The story of React Native is quite fascinating: what
started as Facebook’s internal hackathon project, in the
summer of 2013, has since become one of the most
popular frameworks. The first public preview was in
January of 2015 at React.js Con. In March of 2015,
Facebook announced at F8 that React Native is open
and available on GitHub.

After a little over three years, React Native’s growth


and adoption rate doesn’t show any signs of slowing
down. The statistics on Github repository are
impressive: 1766 contributors committed 14,874 times
in 85 branches with 283 releases.
8

it's time to code


9

Getting Started
Do this for new project.
• Install React Native (react-native init book)
• Go to book directory
• Install Native Base (npm install native-base --save && react-native link)
• Open your android emulator
• Run react-native run-android for make sure youre projects work
10

End Section

You might also like