Presentation1

•Download as PPTX, PDF•

0 likes•249 views

Kshitiz Rimal

About this talk
• React/React Native
• Demo
• Brief Overview of Redux used in Demo

What is React?
• JavaScript Library for building User Interfaces

What is React Native?
• Cross Platform Native Mobile App Development framework on top of
React

What React Native isn’t
• Its not hybrid app development platform
• UI/Component written in React using Javascript will compiled down
to native code

Concepts from React
• Components
• JSX
• Props
• The State
• Lifecycle Methods

The State
• Private Data Storage for Components
• Cannot be used by another components
• Only Available to class based components

Life cycle Methods & more
1. Lifecycle Methods
• componentWillMount()
• componentDidMount() etc
2. Handling Events
• onClick()
• onChange()

React Native
• Installing React Native
• Initializing React Native
• Folder structure
• CSS Subset Styling
• Debugging
• Mobile Components

Installing React Native
brew install node
brew install watchman
npm install -g react-native-cli

Initializing React Native
react-native init ProjectName
cd ProjectName/
react-native run-ios
or
react-native run-ios

Cross Platform Mobile Components
Some Examples includes
• Text
• View
• TouchableHighlights
• ListView etc

Redux in Brief
• State management library gives structure on how data should flow
• Independent of react or react native
• Immutable States
• Key Elements
• Actions
• Store
• Reducers
• State

Why Redux?
• Removes Complexity
• Predictable Changes
• Support Scalability

Learning Resources
1. React
• Modern React with Redux — Stephen Grider, Udemy [Paid Course]
https://www.udemy.com/react-redux/
• Rally Coding — Stephen Grider, Youtube Channel
https://www.youtube.com/channel/UCQCaS3atWyNHEy5PkDXdpNg
• Facebook Official Docs
https://facebook.github.io/react
2. React Native
• The Complete React Native with Redux — Stephen Grider, Udemy [Paid Course]
https://www.udemy.com/the-complete-react-native-and-redux-course
• Facebook Official React-Native Docs
https://facebook.github.io/react-native

Learning Resources
1. Getting Started with Redux — Dan Abramov, Egghead.io
https://egghead.io/courses/getting-started-with-redux
2. Redux Official Docs
http://redux.js.org/

What's hot

Introduction to react native with reduxMike Melusky

React native-meetup-talkkiranabburi

ITT Flisol 2013Domingo Suarez Torres

Who needs containers in a serverless worldMatthias Luebken

Introduction to GrailsHiten Pratap Singh

Front-End Tools and WorkflowsSara Vieira

Angular4 kickstartFoyzul Karim

Overview of modern software ecosystem for big data analysisMichael Bryzek

JEE Conf 2015: Less JS!_Dewy_

Swagger - Making REST APIs friendlierMiroslav Resetar

javerosmx-2015-marzo-groovy-java8-comparisonDomingo Suarez Torres

Intoduction to ReactRubizza

Enterprise GriffonJames Williams

Getting Started with React Native (and should I use it at all?)Devin Abbott

Modern .NET EcosystemAndrei Marukovich

Building a SaaS with Nodejs, Docker, and CoreOSRoss Kukulinski

Agile sites @ telmore Michele Sciabarrà

Simple linux management user interfacemanoj mehta

Agile sites2Michele Sciabarrà

C# code sharing across the platformsAndrei Marukovich

What's hot (20)

Introduction to react native with redux

React native-meetup-talk

ITT Flisol 2013

Who needs containers in a serverless world

Introduction to Grails

Front-End Tools and Workflows

Angular4 kickstart

Overview of modern software ecosystem for big data analysis

JEE Conf 2015: Less JS!

Swagger - Making REST APIs friendlier

javerosmx-2015-marzo-groovy-java8-comparison

Intoduction to React

Enterprise Griffon

Getting Started with React Native (and should I use it at all?)

Modern .NET Ecosystem

Building a SaaS with Nodejs, Docker, and CoreOS

Agile sites @ telmore

Simple linux management user interface

Agile sites2

C# code sharing across the platforms

Viewers also liked

Presentation1Kshitiz Rimal

React Native custom componentsJeremy Grancher

The Gist of React NativeDarren Cruse

React Native for ReactJS DevsBarak Cohen

Running BabelJS on Windows (Try ES6 on Windows)Kobkrit Viriyayudhakorn

[React Native Tutorial] Lecture 5: Input and StateKobkrit Viriyayudhakorn

JavaScript, React Native and Performance at react-europe 2016Tadeu Zagallo

[React Native Tutorial] Lecture 3: More on ES6/ES2015Kobkrit Viriyayudhakorn

Experiences building apps with React Native @DomCode 2016Adrian Philipp

[React Native Tutorial] Lecture 6: Component, Props, and NetworkKobkrit Viriyayudhakorn

React Native - WorkshopFellipe Chagas

Workshop 26: React Native - The Native SideVisual Engineering

[React Native Tutorial] Lecture 7: Navigation - Scene Transition - ListViewKobkrit Viriyayudhakorn

Introduction to React NativeRami Sayar

React Native in ProductionSeokjun Kim

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn

Lecture 2: ES6 / ES2015 SlideKobkrit Viriyayudhakorn

Intro To React NativeFITC

[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...Kobkrit Viriyayudhakorn

[React-Native Tutorial 10] Camera Roll / Gallery / Camera / Native Modules by...Kobkrit Viriyayudhakorn

Viewers also liked (20)

Presentation1

React Native custom components

The Gist of React Native

React Native for ReactJS Devs

Running BabelJS on Windows (Try ES6 on Windows)

[React Native Tutorial] Lecture 5: Input and State

JavaScript, React Native and Performance at react-europe 2016

[React Native Tutorial] Lecture 3: More on ES6/ES2015

Experiences building apps with React Native @DomCode 2016

[React Native Tutorial] Lecture 6: Component, Props, and Network

React Native - Workshop

Workshop 26: React Native - The Native Side

[React Native Tutorial] Lecture 7: Navigation - Scene Transition - ListView

Introduction to React Native

React Native in Production

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox

Lecture 2: ES6 / ES2015 Slide

Intro To React Native

[React-Native Tutorial] Lecture 8: Midterm Exam Discussion, Feedback, and Ter...

[React-Native Tutorial 10] Camera Roll / Gallery / Camera / Native Modules by...

Similar to Presentation1

Introduction to React nativeDhaval Barot

Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon

MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementZach Lendon

Mastering react with reduxGaurav Singh

Top 10 frameworks of node jsHabilelabs

React native - React(ive) Way To Build Native Mobile AppsJimit Shah

l1-reactnativeintroduction-160816150540.pdfHương Trà Pé Xjnk

React NativeHuqiu Liao

React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptKobkrit Viriyayudhakorn

Javascript Best Practices and Intro to TitaniumTechday7

Building Enterprise Grade Front-End Applications with JavaScript FrameworksFITC

ReactJS vs React Native.pptxNayantikaSrivastava1

Single Page Applications - Desert Code Camp 2012Adam Mokan

React nativeNexThoughts Technologies

React js Online TrainingLearntek1

React-Js-Online-Training-9028522.ppsxKulbir4

React vs Vue JS Explained | Vue JS vs React Which Is Better? | Vue JS for Beg...Simplilearn

Infinum android talks_10_android_libraries_used_on_daily_basisInfinum

FluxibleTaylor Lovett

Using Javascript in today's worldSudar Muthu

Presentation1

1. Cross Platform App Using React Native

2. I’m Kshitiz Rimal • UI/UX Designer • Full Stack Developer

3. About this talk • React/React Native • Demo • Brief Overview of Redux used in Demo

4. What is React? • JavaScript Library for building User Interfaces

5. What is React Native? • Cross Platform Native Mobile App Development framework on top of React

6. What React Native isn’t • Its not hybrid app development platform • UI/Component written in React using Javascript will compiled down to native code

7. Concepts from React • Components • JSX • Props • The State • Lifecycle Methods

8. Components • Class Based • Functional

10.

11. JSX

12. PROPS

13. The State • Private Data Storage for Components • Cannot be used by another components • Only Available to class based components

14.

15. Life cycle Methods & more 1. Lifecycle Methods • componentWillMount() • componentDidMount() etc 2. Handling Events • onClick() • onChange()

16. React Native • Installing React Native • Initializing React Native • Folder structure • CSS Subset Styling • Debugging • Mobile Components

17. Installing React Native brew install node brew install watchman npm install -g react-native-cli

18. Initializing React Native react-native init ProjectName cd ProjectName/ react-native run-ios or react-native run-ios

19. Folder Structure

20. Styling

21. Debugging

22. Cross Platform Mobile Components Some Examples includes • Text • View • TouchableHighlights • ListView etc

23.

24. Demo & Walkthrough

25. Redux in Brief • State management library gives structure on how data should flow • Independent of react or react native • Immutable States • Key Elements • Actions • Store • Reducers • State

26.

27. Why Redux? • Removes Complexity • Predictable Changes • Support Scalability

28. Learning Resources 1. React • Modern React with Redux — Stephen Grider, Udemy [Paid Course] https://www.udemy.com/react-redux/ • Rally Coding — Stephen Grider, Youtube Channel https://www.youtube.com/channel/UCQCaS3atWyNHEy5PkDXdpNg • Facebook Official Docs https://facebook.github.io/react 2. React Native • The Complete React Native with Redux — Stephen Grider, Udemy [Paid Course] https://www.udemy.com/the-complete-react-native-and-redux-course • Facebook Official React-Native Docs https://facebook.github.io/react-native

29. Learning Resources 1. Getting Started with Redux — Dan Abramov, Egghead.io https://egghead.io/courses/getting-started-with-redux 2. Redux Official Docs http://redux.js.org/

30. Q&A

31. Thank You 

Presentation1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Presentation1

Similar to Presentation1 (20)

Presentation1