jQuery Refresher

Who am I?

Treighton Mauldin

• ~5 years in web development

• Technical Director @ Page Design Group

• 3-time instructor @ UCD Coding Bootcamp

• Favorite Languages: JavaScript, php, Go 

Twitter: @treighton1988  //  GitHub: @treighton

What is jQuery?

What we are going to cover today

• How to "query" the DOM
• Making updates to the DOM
• Creating Elements
• Handling Events and adding interactivity
• The 2nd coolest hero of the trojan war

DOM Query

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

Creating DOM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

Some More Code...

Layout, Fetching JSON, and passing to Components

import React from 'react'
import Layout from '../components/Layout'
import Articles from '../components/Articles'
import fetch from 'isomorphic-unfetch'

const Index = (props) => {
        return (
            <Layout>
                <Articles posts={props.posts} />
            </Layout>
        )
    }


Index.getInitialProps = async function() {
    const res = await fetch('http://pagedev.dev/wp-json/wp/v2/posts')
    const data = await res.json()

    console.log(data)

    return {
        posts: data
    }
};

export default Index