a react workshop · @joel__lord #prairiecode agenda 8:30-10:00 - intro, using react with vanilla...
TRANSCRIPT
![Page 1: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/1.jpg)
From Zero To AppA React Workshop
![Page 2: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/2.jpg)
@joel__lord #PrairieCode
React Workshop
▸ You will need the following tools▸ Git▸ Node JS▸ Webpack (npm install -g webpack)
▸ Create an API key for https://openweathermap.org ▸ Create a free account at https://auth0.com▸ Clone the repo for reference purposes
▸ https://github.com/joellord/react-zerotoapp-workshop▸ Slides: http://ezurl.to/react-workshop-slides
![Page 3: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/3.jpg)
@joel__lord #PrairieCode
O-What? An Intro To OAuth For Developers
About Me
➤ Author @ Udemy, Egghead
➤ Co-organizer @ NomadJS
➤ Developer Advocate @ Red Hat OpenShift
@joel__lord
joellord
![Page 4: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/4.jpg)
@joel__lord #PrairieCode
![Page 5: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/5.jpg)
@joel__lord #PrairieCode
Agenda
▸ 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack▸ 10:00-10:30 - Break▸ 10:30-12:00 - JSX, Components and React Router▸ 12:00-13:00 - Lunch▸ 13:00-14:30 - External Data Sources and Authentication▸ 14:30-15:00 - Break▸ 15:00-16:30 - Form manipulation
![Page 6: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/6.jpg)
@joel__lord #PrairieCode
]
DEAR DEMO GODS, PLEASE LET THIS WORK▸
![Page 7: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/7.jpg)
@joel__lord #PrairieCode
React Workshop
▸ You will need the following tools▸ Git▸ Node JS
▸ Create an API key for https://openweathermap.org ▸ Create a free account at https://auth0.com▸ Clone the repo for reference purposes
▸ https://github.com/joellord/react-zerotoapp-workshop▸ Slides: http://ezurl.to/react-workshop-slides
![Page 8: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/8.jpg)
@joel__lord #PrairieCode
![Page 9: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/9.jpg)
@joel__lord #PrairieCode
What is React
▸ Functional Programming▸ Renders content▸ Uses Virtual DOM to calculate the changes
![Page 10: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/10.jpg)
@joel__lord #PrairieCode
What is React
▸ React.createElement()▸ ReactDOM.render()
![Page 11: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/11.jpg)
Part 1Learning React
![Page 12: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/12.jpg)
@joel__lord #PrairieCode
Before the break
▸ npm install -g create-react-app▸ you might need to sudo this command
▸ create-react-app prairiecode▸ ^^^ run this in the root folder of the repo you cloned
earlier▸ this will install all the required tooling to build a React
application, might take a while
![Page 13: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/13.jpg)
Part 2Skeleton App And Router
![Page 14: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/14.jpg)
@joel__lord #PrairieCode
React Router
▸ Shows or hides different sections of your SPA based on the URL
▸ npm install --save react-router-dom
![Page 15: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/15.jpg)
Part 3Authentication and Data Store
![Page 16: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/16.jpg)
@joel__lord #PrairieCode
Authentication
▸ Missing stuff? Copy from /part7/end into your /src folder▸ Login to https://auth0.com▸ Create “Auth0 Application”▸ npm install --save auth0-js▸ npm install --save es6-event-emitter
![Page 17: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/17.jpg)
Part 4External Data Source and Form Manipulation
![Page 18: A React Workshop · @joel__lord #PrairieCode Agenda 8:30-10:00 - Intro, Using React with Vanilla JS, Webpack 10:00-10:30 - Break 10:30-12:00 - JSX, Components and React Router 12:00-13:00](https://reader035.vdocument.in/reader035/viewer/2022071012/5fcad915f66834427b726c08/html5/thumbnails/18.jpg)
@joel__lordjoellord
From Zero To App
Prairie.Code() - Des Moines, IASep, 2019
THANK YOU !https://ezurl.to/react-workshop-slides