Minimal react notes

Getting started

For app building purposes, you will want to have React set up on your local machine.
Use VS Code to write, Node to run React locally, and Next.js as the React framework.

*If you get stuck or have specific questions you can look into using a tool like Chat GPT, GitHub Co-pilot or something similar. GPT is free, but not built into your text editor. Either way, I would not use these as a first step when you are learning. Craft specific questions and try to have a general idea of how you want to solve a problem before asking. These tools can also be really helpful for bugs. These tools help you identify errors to get you unstuck, however there have been times where a problem would have been solved much quicker with a Google search.

Tools

• React
• VS Code
• Node
• Next.js

React in a nutshell

React is a JS library.  It uses an HTML like language called JSX (see the 3 rules of JSX) that will compile into JS.

The core pieces of React can be broken into: 

1. Components
   • Self contained pieces of code built from smaller code pieces.
   • Create & call like this:
     
     function ComponentName() {
           return <p>Hey there</p>;
     }
     
     ReactDOM.render(ComponentName, app);
     
     // app is location where your component is placed 
     // ex. const app = document.getElementById('app')
      
   • You can also nest multiple components in a component:
     
     function PageOfComponents() {
           <div>
                <ComponentName />
                <AnotherComponent />
           </div>
     }
      
2. Props
   • Props can be added to and passed into your components
      
   • Example of passing props:
     
     function PageOfComponents() {
           <div>
                 <ComponentName name='Fren' />
           </div>
     }
      
   • Here are some examples of a component accessing properties:
     
     function ComponentName(props) {
           console.log(props)  // { name: "Fren" }
           return <p>{props.title}</p>; // print "Fren"
           return <p>`Hey ${props.title}</p>; // print "Hey Fren"
     }
     
     function ComponentName({ name }) {
           console.log(name)  // "Fren" 
           return <p>Hey {name}</p>; // print "Hey Fren"
     }
     
     function ComponentName({ name }) {
           return <p>{name ? name : 'Steve'}</p>; // if name exists, use it. Else assign 'Steve'.
     }
      
   • Iterate through a list and assign properties
     
     function PageOfComponents() {
           const listOfFrens = ['Ralphie', 'Sam', 'Stacey', 'Carl', 'Steve'];
     
           <div>
                <ComponentName />
                <AnotherComponent />
     
                // you should ideally use a truly unique ID for key names
                <ul>
                     {listOfFrens.map((name) => (
                          <li key={name}>{name}</li>
                      ))}
                </ul>
           </div>
     }
3. State & hooks
   • React uses functions called hooks to watch things and keep them updated
   • useState() is a hook used to manage a variables state
     const [numOfLikes, setNumOfLikes] = React.useState(0);
     // First is the variable, second is the 'set' function.  You can initialize your starting variable
      
   • In React, event handlers are written in camelCase
     
     function PageOfComponents() {
           return (
                <button onClick={isClicked}>Like ({numOfLikes})</button>
           )
     
     }
      
   • To tell your program what to do, make a function that will run when the event state is met
     
     function isClicked() {
           setNumOfLikes(likes + 1);
     }
      
   • Additional resources for React state management Adding interactivity and Managing state

Local storage

--