LUNCH & LEARN!

JAVASCRIPT BASICS

REACT NATIVE TRAINING

JAVASCRIPT BASICS

LANGUAGE FEATURES

C Syntax
High-Level
Dynamic
Weakly-Typed
Object-Based
Multi-Paradigm
- Imperative
- Event-Driven
- Object-Oriented
- Functional

JAVASCRIPT BASICS

VARIABLES

JAVASCRIPT BASICS

PRIMITIVE TYPES

JAVASCRIPT BASICS

NAMED FUNCTIONS

JAVASCRIPT BASICS

this

JAVASCRIPT BASICS

.bind()

JAVASCRIPT BASICS

.call()

JAVASCRIPT BASICS

.apply()

JAVASCRIPT BASICS

ARROW FUNCTIONS

JAVASCRIPT BASICS

PASSING PARAMETERS

JAVASCRIPT BASICS

PASSING CALLBACKS

JAVASCRIPT BASICS

OBJECTS

JAVASCRIPT BASICS

OBJECT KEYS

JAVASCRIPT BASICS

MERGING OBJECTS

JAVASCRIPT BASICS

GETTING CLASSY

JAVASCRIPT BASICS

INHERITANCE

JAVASCRIPT BASICS

WHILE LOOPS

JAVASCRIPT BASICS

FOR LOOPS

JAVASCRIPT BASICS

Array.forEach()

JAVASCRIPT BASICS

Array.map()

JAVASCRIPT BASICS

Array.filter()

JAVASCRIPT BASICS

Array.reduce()

JAVASCRIPT BASICS

if / else

JAVASCRIPT BASICS

TERNARY

JAVASCRIPT BASICS

SWITCH

JAVASCRIPT BASICS

try / catch

JAVASCRIPT BASICS

HOMEWORK

Fork this pen and fill in the missing parts of the functions

JAVASCRIPT BASICS

RESOURCES

LUNCH & LEARN

INTRO TO REACT

REACT NATIVE TRAINING

INTRO TO REACT

WHAT IS REACT?

Declarative
Component-Based
Learn Once, Write Anywhere

INTRO TO REACT

UNIDIRECTIONAL DATA FLOW

DATA

APPLICATION

COMPONENT

INTRO TO REACT

WHAT IS JSX?

// Components
<Footer />

// Passing in Props
<Content 
    type='main'
    data={data}
/>

// Composing Components
<Header>
    <Logo />
    <AccountSettings />
</Header>

INTRO TO REACT

STATELESS COMPONENTS

INTRO TO REACT

PASSING PROPS

INTRO TO REACT

PASSING CALLBACKS

INTRO TO REACT

STATEFUL COMPONENTS

INTRO TO REACT

STATE VS. PROPS

props are passed down from the parent Component
props cannot be changed by the child component
state is local to the component
only the component that owns the state can change it

INTRO TO REACT

LIFECYCLE METHODS - Mounting

constructor()
componentWillMount()
render()
componentDidMount()

INTRO TO REACT

LIFECYCLE METHODS - Mounting

INTRO TO REACT

LIFECYCLE METHODS - Updating

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

INTRO TO REACT

LIFECYCLE METHODS - Updating

INTRO TO REACT

LIFECYCLE METHODS - Unmounting

componentWillUnmount()

INTRO TO REACT

LIFECYCLE METHODS - Unmounting

INTRO TO REACT

SEPARATE FUNCTIONAL AND STATEFUL COMPONENTS

STATE MANAGEMENT

PRESENTATION

INTRO TO REACT

HIGHER ORDER COMPONENTS

INTRO TO REACT

HOMEWORK

INTRO TO REACT

HOMEWORK

Fork this pen and make the "Add Row" button and the listing of the rows functional. It should look like this:

INTRO TO REACT

HOMEWORK

Fork this pen and show the <Loading /> component and then fetch the data with the fetchPeople() method and render them with the <Person /> component:

INTRO TO REACT

RESOURCES

REACT NATIVE!

REACT NATIVE TRAINING

INTRO TO REACT NATIVE

CREATING A NEW PROJECT

npm install -g create-react-native-app;

create-react-native-app MyAppName;

cd MyAppName;

npm start;

INTRO TO REACT NATIVE

CREATING A NEW PROJECT [DATA]

{
    "performers": [
      {
        "id": 6419,
        "name": "Afrojack",
        "image": "http://rscdn.festapp.com/0dc0acbc-249d-4d1a-8341-ffb1866c46831.jpg"
      },
      {
        "id": 6420,
        "name": "Anders Osborne",
        "image": "http://rscdn.festapp.com/a07e17ea-0f93-4e1d-8d3f-e9f08873e1c01.jpg"
      },
      {
        "id": 6421,
        "name": "Baauer",
        "image": "http://rscdn.festapp.com/3b6a584d-e3b1-4bd5-9e8d-e694415eee8e1.jpg"
      },
      {
        "id": 7415,
        "name": "Banditos",
        "image": "http://rscdn.festapp.com/3b9006c8-481e-4588-9584-14489ed2d2041.jpg"
      },
      {
        "id": 6422,
        "name": "Bassnectar",
        "image": "http://rscdn.festapp.com/67c481c1-3aee-4827-8ff0-d095ea29c3051.jpg"
      },
      {
        "id": 6423,
        "name": "Benny Benassi",
        "image": "http://rscdn.festapp.com/f714c9a3-9e92-4c58-8ab1-d52c087d43a41.jpeg"
      },
      {
        "id": 6424,
        "name": "Best Coast",
        "image": "http://rscdn.festapp.com/484763cd-3e60-40b3-9cd3-9dd7f4171bfc1.jpeg"
      },
      {
        "id": 6425,
        "name": "Big Gigantic",
        "image": "http://rscdn.festapp.com/73c9f973-270c-4c03-b7d0-2c1e07ae004c1.jpg"
      },
      {
        "id": 6426,
        "name": "Bloc Party",
        "image": "http://rscdn.festapp.com/b8d8ced6-b52f-4ad2-b904-a4273ff620471.jpg"
      }
    ]
}

INTRO TO REACT NATIVE

PRIMITIVES

INTRO TO REACT NATIVE

StyleSheet

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Title = props => (
    <View style={styles.title}>
        <Text style={styles.titleText}>
            {props.children}
        </Text>
    </View>
);

const styles = StyleSheet.create({
   title: {
        paddingTop: 12
    },
   titleText: {
        fontSize: 32
    }
});

INTRO TO REACT NATIVE

Styled Components

import styled from 'styled-components/native';

const StyledView = styled.View`
  background-color: papayawhip;
`;

const StyledText = styled.Text`
  color: palevioletred;
`;

INTRO TO REACT NATIVE

Animated

class App extends React.Component {

    constructor (props) {
        super(props);

        this.state = {
            animatedWidth: new Animated.Value(200)
        };
    }
  
    componentDidMount () {
      setInterval(() => {
        this._isExpanded = !this._isExpanded;
        Animated.timing(this.state.animatedWidth, {
            toValue: this._isExpanded ? 400 : 200,
            duration: 500
        }).start();
        
      }, 2000);
    }

    render () {
        return (
            <Animated.View style={{
                width: this.state.animatedWidth,
                height: 200,
                backgroundColor: 'red'
            }} />
        );
    }

}

INTRO TO REACT NATIVE

HOMEWORK

Make a simple React-Native app that looks something like this with the ability to like and unlike a single performer.

INTRO TO REACT NATIVE

RESOURCES

JavaScript Basics

By tysoncadenhead

LUNCH & LEARN!

JAVASCRIPT BASICS

INTRO TO REACT

REACT NATIVE!

JavaScript Basics

More from tysoncadenhead