# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

# EITHER create a new react app
npx create-react-app app-name --use-npm

# OR install dependencies for existing project
cd path/to/project
npm install

# run the server
npm start

//Can include JavaScript expressions in React elements
const message = "Hello world!";
const element = <h1>{message}</h1>;


//Can include arbitrary expressions
const element = (
  <p>
    A leap year has {(365 + 1) * 24 * 60} minutes!
  </p>
);

//Can use inline expressions in attributes
const imgUrl = 'path/to/my_picture.png';
const pic = <img src={imgUrl} alt="A picture" />;

# you must be in the React project folder
cd path/to/my-react-app

# install dependency
npm install bootstrap

/* in index.js */
import 'bootstrap/dist/css/bootstrap.css';
import 'my-style.css' // import your stylesheet afterwards

//declare a function to define a component
function HelloMessage(props) {

  
  //this function returns the elements (JSX)
  //that make up the component
  return (
     <h1>Hello World!</h1>
  );
}

//"call" function to create a new element value!
const msgElem = <HelloMessage />;

//show the content in the web page (inside #root)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(msgElem)

function HelloItem(props) {
   return <li>Hello World!</li>;
}

function GoodbyeItem(props) {
   return <li>See ya later!</li>;
}

function MessageList(props) {
   return (
      <ul>
         <HelloItem /> {/* A HelloItem component */}
       	 <GoodbyeItem /> {/* A GoodbyeItem component */}
      </ul>
   );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(msgElem)

//Passing a prop called `message` with value "Hello property"
const messageA = <MessageItem message="Hello property!" />;

//A component can accept multiple props
//This component takes in a `name` property as well as 
//a `descriptor` property
const userInfo = <UserInfo name="Ethel" descriptor="Aardvark" />;

//Passing a value as a prop using an inline expression
const secret = "Shave and a haircut";
const messageB = <MessageItem message={secret} />;

function MessageItem(props) {
   const message = props.message; //access the prop



    //can use prop for logic or processing
   const messageUpper = message.toUpperCase(); 

   return <li>{messageUpper}</li>; //render based on prop
}

const msgElem = <MessageItem message="Be quiet" />

//pass in TWO props
const msgElem = <MessageItem message="Make some noise!" isLoud={true} />
  
//receives ONE argument
function MessageItem(props) {
   const message = props.message; //access the `message` prop
   const isLoud = props.isLoud; //access the `isLoud` prop

   let displayMsg = message;
   if(isLoud){
     displayMsg = message.toUpperCase();
   } 

   return <li>{displayMsg}</li>; //render
}

//Pass an array as a prop!
const array = [1,2,3,4,5];
const suitcaseElem = <Suitcase luggageCombo={array} />;


//Pass a function as a prop (like a callback)!
function sayHello() { 
  console.log('Hello world!');
}
const greetingElem = <Greeting callback={sayHello} />;

function MessageList(props) {
  //msgComponents will be an array of components!
  const msgComponents = props.messages.map((msgStr) => {
    const elem = <MessageItem message={msgStr} key={msgStr} />; //pass prop down!
    return elem
  }

  return (
    <ul>
      {/* An array of components renders as siblings */}
      {msgComponents} 
    </ul>
  );
}

const messagesArray = ["Hello world", "No borders", "Go huskies!"];

ReactDOM.createRoot(document.getElementById('root'))
   .render(<MessageList messages={messagesArray} />)

function ConditionalPanel(props) {
  //assign element to show to variable
  let thingToRender = null; //null element will not render
  if(conditionOne){ //based on props or state
    thingToRender = <OptionA />
  } else if(conditionTwo) {
    thingToRender = <OptionB />
  } else if(conditionThree) {
    return null; //show nothing!
  }
    
  //keep return statement as simple as possible!
  return (<div>{thingToRender}</div>);
}