├── .gitignore ├── LICENSE ├── README.md ├── m3-Learning-the-Fundamentals ├── 02-Using-Dom-Methods-to-Write-To-Browser │ ├── index.html │ └── index.js ├── 03-Replacing-DOM-Methods-With-React │ ├── index.html │ └── index.js ├── 04-Creating-a-React-Functional-Component │ ├── index.html │ └── index.js ├── 05-Passing-Props-to-a-Component │ ├── index.html │ └── index.js ├── 06-Converting-a-Functional-Component-to-Class-Component │ ├── index.html │ └── index.js ├── 08-Building-an-App-with-Nextjs-and-JSX │ ├── MyApp │ │ ├── package-lock.json │ │ ├── package.json │ │ └── pages │ │ │ └── index.js │ ├── index.html │ └── index.js ├── 09-Integrating-a-CSS-File-into-the-Nextjs-Project │ ├── MyApp │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ │ └── index.js │ │ └── src │ │ │ ├── DigitalClock.css │ │ │ └── DigitalClock.js │ ├── index.html │ └── index.js └── Notes.md ├── m4-Using-REST-Data-in-Server-side ├── 03-Coding-a-Server-and-Client-side-Rendering-Solution │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ └── index.js │ └── src │ │ ├── DigitalClock.css │ │ └── DigitalClock.js ├── 04-Taking-Nextjs-GetInitialProps-to-Async-by-promise │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ └── index.js │ └── src │ │ ├── DigitalClock.css │ │ └── DigitalClock.js ├── 05-Rendering-Async-REST-Data-Server-and-Client-side │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ └── index.js │ └── src │ │ ├── DigitalClock.css │ │ └── DigitalClock.js ├── 06-Learn-Client-side-Page-Routing-with-NextJS-Link-Element │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── index.js │ │ └── sessions.js │ └── src │ │ ├── DigitalClock.css │ │ └── DigitalClock.js └── Notes.md ├── m5-Extending-Your-Server-side-Rendered-App-to-Real-World ├── 02-Integrate-Bootstrap-4 │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ └── sessions.js │ ├── src │ │ ├── DigitalClock.css │ │ └── DigitalClock.js │ └── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ ├── Speaker-10803.jpg │ │ ├── Speaker-10808.jpg │ │ ├── Speaker-1124.jpg │ │ ├── Speaker-1269.jpg │ │ ├── Speaker-1530.jpg │ │ ├── Speaker-1725.jpg │ │ ├── Speaker-187.jpg │ │ ├── Speaker-18805.jpg │ │ ├── Speaker-2920.jpg │ │ ├── Speaker-39062.jpg │ │ ├── Speaker-41808.jpg │ │ ├── Speaker-5996.jpg │ │ ├── Speaker-6548.jpg │ │ ├── Speaker-823.jpg │ │ ├── Speaker-8367.jpg │ │ └── Speaker-8590.jpg ├── 03-Refactoring-Static-Bootstrap-to-React-Components │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ └── speakers.js │ ├── src │ │ ├── DigitalClock.css │ │ └── DigitalClock.js │ └── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ ├── Speaker-10803.jpg │ │ ├── Speaker-10808.jpg │ │ ├── Speaker-1124.jpg │ │ ├── Speaker-1269.jpg │ │ ├── Speaker-1530.jpg │ │ ├── Speaker-1725.jpg │ │ ├── Speaker-187.jpg │ │ ├── Speaker-18805.jpg │ │ ├── Speaker-2920.jpg │ │ ├── Speaker-39062.jpg │ │ ├── Speaker-41808.jpg │ │ ├── Speaker-5996.jpg │ │ ├── Speaker-6548.jpg │ │ ├── Speaker-823.jpg │ │ ├── Speaker-8367.jpg │ │ └── Speaker-8590.jpg ├── 04-Add-a-Layout-Page-with-the-Nextjs-app-file │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ └── speakers.js │ ├── src │ │ ├── DigitalClock.css │ │ ├── DigitalClock.js │ │ └── Layout.js │ ├── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ │ ├── Speaker-10803.jpg │ │ │ ├── Speaker-10808.jpg │ │ │ ├── Speaker-1124.jpg │ │ │ ├── Speaker-1269.jpg │ │ │ ├── Speaker-1530.jpg │ │ │ ├── Speaker-1725.jpg │ │ │ ├── Speaker-187.jpg │ │ │ ├── Speaker-18805.jpg │ │ │ ├── Speaker-2920.jpg │ │ │ ├── Speaker-39062.jpg │ │ │ ├── Speaker-41808.jpg │ │ │ ├── Speaker-5996.jpg │ │ │ ├── Speaker-6548.jpg │ │ │ ├── Speaker-823.jpg │ │ │ ├── Speaker-8367.jpg │ │ │ └── Speaker-8590.jpg │ └── yarn.lock ├── 05-More-Detailed-Refactoring-Bootstrap-Cards │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ └── speakers.js │ ├── src │ │ ├── DigitalClock.css │ │ ├── DigitalClock.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── Layout.js │ │ ├── Menu.js │ │ ├── SessionCard.js │ │ └── SpeakerCard.js │ ├── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ │ ├── Speaker-10803.jpg │ │ │ ├── Speaker-10808.jpg │ │ │ ├── Speaker-1124.jpg │ │ │ ├── Speaker-1269.jpg │ │ │ ├── Speaker-1530.jpg │ │ │ ├── Speaker-1725.jpg │ │ │ ├── Speaker-187.jpg │ │ │ ├── Speaker-18805.jpg │ │ │ ├── Speaker-2920.jpg │ │ │ ├── Speaker-39062.jpg │ │ │ ├── Speaker-41808.jpg │ │ │ ├── Speaker-5996.jpg │ │ │ ├── Speaker-6548.jpg │ │ │ ├── Speaker-823.jpg │ │ │ ├── Speaker-8367.jpg │ │ │ └── Speaker-8590.jpg │ └── yarn.lock ├── 06-Adding-a-Speaker-Detail-Page-That-Works-Client-side-Only │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ ├── speaker.js │ │ └── speakers.js │ ├── src │ │ ├── DigitalClock.css │ │ ├── DigitalClock.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── Layout.js │ │ ├── Menu.js │ │ ├── SessionCard.js │ │ └── SpeakerCard.js │ ├── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ │ ├── Speaker-10803.jpg │ │ │ ├── Speaker-10808.jpg │ │ │ ├── Speaker-1124.jpg │ │ │ ├── Speaker-1269.jpg │ │ │ ├── Speaker-1530.jpg │ │ │ ├── Speaker-1725.jpg │ │ │ ├── Speaker-187.jpg │ │ │ ├── Speaker-18805.jpg │ │ │ ├── Speaker-2920.jpg │ │ │ ├── Speaker-39062.jpg │ │ │ ├── Speaker-41808.jpg │ │ │ ├── Speaker-5996.jpg │ │ │ ├── Speaker-6548.jpg │ │ │ ├── Speaker-823.jpg │ │ │ ├── Speaker-8367.jpg │ │ │ └── Speaker-8590.jpg │ └── yarn.lock ├── 07-Server-side-Rendering-Landing-Page-with-Query-Params │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ ├── speaker.js │ │ └── speakers.js │ ├── server.js │ ├── src │ │ ├── DigitalClock.css │ │ ├── DigitalClock.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── Layout.js │ │ ├── Menu.js │ │ ├── SessionCard.js │ │ └── SpeakerCard.js │ ├── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ │ ├── Speaker-10803.jpg │ │ │ ├── Speaker-10808.jpg │ │ │ ├── Speaker-1124.jpg │ │ │ ├── Speaker-1269.jpg │ │ │ ├── Speaker-1530.jpg │ │ │ ├── Speaker-1725.jpg │ │ │ ├── Speaker-187.jpg │ │ │ ├── Speaker-18805.jpg │ │ │ ├── Speaker-2920.jpg │ │ │ ├── Speaker-39062.jpg │ │ │ ├── Speaker-41808.jpg │ │ │ ├── Speaker-5996.jpg │ │ │ ├── Speaker-6548.jpg │ │ │ ├── Speaker-823.jpg │ │ │ ├── Speaker-8367.jpg │ │ │ └── Speaker-8590.jpg │ └── yarn.lock └── Notes.md ├── m6-Deploying-to-Node-Server ├── 02-Setting-up-and-Using-Environmental-Variables │ ├── .env │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ ├── speaker.js │ │ └── speakers.js │ ├── server.js │ ├── src │ │ ├── DigitalClock.css │ │ ├── DigitalClock.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── Layout.js │ │ ├── Menu.js │ │ ├── SessionCard.js │ │ └── SpeakerCard.js │ ├── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ │ ├── Speaker-10803.jpg │ │ │ ├── Speaker-10808.jpg │ │ │ ├── Speaker-1124.jpg │ │ │ ├── Speaker-1269.jpg │ │ │ ├── Speaker-1530.jpg │ │ │ ├── Speaker-1725.jpg │ │ │ ├── Speaker-187.jpg │ │ │ ├── Speaker-18805.jpg │ │ │ ├── Speaker-2920.jpg │ │ │ ├── Speaker-39062.jpg │ │ │ ├── Speaker-41808.jpg │ │ │ ├── Speaker-5996.jpg │ │ │ ├── Speaker-6548.jpg │ │ │ ├── Speaker-823.jpg │ │ │ ├── Speaker-8367.jpg │ │ │ └── Speaker-8590.jpg │ └── yarn.lock ├── 03-Configuring-Default-Environmental-Variables │ ├── .env │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ ├── speaker.js │ │ └── speakers.js │ ├── server.js │ ├── src │ │ ├── DigitalClock.css │ │ ├── DigitalClock.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── Layout.js │ │ ├── Menu.js │ │ ├── SessionCard.js │ │ └── SpeakerCard.js │ ├── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ │ ├── Speaker-10803.jpg │ │ │ ├── Speaker-10808.jpg │ │ │ ├── Speaker-1124.jpg │ │ │ ├── Speaker-1269.jpg │ │ │ ├── Speaker-1530.jpg │ │ │ ├── Speaker-1725.jpg │ │ │ ├── Speaker-187.jpg │ │ │ ├── Speaker-18805.jpg │ │ │ ├── Speaker-2920.jpg │ │ │ ├── Speaker-39062.jpg │ │ │ ├── Speaker-41808.jpg │ │ │ ├── Speaker-5996.jpg │ │ │ ├── Speaker-6548.jpg │ │ │ ├── Speaker-823.jpg │ │ │ ├── Speaker-8367.jpg │ │ │ └── Speaker-8590.jpg │ └── yarn.lock ├── 05-Create-a-Docker-Image-and-Container │ ├── .env │ ├── Dockerfile │ ├── css │ │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _documents.js │ │ ├── bootstrap.js │ │ ├── index.js │ │ ├── sessions.js │ │ ├── speaker.js │ │ └── speakers.js │ ├── server.js │ ├── src │ │ ├── DigitalClock.css │ │ ├── DigitalClock.js │ │ ├── Footer.js │ │ ├── Header.js │ │ ├── Layout.js │ │ ├── Menu.js │ │ ├── SessionCard.js │ │ └── SpeakerCard.js │ └── static │ │ ├── SVCClogo.png │ │ └── speakers │ │ ├── Speaker-10803.jpg │ │ ├── Speaker-10808.jpg │ │ ├── Speaker-1124.jpg │ │ ├── Speaker-1269.jpg │ │ ├── Speaker-1530.jpg │ │ ├── Speaker-1725.jpg │ │ ├── Speaker-187.jpg │ │ ├── Speaker-18805.jpg │ │ ├── Speaker-2920.jpg │ │ ├── Speaker-39062.jpg │ │ ├── Speaker-41808.jpg │ │ ├── Speaker-5996.jpg │ │ ├── Speaker-6548.jpg │ │ ├── Speaker-823.jpg │ │ ├── Speaker-8367.jpg │ │ └── Speaker-8590.jpg ├── Notes.md └── _experimental │ ├── .dockerignore │ ├── .env │ ├── .env.txt │ ├── Dockerfile │ ├── aws.txt │ ├── css │ ├── bootstrap.min.css │ └── site.css │ ├── db.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ ├── _app.js │ ├── _document.js │ ├── bootstrap.js │ ├── index.js │ ├── sessions.js │ ├── speaker.js │ └── speakers.js │ ├── server.js │ ├── src │ ├── Footer.js │ ├── Header.js │ ├── Layout.js │ ├── Menu.js │ ├── sessionCard.js │ ├── sessiondata.js │ └── speakerCard.js │ ├── static-site.html │ └── static │ ├── SVCClogo.png │ ├── site.css │ └── speakers │ ├── Speaker-10803.jpg │ ├── Speaker-10808.jpg │ ├── Speaker-1124.jpg │ ├── Speaker-1269.jpg │ ├── Speaker-1530.jpg │ ├── Speaker-1725.jpg │ ├── Speaker-187.jpg │ ├── Speaker-18805.jpg │ ├── Speaker-2920.jpg │ ├── Speaker-39062.jpg │ ├── Speaker-41808.jpg │ ├── Speaker-5996.jpg │ ├── Speaker-6548.jpg │ ├── Speaker-823.jpg │ ├── Speaker-8367.jpg │ └── Speaker-8590.jpg └── m7-Ensuring-Your-App-Performs ├── 02-Better-Image-Handling-with-next-images ├── .dockerignore ├── .env ├── Dockerfile ├── css │ ├── bootstrap.min.css │ └── site.css ├── db.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ ├── bootstrap.js │ ├── index.js │ ├── sessions.js │ ├── speaker.js │ └── speakers.js ├── server.js ├── src │ ├── Footer.js │ ├── Header.js │ ├── Layout.js │ ├── Menu.js │ ├── sessionCard.js │ └── speakerCard.js ├── static-site.html └── static │ ├── SVCClogo.png │ ├── site.css │ └── speakers │ ├── Speaker-10803.jpg │ ├── Speaker-10808.jpg │ ├── Speaker-1124.jpg │ ├── Speaker-1269.jpg │ ├── Speaker-1530.jpg │ ├── Speaker-1725.jpg │ ├── Speaker-187.jpg │ ├── Speaker-18805.jpg │ ├── Speaker-2920.jpg │ ├── Speaker-39062.jpg │ ├── Speaker-41808.jpg │ ├── Speaker-5996.jpg │ ├── Speaker-6548.jpg │ ├── Speaker-823.jpg │ ├── Speaker-8367.jpg │ └── Speaker-8590.jpg ├── 03-Adding-Page-Caching-to-the-Node-Express-Server ├── .dockerignore ├── .env ├── Dockerfile ├── css │ ├── bootstrap.min.css │ └── site.css ├── db.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ ├── bootstrap.js │ ├── index.js │ ├── sessions.js │ ├── speaker.js │ └── speakers.js ├── server.js ├── src │ ├── Footer.js │ ├── Header.js │ ├── Layout.js │ ├── Menu.js │ ├── sessionCard.js │ └── speakerCard.js ├── static-site.html └── static │ ├── SVCClogo.png │ ├── site.css │ └── speakers │ ├── Speaker-10803.jpg │ ├── Speaker-10808.jpg │ ├── Speaker-1124.jpg │ ├── Speaker-1269.jpg │ ├── Speaker-1530.jpg │ ├── Speaker-1725.jpg │ ├── Speaker-187.jpg │ ├── Speaker-18805.jpg │ ├── Speaker-2920.jpg │ ├── Speaker-39062.jpg │ ├── Speaker-41808.jpg │ ├── Speaker-5996.jpg │ ├── Speaker-6548.jpg │ ├── Speaker-823.jpg │ ├── Speaker-8367.jpg │ └── Speaker-8590.jpg ├── 04-Using-a-CDN-for-JavaScript-CSS-Images ├── .dockerignore ├── .env ├── Dockerfile ├── css │ ├── bootstrap.min.css │ └── site.css ├── db.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ ├── bootstrap.js │ ├── index.js │ ├── sessions.js │ ├── speaker.js │ └── speakers.js ├── server.js ├── src │ ├── Footer.js │ ├── Header.js │ ├── Layout.js │ ├── Menu.js │ ├── sessionCard.js │ └── speakerCard.js ├── static-site.html └── static │ ├── SVCClogo.png │ ├── site.css │ └── speakers │ ├── Speaker-10803.jpg │ ├── Speaker-10808.jpg │ ├── Speaker-1124.jpg │ ├── Speaker-1269.jpg │ ├── Speaker-1530.jpg │ ├── Speaker-1725.jpg │ ├── Speaker-187.jpg │ ├── Speaker-18805.jpg │ ├── Speaker-2920.jpg │ ├── Speaker-39062.jpg │ ├── Speaker-41808.jpg │ ├── Speaker-5996.jpg │ ├── Speaker-6548.jpg │ ├── Speaker-823.jpg │ ├── Speaker-8367.jpg │ └── Speaker-8590.jpg ├── 05-Using-Placeholder-images-While-Waiting-for-Data ├── .dockerignore ├── .env ├── Dockerfile ├── css │ ├── bootstrap.min.css │ └── site.css ├── db.json ├── next.config.js ├── package-lock.json ├── package.json ├── pages │ ├── _app.js │ ├── _document.js │ ├── bootstrap.js │ ├── index.js │ ├── sessions.js │ ├── speaker.js │ └── speakers.js ├── server.js ├── src │ ├── Footer.js │ ├── Header.js │ ├── Layout.js │ ├── Menu.js │ ├── sessionCard.js │ └── speakerCard.js ├── static-site.html └── static │ ├── SVCClogo.png │ ├── site.css │ └── speakers │ ├── Speaker-10803.jpg │ ├── Speaker-10808.jpg │ ├── Speaker-1124.jpg │ ├── Speaker-1269.jpg │ ├── Speaker-1530.jpg │ ├── Speaker-1725.jpg │ ├── Speaker-187.jpg │ ├── Speaker-18805.jpg │ ├── Speaker-2920.jpg │ ├── Speaker-39062.jpg │ ├── Speaker-41808.jpg │ ├── Speaker-5996.jpg │ ├── Speaker-6548.jpg │ ├── Speaker-823.jpg │ ├── Speaker-8367.jpg │ └── Speaker-8590.jpg ├── Notes.md └── _experimental ├── .dockerignore ├── .env ├── .env.txt ├── Dockerfile ├── aws.txt ├── css ├── bootstrap.min.css └── site.css ├── db.json ├── favicon.ico ├── next.config.js ├── now.json.XXX ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── bootstrap.js ├── index.js ├── sessions.js ├── speaker.js └── speakers.js ├── server.js ├── src ├── Footer.js ├── Header.js ├── Layout.js ├── Menu.js ├── sessionCard.js ├── sessiondata.js └── speakerCard.js ├── static-site.html └── static ├── SVCClogo.png ├── site.css └── speakers ├── Speaker-10803.jpg ├── Speaker-10808.jpg ├── Speaker-1124.jpg ├── Speaker-1269.jpg ├── Speaker-1530.jpg ├── Speaker-1725.jpg ├── Speaker-187.jpg ├── Speaker-18805.jpg ├── Speaker-2920.jpg ├── Speaker-39062.jpg ├── Speaker-41808.jpg ├── Speaker-5996.jpg ├── Speaker-6548.jpg ├── Speaker-823.jpg ├── Speaker-8367.jpg └── Speaker-8590.jpg /m3-Learning-the-Fundamentals/02-Using-Dom-Methods-to-Write-To-Browser/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/02-Using-Dom-Methods-to-Write-To-Browser/index.js: -------------------------------------------------------------------------------- 1 | const rootElement = document.getElementById('app'); 2 | 3 | const myElement = document.createElement('h1'); 4 | myElement.className = "orange"; 5 | myElement.innerText = 'Hello From Pluralsight'; 6 | 7 | rootElement.appendChild(myElement); -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/03-Replacing-DOM-Methods-With-React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/03-Replacing-DOM-Methods-With-React/index.js: -------------------------------------------------------------------------------- 1 | //const rootElement = document.getElementById('app'); 2 | 3 | // const myElement = document.createElement('h1'); 4 | // myElement.className = "orange"; 5 | // myElement.innerText = 'Hello From Pluralsight'; 6 | 7 | 8 | const myReactElement = React.createElement('h1', 9 | {className: 'orange'}, 10 | 'Hello From Pluralsight and React'); 11 | 12 | ReactDOM.render( 13 | myReactElement, 14 | document.getElementById('app') 15 | ); -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/04-Creating-a-React-Functional-Component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/04-Creating-a-React-Functional-Component/index.js: -------------------------------------------------------------------------------- 1 | // const myReactElement = React.createElement('h1', 2 | // {className: 'orange'}, 3 | // 'Hello From Pluralsight and React'); 4 | 5 | const myReactElement = React.createElement('h1', 6 | {className: 'orange'}, 7 | 'Hello From Pluralsight and React'); 8 | 9 | ReactDOM.render( 10 | myReactElement, 11 | document.getElementById('app') 12 | ); -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/05-Passing-Props-to-a-Component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/05-Passing-Props-to-a-Component/index.js: -------------------------------------------------------------------------------- 1 | // const myReactElement = React.createElement('h1', 2 | // {className: 'orange'}, 3 | // 'Hello From Pluralsight and React'); 4 | 5 | const Hello = (props) => { 6 | return React.createElement('h1', 7 | {className: 'orange'}, 8 | 'Hello From Pluralsight and React ' + props.time); 9 | }; 10 | 11 | ReactDOM.render( 12 | React.createElement(Hello, {time: new Date().toLocaleTimeString()}, null), 13 | document.getElementById('app') 14 | ); -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/06-Converting-a-Functional-Component-to-Class-Component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/08-Building-an-App-with-Nextjs-and-JSX/MyApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "next": "^7.0.2", 17 | "react": "^16.6.3", 18 | "react-dom": "^16.6.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/08-Building-an-App-with-Nextjs-and-JSX/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/09-Integrating-a-CSS-File-into-the-Nextjs-Project/MyApp/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/09-Integrating-a-CSS-File-into-the-Nextjs-Project/MyApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@zeit/next-css": "^1.0.1", 17 | "next": "^7.0.2", 18 | "react": "^16.6.3", 19 | "react-dom": "^16.6.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/09-Integrating-a-CSS-File-into-the-Nextjs-Project/MyApp/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/09-Integrating-a-CSS-File-into-the-Nextjs-Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /m3-Learning-the-Fundamentals/Notes.md: -------------------------------------------------------------------------------- 1 | # Course: Building Server-side Rendered React Apps for Beginners 2 | ## Module 3: Learning the Fundamentals of Building Server-side Rendered Apps 3 | ### Author: Peter Kellner 4 | 5 | https://app.pluralsight.com/profile/author/peter-kellner 6 | 7 | [![Course Preview](https://img.youtube.com/vi/rJSXRGegxFw/0.jpg)](https://www.youtube.com/watch?v=rJSXRGegxFw) 8 | 9 | *Note: If a clip is missing it means that there was no source presented in that clip* 10 | -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/03-Coding-a-Server-and-Client-side-Rendering-Solution/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/03-Coding-a-Server-and-Client-side-Rendering-Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@zeit/next-css": "^1.0.1", 17 | "next": "^7.0.2", 18 | "react": "^16.6.3", 19 | "react-dom": "^16.6.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/03-Coding-a-Server-and-Client-side-Rendering-Solution/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/04-Taking-Nextjs-GetInitialProps-to-Async-by-promise/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/04-Taking-Nextjs-GetInitialProps-to-Async-by-promise/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@zeit/next-css": "^1.0.1", 17 | "next": "^7.0.2", 18 | "react": "^16.6.3", 19 | "react-dom": "^16.6.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/04-Taking-Nextjs-GetInitialProps-to-Async-by-promise/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/05-Rendering-Async-REST-Data-Server-and-Client-side/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/05-Rendering-Async-REST-Data-Server-and-Client-side/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start", 11 | "json-server": "json-server --watch db.json --port 4000 --delay 200" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "@zeit/next-css": "^1.0.1", 18 | "axios": "^0.18.0", 19 | "next": "^7.0.2", 20 | "react": "^16.6.3", 21 | "react-dom": "^16.6.3" 22 | }, 23 | "devDependencies": { 24 | "json-server": "^0.14.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/05-Rendering-Async-REST-Data-Server-and-Client-side/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/06-Learn-Client-side-Page-Routing-with-NextJS-Link-Element/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/06-Learn-Client-side-Page-Routing-with-NextJS-Link-Element/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start", 11 | "json-server": "json-server --watch db.json --port 4000 --delay 200" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "@zeit/next-css": "^1.0.1", 18 | "axios": "^0.18.0", 19 | "next": "^7.0.2", 20 | "react": "^16.6.3", 21 | "react-dom": "^16.6.3" 22 | }, 23 | "devDependencies": { 24 | "json-server": "^0.14.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/06-Learn-Client-side-Page-Routing-with-NextJS-Link-Element/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m4-Using-REST-Data-in-Server-side/Notes.md: -------------------------------------------------------------------------------- 1 | # Course: Building Server-side Rendered React Apps for Beginners 2 | ## Module 4: Using REST Data in Server-side Rendering and getInitialProps 3 | ### Author: Peter Kellner 4 | 5 | https://app.pluralsight.com/profile/author/peter-kellner 6 | 7 | [![Course Preview](https://img.youtube.com/vi/rJSXRGegxFw/0.jpg)](https://www.youtube.com/watch?v=rJSXRGegxFw) 8 | 9 | *Note: If a clip is missing it means that there was no source presented in that clip* 10 | -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/css/site.css: -------------------------------------------------------------------------------- 1 | .large { 2 | padding: 50px 3 | } 4 | .cardwidth { 5 | width: 20rem; 6 | } 7 | .margintopbottom { 8 | margin-top: 20px; 9 | margin-bottom: 20px; 10 | } 11 | .margintopbottom10 { 12 | margin-top: 10px; 13 | margin-bottom: 10px; 14 | } 15 | .cardmin { 16 | min-width: 300px; 17 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start", 11 | "json-server": "json-server --watch db.json --port 4000 --delay 200" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "@zeit/next-css": "^1.0.1", 18 | "axios": "^0.18.0", 19 | "bootstrap": "^4.1.3", 20 | "next": "^7.0.2", 21 | "react": "^16.6.3", 22 | "react-dom": "^16.6.3" 23 | }, 24 | "devDependencies": { 25 | "json-server": "^0.14.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/pages/_documents.js: -------------------------------------------------------------------------------- 1 | /* 2 | In production the stylesheet is compiled to .next/static/style.css and served from /_next/static/style.css 3 | 4 | You have to include it into the page using either next/head or a custom _document.js, as is being done in this file. 5 | */ 6 | 7 | import Document, {Head, Main, NextScript} from 'next/document' 8 | 9 | export default class MyDocument extends Document { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | ) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/SVCClogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/SVCClogo.png -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-10803.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-10803.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-10808.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-10808.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1124.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1124.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1269.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1269.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1530.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1530.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1725.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-1725.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-187.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-187.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-18805.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-18805.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-2920.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-2920.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-39062.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-39062.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-41808.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-41808.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-5996.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-5996.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-6548.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-6548.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-823.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-823.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-8367.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-8367.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-8590.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/02-Integrate-Bootstrap-4/static/speakers/Speaker-8590.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/css/site.css: -------------------------------------------------------------------------------- 1 | .large { 2 | padding: 50px 3 | } 4 | .cardwidth { 5 | width: 20rem; 6 | } 7 | .margintopbottom { 8 | margin-top: 20px; 9 | margin-bottom: 20px; 10 | } 11 | .margintopbottom10 { 12 | margin-top: 10px; 13 | margin-bottom: 10px; 14 | } 15 | .cardmin { 16 | min-width: 300px; 17 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/SVCClogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/SVCClogo.png -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-10803.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-10803.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-10808.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-10808.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1124.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1124.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1269.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1269.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1530.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1530.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1725.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-1725.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-187.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-187.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-18805.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-18805.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-2920.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-2920.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-39062.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-39062.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-41808.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-41808.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-5996.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-5996.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-6548.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-6548.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-823.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-823.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-8367.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-8367.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-8590.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/03-Refactoring-Static-Bootstrap-to-React-Components/static/speakers/Speaker-8590.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/css/site.css: -------------------------------------------------------------------------------- 1 | .large { 2 | padding: 50px 3 | } 4 | .cardwidth { 5 | width: 20rem; 6 | } 7 | .margintopbottom { 8 | margin-top: 20px; 9 | margin-bottom: 20px; 10 | } 11 | .margintopbottom10 { 12 | margin-top: 10px; 13 | margin-bottom: 10px; 14 | } 15 | .cardmin { 16 | min-width: 300px; 17 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start", 11 | "json-server": "json-server --watch db.json --port 4000 --delay 200" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "@zeit/next-css": "^1.0.1", 18 | "axios": "^0.18.0", 19 | "bootstrap": "^4.1.3", 20 | "next": "^7.0.2", 21 | "react": "^16.6.3", 22 | "react-dom": "^16.6.3" 23 | }, 24 | "devDependencies": { 25 | "json-server": "^0.14.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App, {Container} from 'next/app'; 3 | import {Layout} from "../src/Layout"; 4 | 5 | export default class MyApp extends App { 6 | render() { 7 | const {Component, pageProps} = this.props 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/src/Layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import '../css/site.css'; 5 | 6 | export class Layout extends React.Component { 7 | render() { 8 | const {children} = this.props 9 | 10 | return ( 11 | 12 | {children} 13 | 14 | ); 15 | } 16 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/SVCClogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/SVCClogo.png -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-10803.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-10803.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-10808.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-10808.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1124.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1124.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1269.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1269.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1530.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1530.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1725.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-1725.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-187.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-187.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-18805.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-18805.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-2920.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-2920.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-39062.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-39062.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-41808.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-41808.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-5996.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-5996.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-6548.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-6548.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-823.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-823.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-8367.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-8367.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-8590.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkellner/pluralsight-course-server-side-rendered-react-nextjs/5f1b9659043363b193013c536e184f6cd1850a87/m5-Extending-Your-Server-side-Rendered-App-to-Real-World/04-Add-a-Layout-Page-with-the-Nextjs-app-file/static/speakers/Speaker-8590.jpg -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/05-More-Detailed-Refactoring-Bootstrap-Cards/css/site.css: -------------------------------------------------------------------------------- 1 | .large { 2 | padding: 50px 3 | } 4 | .cardwidth { 5 | width: 20rem; 6 | } 7 | .margintopbottom { 8 | margin-top: 20px; 9 | margin-bottom: 20px; 10 | } 11 | .margintopbottom10 { 12 | margin-top: 10px; 13 | margin-bottom: 10px; 14 | } 15 | .cardmin { 16 | min-width: 300px; 17 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/05-More-Detailed-Refactoring-Bootstrap-Cards/next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require("@zeit/next-css"); 2 | module.exports = withCSS(); -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/05-More-Detailed-Refactoring-Bootstrap-Cards/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MyApp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start", 11 | "json-server": "json-server --watch db.json --port 4000 --delay 200" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "@zeit/next-css": "^1.0.1", 18 | "axios": "^0.18.0", 19 | "bootstrap": "^4.1.3", 20 | "next": "^7.0.2", 21 | "react": "^16.6.3", 22 | "react-dom": "^16.6.3" 23 | }, 24 | "devDependencies": { 25 | "json-server": "^0.14.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/05-More-Detailed-Refactoring-Bootstrap-Cards/pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App, {Container} from 'next/app'; 3 | import {Layout} from "../src/Layout"; 4 | 5 | export default class MyApp extends App { 6 | render() { 7 | const {Component, pageProps} = this.props 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/05-More-Detailed-Refactoring-Bootstrap-Cards/src/DigitalClock.css: -------------------------------------------------------------------------------- 1 | /*body {*/ 2 | /*background: black;*/ 3 | /*}*/ 4 | 5 | body { 6 | background: linear-gradient(45deg, #1870ed 0, #f18f88 100%); 7 | font-family: 'Montserrat', 'sans-serif'; 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .clock { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translateX(-50%) translateY(-50%); 19 | color: #17D4FE; 20 | font-size: 60px; 21 | font-family: Orbitron; 22 | letter-spacing: 7px; 23 | 24 | 25 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/05-More-Detailed-Refactoring-Bootstrap-Cards/src/Footer.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | 3 | export class Footer extends Component { 4 | render() { 5 | return
6 | Silicon Valley Code Camp 2018 is Hosted by PayPal in San Jose 7 | at their Town Hall location. 2121 North First Street. October 13-14 2018 8 |
; 9 | } 10 | } -------------------------------------------------------------------------------- /m5-Extending-Your-Server-side-Rendered-App-to-Real-World/05-More-Detailed-Refactoring-Bootstrap-Cards/src/Layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import '../css/site.css'; 5 | import {Menu} from "./Menu"; 6 | import {Footer} from "./Footer"; 7 | import {Header} from "./Header"; 8 | 9 | export class Layout extends React.Component { 10 | render() { 11 | const {children} = this.props 12 | 13 | return ( 14 | 15 |
16 | 17 | {children} 18 |