bobziroll (Bob Ziroll)

Learn React for free

    import {createStore} from "redux"
    
    const initialState = {
        counter: 0,
        contacts: []
    }
    
    function reducer(state = initialState, action) {
        switch(action.type) {
            case "INCREMENT":
                /* 
                Scrimba's Babel settings don't support object spread ope
                if you're using Babel to support ALL ES6 syntax, you'd be able to
                use the object spread operator here instead of Object.assign()

Vanilla Redux (Finished)

Bob Ziroll

    export function addItem(item) {
        return {
            type: "ADD_ITEM",
            item
        }
    }
    
    export function removeItem(item) {
        return {
            type: "REMOVE_ITEM",
            item
        }
    }

Shopping Cart (Finished)

Bob Ziroll

    const jokesData = [
        {
            id: 1,
            punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."
        },
        {
            id: 2,
            question: "What's the best thing about Switzerland?",
            punchLine: "I don't know, but the flag is a big plus!"
        },
        {
            id: 3,
            question: "Did you hear about the mathematician who's afraid of negative numbers?",
            punchLine: "He'll stop at nothing to avoid them!"

Props (Finished)

Bob Ziroll

    import React from "react"
    
    function TodoItem(props) {
        const completedStyle = {
            fontStyle: "italic",
            color: "#cdcdcd",
            textDecoration: "line-through"
        }
    
        return (
            <div className="todo-item">
                <input 
                    onChange={() => props.handleChange(props.todo.id)} 
                    name="completed"

State (Finished)

Bob Ziroll

    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        background-color: whitesmoke;
    }
    
    header {
        height: 100px;
        display: flex;
        align-items: center;
        background: #6441A5;  /* fallback for old browsers */

Meme Generator (Finished)

Bob Ziroll

Course Introduction & Philosophy

Bob Ziroll5:1624 days ago

    import React, { Component } from "react"
    
    class MemeGenerator extends Component {
        constructor() {
            super()
            this.state = {
               topText: "",
               bottomText: "",
               randomImg: "http://i.imgflip.com/1bij.jpg",
               allMemeImgs: []
            }
            this.handleChange = this.handleChange.bind(this)
            this.handleSubmit = this.handleSubmit.bind(this)
        }

What we'll be building

Bob Ziroll0:584 months ago

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Main extends React.Component {
      render() {
        return (
          <h1>Hello world!</h1>
        );
      }
    }
    
    ReactDOM.render(<Main />, document.getElementById('root'));

Why React?

Bob Ziroll2:567 months ago

    import React from "react"
    import ReactDOM from "react-dom"
    
    // JSX
    ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root"))
    
    var myNewP = document.createElement("p")
    myNewP.innerHTML = "This is a paragraph."

ReactDOM & JSX

Bob Ziroll6:497 months ago

Bob Ziroll

Courses

Open West Intro to Redux Workshop

Open West Intro to React Workshop

Learn React for free