React/Native & Redux document discusses React, React Native, and Redux. It defines React as a JavaScript UI library that uses components and JSX. React Native is introduced as using the same concepts as React but for building mobile apps using native components. Redux is described as a state management framework that introduces structure to data flow using actions, store, reducers, and state. Sample projects are walked through to demonstrate these concepts and libraries.

1. React/Native & Redux
THE NEW WORLD ORDER

2. Kshitiz Rimal
Full Stack Developer
UI Designer
@kshitizrimal

3. Talk Overview
1. React
2. React Native
3. Redux
4. Walkthrough of some sample projects

4. React
What? Why? How?

5. What is React?
1. Javascript UI Library
2. Component Based

6. Why React?
1. Reusable Components
2. Component Composition
3. Better Performance
4. Rapid Development

7. How it works?
1. Components & JSX
2. Props
3. Component Level State

8. Thinking in React

11. Components
Reusable Block of code, which can be used across multiple projects.
Two Kinds
1. Functional Components
Simple Components which is basically a function which returns certain value passed onto it or just
returns some basic JSX Tags with some value inside it.
2. Class Based Components
Extends the React’s Component Class. Specially used if the intended Component is going to use State
Mechanism or in-built methods

12. Class Based Component

13. Functional Components

14. What is JSX?
1. With JSX you can write HTML tags inside your React’s Component.
2. JSX is a preprocessor that adds XML syntax to JavaScript.
3. Just like XML, JSX tags have a tag name, attributes, and children.

15. JSX in Action

16. Props
1. It is used to pass values from one component to the other component
2. Used in parent component to pass value to child component
3. Used to pass values as well as methods defined in parent component

17. Props in Action

18. Component Level State
1. Local (Component level) states are like internal data storage of each components
2. They are private to individual components
3. Fully Controlled by each components
4. Only available to Class Based Components

19. More on State
1. They can be used on any kind of applications
◦ Most common one is, using it as controlled input to an input element like textbox
◦ Used as flag variable. For eg: show or hide any element of component using values of state

22. More on React
1. Lifecycle Methods
◦ componentWillMount()
◦ componentDidMount() etc
2. Handling Events
◦ onClick()
◦ onChange()
3. Composing Component

25. Getting Started With React
Creating App using ’Creat-React-App’ CLI

28. React Native
1. Core of React with Mobile UI components
2. Components compiled down to Native UIs for iOs and Android
3. Same Concept of react except some changes to fit native mobile development
4. Changes Includes, instead of using HTML tags like divs or anchor tags, it uses
Mobile UI components such as
◦ View
◦ Text
◦ TouchableHighlight
◦ ListView etc

29. File/Folder Structure

30. React Native: How it works
1. It uses UI component provided by the ‘react-native’ library
2. Third Party components can be also in installed from NPM
3. React Native Components gets converted to Native UI elements on compilation
4. Uses Subset of CSS to Style the Application
5. Utilizes Flexbox Property for Layout Styling
6. Provide Support for Debugging using chrome inspector in iOs/Android simulator

31. Creating React Native Project

34. Walkthrough
Simple React Native App that fetches data from web and display as a list.

35. Redux
1. Redux is a State Management Framework that gives a kind of structure to how data should
flow across the App
2. It is independent of React, you can use it with many modern Frameworks
3. Immutable states
4. Four key elements of Redux are
◦ Actions
◦ Store
◦ Reducers
◦ State

37. Why Redux
1. Predictable Changes to State of Application
2. Removes Complexity
3. Support Scalability

38. Adding Redux to the project
You use this command to add redux to the project
npm install --save redux
To work with React you have to add this as well
npm install --save react-redux

39. Walkthrough
Simple React Native + Redux App

44. 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

45. Learning Resources
Redux
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/

46. Q&A

47. Thank You 