Client-Side JavaScript Frameworks (React)

Part 1 is due Tue, 4/2 by class time.
Part 2 is due Thu, 4/4 by class time.

You must be logged into Blackboard for the videos below to show!

Intro & Setup

Assignment Next Step

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

https://classroom.github.com/a/sj5WcoFq
  • clone the repository (only contains the very important .gitignore and a html mockup)
  • use create-react-app to create your react project inside the repo
  • test that you can see the default App

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 public/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.