Skip to content

React

Jump to bottom
Rhett Lowe edited this page Apr 22, 2020 · 4 revisions

React is a component-based, frontend javascript framework. Since we have all worked with it, I'm not going to elaborate greatly on what it is and why it is. I'll add some tools and paradigms here that will better help with it.

Create React App

Create react app is the easiest way, recommended by React, to jump straight to publishing a react website. Since it is so commonly used, a lot of other people have based their applications and plugins on it.

Read More here

React Router

React router is a wrapper for window.location and window.history. It catches Links and it changes the page content so the browser doesn't do it for you. We will use React Router Web.

Read more here

Deploying to S3

A deploy step is important, not because it delivers the content to its final location, but because it's a regimented way of deploying. Manually copying files is a valid way to deploy, but it is very easy to miscopy 1 file or have some dropped packages. Using AWS CLI to do the transfer, you don't need to worry about folder structure (as it names according to directory to simulate folders) and each file is hashed, transferred with hash id, and compared on receipt. More importantly, each member of the team has the same deploy process.

Try adding this to your package.json

{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "aws s3 sync build/ s3://tech-notice-board.education.uci.edu --acl public-read",
  }
}

The deploy script asks the AWS CLI to copy all files and keep public read policy. You can't deploy something that isn't built. Since running a script looks for a prescript to run, predeploy will run whatever is in the build script (also a prebuild and so on...) which preprocesses the files and readies for deployment before deploy sends to S3

Further Reading

  • Basic React in 20 minutes (YouTube) -- You don't need to remove all files like he is doing, but it's a good watch and good explanation in a short time. I also like that it uses hooks and expands in a semi-organic way from <HelloWorld /> to useState to react-router and beyond

Try This

Make a new react app

Follow the getting started on create react app

Add some links

  1. install react-router-dom
  2. add 2+ pages with the Route component
  3. add links in those pages with the Link component pointing to the Routes

Setup AWS CLI

  1. Follow installation instructions here
  2. Make credentials for yourself in IAM with at minimum full S3 Permissions, you may add blanket permissions if you want. You will need the key and secret key
  3. Add credentials using these directions

Clone this wiki locally