Skip to content

Latest commit

 

History

History
265 lines (192 loc) · 5 KB

workshop.mdx

File metadata and controls

265 lines (192 loc) · 5 KB

import { CodeSurfer } from "mdx-deck-code-surfer" import { Appear } from 'mdx-deck' import { Head } from 'mdx-deck' import Counter from './snippets/Counter'

React Workshop

New 2018 Edition

Now with added jokes.

github.com/fiuacm/react-workshop


Hi! I am Angelo.

Failed standup comedian, father

product manager @ Citrix


An Abridged History of Web Development

&

Why It Used to Suck


<CodeSurfer title="What we could do back in the olden days" notes="Still can do this now" code={require("!raw-loader!./snippets/rawhtml.html")} lang="html" />

1995


Then this thing called JavaScript came around.


2005


What JS could do in 2007

  • Do cool animations
  • Call some server code
  • Type errors

<CodeSurfer notes="Nice right?" code={require("!raw-loader!./snippets/rawjs.js")} lang="javascript" />


Then Node.JS comes out


What JS could do now in currentYear

  • everything

Okay- now to the good stuff.


What is React?


React is...

a JS library that makes it easier to make front-ends.

It handles what we call 'the View layer' which is everything we see in a web application.


Before React

  • Needed to write HTML templates
  • Coupled business logic with view logic
  • Other frameworks were very opinionated

<CodeSurfer notes="Hello World Before React" code={require("!raw-loader!./snippets/jshelloworld.js")} lang="javascript" steps={[ { lines: [1, 2, 3, 5], notes: "all this" }, { lines: [6], notes: "just so you can say Hi" } ]} />


Output

Hello World


With React

  • No need to manually manipulate the DOM
  • Easier to write reusable code (Components)
  • declarative, efficient, and flexible

<CodeSurfer notes="Hello World With React" code={require("!raw-loader!./snippets/reacthelloworld.js")} lang="javascript" steps={[ { lines: [2], notes: "JSX in action" } ]} />

React's Secret Sauce


JSX


<CodeSurfer notes="JSX Before Compilation" code={require("!raw-loader!./snippets/jsxprecomp.js")} lang="javascript" steps={[ { lines: [4,5,6,7,8], notes: "JS Object Detected" }, { lines: [11], notes: "Notice how we pass the object?" } ] } />

<CodeSurfer notes="Look ma! A element for every JSX tag we used" code={require("!raw-loader!./snippets/jsxpostcomp.js")} lang="javascript" />

Lets do a thing that drives this concept home.

Why React is Objectively Awesome

We can turn those "small", "isolated" pieces of code that we wrote before into reuseable snippets called

Components


<CodeSurfer notes="Now we dont have to repeat ourselves" code={require("!raw-loader!./snippets/componentnaive.js")} lang="javascript" steps={[ { lines: [1, 2], notes: "Going to create a Component called MessageComponent" }, { lines: [3, 4, 5, 6], notes: "Notice how we pass an object again?" }, { lines: [5, 12], notes: "We call this passing the data that is passed into components, Props" }, { lines: [11, 12, 13, 14], notes: "The best part" } ]}

/>


Lets do a thing that drives this concept home.

Now websites would be pretty boring without

Events


<CodeSurfer notes="Secret Facebook AD code" code={require("!raw-loader!./snippets/eventexample.js")} lang="javascript" steps={[ { lines: [1, 2, 3, 4], notes: "In our component, we have a function that makes us cash money" }, { lines: [1, 2, 3, 4, 8], notes: "When we click it, we get data, Senator" } ]} />

You already know what I am going to ask you.

So far, we've used React as a static rendering engine. Now, we're going to add

State

to make our React components more dynamic.


<CodeSurfer title="Understanding the counter" notes="Grokking time" code={require("!raw-loader!./snippets/state.js")} steps={[ { range: [1, 6], notes: "First, we name the component and set state" }, { range: [8, 13], notes: "Be mindful that state is just a variable that we manipulate as needed with events" }, { range: [14, 27], notes: "We can pass in state as a prop, and apply events to most elements" }, { lines: [17, 20], notes: "This is what makes this demo do things" }, { range: [1, 32], notes: "➡️" } ]} />


Cool thing to note

When a component's state changes, render is called with the new state and the UI is updated to the new output. This is the heart of React. We'll take a closer look later.


AAAAAAAAAAAAAAAAAAAAAAA

Fun Project Time

If we have time ofc


Thank You!

Happy Hacking :)

@ndneighbor