/react-js-class

Building and Deploying a ReactJS Web App with React-Bootstrap and AWS Amplify

Environment Setup

  • Visual Studio Download: https://code.visualstudio.com
    • Cost: free
    • Useage: editing the code
  • GitHub Account Creation: https://github.com/join
    • Cost: free for public repositories + private repositories with under 5 collaborators
    • Useage: storing the code and collaboration
  • AWS Account Creation: https://portal.aws.amazon.com/billing/signup#/start
    • Cost: hosting is free for 12 months (with limits that we will not hit), buying a domain will cost $12 a year (standard rate)
    • Hosting, Authentication, API endpoints, and Database

GitHub commands from the second video

git status
git pull
git checkout -b new-branch
git status
git add .
git commit -m "first commit"
git push origin new-branch

Hello World App - Your First React App

npx create-react-app hello-world-app
  • App walkthrough
  • Making it say "Hello, World!"
  • Functions / Classes
  • Importing components

Challenges

  • Write a new the AppCustom.js file from scratch + have your index.js file serve that instead of App.js
    • HINT: don't forget to import your new AppCustom.js file
    • Repetition is key...don't be lazy on these!
  • Make a new class in the App.css file and use it in the App.js component
    • HINT: look at the className in the div tag
  • Add a new component called AboutMe with your name and some information about you + use it in your AppCustom.js
    • HINT: this is the same flow as our HelloWord component
    • BONUS: use new HTML tags other than header and list to get a better feel for them

Final code: https://github.com/tdiderich/react-js-class/tree/hello-world-app

Stock Data App - Deeper Into React

Final code: https://github.com/tdiderich/react-js-class/tree/stock-data-app

Startup Landing Page - Making it Look Good

  • Create new startup-landing-page app: npx create-react-app startup-landing-page
  • Add React-Bootstrap
  • Custom theme
  • Custom Fonts
    • Google fonts: https://fonts.google.com/
    • Add selected fonts to your app with this import in the App.css: @import url('https://fonts.googleapis.com/css?family=Josefin+Slab|Montserrat|Permanent+Marker|Raleway|Roboto|Oxygen&display=swap');
    • Add styling by creating a class or inline with style={}
  • Font Awesome Icons
    • Options: https://fontawesome.com/v4.7.0/icons/
    • Install with npm install --save font-awesome
    • Add to index.js import 'font-awesome/css/font-awesome.min.css';
    • Add to a page with something like this <i class="fa fa-home" aria-hidden="true"></i>
  • Landing Page Jumbotron w/ Image
    • Import Jumbotron
    • Download image from unsplash: https://unsplash.com/
    • Create css class to fill the entire page
  • Landing Page Challenge
    • Add a new icon + custom font to your Jumbotron
  • About Us Section w/ a Accordion
    • Import Accordion
    • Add sections about the company
  • About Us Challenge
    • Turn your accordion into a JSON object with title and body values + use a .map function to dsiplay them all
  • Product Section w/ Layout + Cards
    • Learn to use the layout
    • Import the Cards components to create
  • Product Section Challenge
    • Create a layout where the cards are always in a single row no matter the screen size
    • Create a layout where the cards are in single row along the right side of the screen
  • Subscribe Section w/ Form to Subscribe
    • Import Formik npm install formik --save + Yup npm install -S yup
    • Create email validation + Submit button to Subscribe the user
  • Subscribe Section Challenge
    • Make the form centered / take over the whole page like the other sections
    • Add an Alert when the user has subscribed
      • HINT: you will need to create state for this
    • Add conditional formatting to only show the subscription form when the user hasn't subscribed yet

Final code: https://github.com/tdiderich/react-js-class/tree/startup-landing-page

Workout Generator App - Bringing It All Together

  • Setup your app
    • Create new app: npx create-react-app workout-generator-app
    • Install bootstrap: npm install react-bootstrap bootstrap --save
    • Add bootstrap to to by adding this to your index.js: import 'bootstrap/dist/css/bootstrap.min.css';
    • OPTIONAL: pick new theme and update: bootstrap/dist/css/bootstrap.min.css
    • Import Formik npm install formik --save + Yup npm install -S yup
  • Add routing
    • Install react-router: npm install react-router --save
    • Install react-router-dom: npm install react-router-dom --save
    • Update index.js + App.js for routing
  • Landing page
    • Jumbotron w/ background image
    • Buttons to About Us + Workout Generator
  • About Us Page
    • Jumbotron w/ background image
    • About Us Section
  • Workout Generator Page
    • Jumbotron w/ background image
    • Form to get time for workout
    • Write function to generate workout
    • Display the workout after the form is submitted
  • Deploying with AWS Amplify

Final code: https://github.com/tdiderich/react-js-class/tree/workout-generator-app