Javascript Building a Small Interactive React Site Project

1. Start by reading and interacting with the code challenges in https://react.dev/learn/Links to an external site. . (It’s okay to look at the solutions when they’re provided. Also notice how files are arranged together and called upon in a React project.) Which sections should you read and how far should you go? After the Tic Tac Toe game, I recommend:

• Thinking in ReactLinks to an external site.  (in the Quick Start)
• Learn React chapters:
  • Describing the UILinks to an external site. (all subsections)
  • Adding InteractivityLinks to an external site. (all subsections)
  • Managing StateLinks to an external site. (get at least halfway? finish if you can)

2. Now, let’s start building a little React project on Node with localhost in Webstorm.

• To start, you can create a new directory (this will eventually become a GitHub repo like your three.js project). To keep things simple for now, don’t build this in the same repo as your three project–start with an empty directory.
• Then go to create a new Webstorm project, and choose React for your project type.
• You’ll see things start to install to set up a React environment.
• Follow instructions to run npm start and this will open a localhost build of a simple starter React page with the React logo and a link to the tutorial you’ve been reading. It’ll prod you to start editing App.js.
• Start by exploring the file structure (we’ll do this in class). Notice where you edit, and where pages will be built. 
• Begin modifying the App.js file and also the files in this space to make it your own.
• To start let’s create an images/ directory under src/ and add some images to it that we can treat as React components. Can you replace the React logo with one of your images, served as a component?
• Challenge: Can you design an image gallery with some interactive features? Write some React JSX code for this assignment that allows a user to do something interactive on the site. Suggestions: 
  • onClick of a <button> or on entering text in an <input> box, can you display something different–maybe a new image from your gallery based on the selection input? Maybe show a text field to provide more information? Maybe a popup alert() message?  Maybe a change to the background-color or other styling?
  • Experiment as much as you like here, and try to modify the file directory you’re working in to add images and other content to the site. You could start a new .js file to store some JSON notation storing info about your images, for example that you can practice retrieving on your site. 
• When ready to submit this project milestone, push your code to GitHub and deploy to GitHub Pages via a gh-pages branch. The process for this is very similar to what we did with three.js, as you only push to your main branch, but npm handles the deployment to gh-pages.