The document provides an overview of React and React Native, highlighting their functionality as popular JavaScript libraries for web and cross-platform mobile app development, respectively. It discusses core concepts such as components, props, state, and environment setup, and emphasizes the advantages of using React Native, including its performance and strong developer community. Overall, React Native is presented as a user-friendly framework suitable for building high-quality applications, with resources for further exploration.

1. React Native

2. What is
React?
• Popular Java Script Library
• Web Development
• Components as Lego Blocks
• Reactive
• JSX
• Ex. Instagram, Facebook, Airbnb

3. JSX
Java Scrip XML
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

4. What is
React
Native?
• Java Script Framework
• Cross Platform Mobile App Development
• Flux (Native Modules / API)
• Third-Party Libraries and Modules
• Write Once Use Anywhere
• Live Reload
• Ex. Instagram, Facebook, UberEATS, Spotify

5. Why React Native?
Cross
Platform
Java Script Perfomance
Third Party
Components
Developer
Community
Career
Opportunities

6. React Components

7. Component
• Class Component
• Function Component

8. Life Cycle

9. Import Export
• Use to access Components/Functionality in other files
• Default Export
// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;

10. Import Export
• Named Export
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

11. Props
• Props is short form of properties
• Used to pass data between
React components

12. State
• Allows components to create and
manage their own data.
• They can create and
manage their own data with
state.

13. Environment
Setup
Node
Expo CLI Quick Start
nmp
Yarn
React Native CLI
https://reactnative.dev/docs/environment-setup

14. React
Native
CLI
• XCode or Android Studio
• brew install node
• brew install watchman
• npx react-native init {ProjectName}
• npx react-native start
• npx react-native run-ios
• npx react-native run-android

15. React
Native
vs.
Native
• When to use
• Development Speed
• Testing and Debugging
• Security

16. Summary
• It is an excellent framework that is easy to learn & offers good performance as well as
an interface that is comparable to native apps.
• There is no doubt that React Native is one of the best cross-platform mobile
application frameworks. It is open-source and has a strong community.
• UI rendering in React native is excellent. There are few limitations of React Native but
it solely depends upon the developer and his vision.

17. Resources
• https://reactnative.dev/
• https://reactjs.org/