Client-Side JavaScript Frameworks (React)

Due 4/1, by midnight. Late by class time 4/3.

You must log into Blackboard and click all the way through 3342->Videos->Panopto for the videos below to show!

Intro & Setup

Update Spring 2025: create-react-app has been deprecated. We are switching to Vite. I'm not updating the video because there's really no meaningful change. Vite instructions are provided below.

Assignment Next Step

Following along with the video example, start a new React project.

https://classroom.github.com/a/KY98eCy_
  • clone the repository (only contains the very important .gitignore and a html mockup)

  • use Vite to create your react project. from inside the repo:

    repo> npm create vite@latest
  (follow the directions to name the project and choose React)
repo> cd (whatever you named the project)
repo/project> npm i
repo/project> npm run dev
  • test that you can see the default App

For your future reference, here is an article series updated annually about the current options for managing React apps.

JSX

Starting App Example

Assignment Next Step

Using the video example as reference, practice starting an App from a mockup using JSX

  • here in part 1 we are only displaying state, no interaction (e.g. the buttons don't do anything)

  • replace the default App function in src/App.js with the below code (make up some data for your friends' name/description/comment): 

    function App() {

  const friends = [
    {name: "", description: "", comment: "", ditched: false},
    {name: "", description: "", comment: "", ditched: false},
    {name: "", description: "", comment: "", ditched: true},
    {name: "", description: "", comment: "", ditched: false}
  ];
          
  return (
    <>
      <p>Update Me</p>
    </>
  );        
}

  • Write JSX code in the return to use the friends data and make the page look like this (with the four friends you defined instead):

    • The html you need is in mockups/mockup-jsx-practice.html
      • Copy the html from the body into your return function
      • Copy the bootstrap link from that mockup into the <head> of your index.html file to include bootstrap
    • JSX uses expressions rather than control statements. Use map instead of a for loop.
  • Add conditionals to turn the name red and omit the Ditch button for friends where ditched is true (use the ternary if expression, not an if control statement)

When it's done, make a copy of src/App.js named src/App-practice.js to preserve that work for grading.