import { CodeSurfer } from "mdx-deck-code-surfer" import { Appear } from 'mdx-deck' import { Head } from 'mdx-deck' import Counter from './snippets/Counter'
Now with added jokes.
github.com/fiuacm/react-workshop
Failed standup comedian, father
product manager @ Citrix
<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" />
Then this thing called JavaScript came around.
- 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
- everything
Okay- now to the good stuff.
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.
- 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" } ]} />
Hello World
- 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
<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.
We can turn those "small", "isolated" pieces of code that we wrote before into reuseable snippets called
<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
<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
<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: "➡️" } ]} />
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