This project contains a foundation for building and learning about React apps, as well as a foundation for creative coding with ThreeJS and ToneJS. The site includes three routes showing how navigation works in a single page app. We manage the page head and body using a standard React flow. The homepage features a click effect that demonstrates using state, and the visualizer page has shapes built with Three.JS (a web graphics library) that are controlled by a sequence running with Tone.JS (a web audio library).
React is a popular UI library for building web apps. Vite is a powerful tool for building JavaScript apps that bundles all of your code and shows immediate changes while you're editing.
While you're in the editor working, Glitch is running your start script in the background (vite dev). The site will be in dev mode and you'll see your changes happen ✨ immediately in the preview window. Once you close the editor window and your app goes to sleep, Glitch runs the build script and Vite builds your app for modern browsers.
You'll get best use out of this project if you're familiar with basic JavaScript. This project is a static site, which means that the server builds the site from the content of the src folder while you're developing it, then it's able to serve the pages super quickly when the user requests them.
← README.md: That’s this file, where you can tell people what your cool website does and how you built it.
← index.html: This is the main page template React uses to build your site–it imports index.jsx to kick things off. When you're ready to share your site or add a custom domain, change SEO/meta settings in here.
← src/: This folder contains all the files React will use to build your site.
React defines site components in JSX, an extended version of JavaScript, so you'll see lots of .jsx files in the project.
← src/index.jsx: This is the root of your React app. The index script is imported in the site home template index.html. If you add libraries like chakra-ui or redux, you'll insert their providers here.
← src/app.jsx: The base for defining your React app, this script imports the components that make up the site content. The index.jsx file imports the App script. The router (from wouter 🐰) is also imported here.
← src/styles: CSS files add styling rules to your content. You have a lot of importing options for CSS including CSS modules if that's your jam.
← src/components/router.jsx: One of the most important parts of a single page app is the router. It's how we know what page to show–the code maps the paths to the Home and About components. We're using Wouter, a tiny minimalist router. You could replace it for something like React Router.
← src/components/sequencer.jsx: This file contains the code for the Sequencer component, which handles all of the ToneJS control in the app.
← src/hooks/: Hooks are a powerful way to provide interaction with your app.
← src/hooks/wiggle.jsx: The wiggle effect animates elements, as you'll see if you hover over the image (or text below it) on the homepage. You can apply the effect anywhere you like in the site as outlined in TODO.md.
← src/pages/: These files include components that specify the content of the Home and About pages. Each one is defined as a function and referenced in router.jsx. The content is built into the page outline specified in app.jsx.
← src/pages/about.jsx: The content of the About page, defined as a component function.
← src/pages/home.jsx The content of the Home page, also defined as a component function. The page includes the animated effect on hover, and title change effect on click (which is also a handy demo of using state data in React).
← src/pages/visualizer.jsx This page contains the ThreeJS visualizer, which is controlled by the Sequencer component, and which displays moving 3D objects!
Take a look in TODO.md for next steps you can try out in your new site!