Read: Class 27 - 401-advanced-javascript-dania/amman-javascript-401d1 GitHub Wiki

  1. React Testing Snapshots - Make assertions on the exact rendered markup (with content) at any state of the application. Render Testing - Similar to snapshots, but allows for jQuery-like inspection of the virtual DOM tree Shallow Testing - Executes and renders the called/container component, but does not compose children. Mounting - Executes the full component and children. Allows for inspection of rendered Virtual DOM as well as the current state Using a combination of approaches, you can easily “use” your application and ensure that things are changing both visually and physically (elements and state) as you expect.

  2. Deployment React in development mode uses a node service to create a live website that refreshes as you write code. This is NOT what actually gets deployed when you want your React website to go live. React, remember is an index.html file that uses Javascript to render components in the browser. The node server is only there to aid in your development.

npm run build

This command, executed from the root folder of your React application will output a “static website” containing no more than the index.html, .js and .css files required to open your app. Nearly the same files as you would have deployed in Code 201, but with much better code!

  • Deploying to GitHub Pages
  1. Enable GitHub Pages on your domain, using the gh-pages branch
  2. Create a Personal Access Token in your GitHub account
  3. Add this token as a “Secret” called PERSONAL_TOKEN in the repository housing your react app
  4. Add the react workflow .yml file to your repository (in .github/workflows)

This will initiate a GitHub Action whenever you push (or merge) code into your repository. This action will run the build command for you, create a new branch called gh-pages and deploy your React static files to that branch, which you can then view at the Github Pages link provided to you