# 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!

//DOM - element to show
const msgElem = document.createElement('h1');
msgElem.id = 'hello';
msgElem.classList.add('myClass');
msgElem.textContent = 'Hello World!';





//show the content in the web page 
//(inside #root)
document.getElementById('root').appendChild(msgElem);

//React - element to show
const msgElem = React.createElement(
  //html tag
  'h1',
  //object of attributes
  { id: 'hello', className: 'myClass' },
  //content
  'Hello World!'
); 

//Create a "React root" out of the `#root` elemment
//then render the React element at that root
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(msgElem)

//JSX - element to show
const msgElem = <h1 id="hello" className="myclass">Hello World</h1>;








//Create a "React root" out of the `#root` elemment
//then render the React element at that root
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(msgElem)

# Make sure you are in the project directory
cd path/to/project

# Install dependencies for existing project (installs vite)
npm install

# Run the development server script
npm run dev

const headerElem = (
  <header>
    <h1>Hello world!</h1>
    <p>This is a fine demo</p>
  </header>
);

//values need to have a "single" parent
const invalidCode = (
  <p>First sentence</p>
  <p>Second sentence</p>
)

const validCode = (
  <> {/* a fragment: a parent that won't be rendered */}
    <p>First sentence</p>
    <p>Second sentence</p>
  </>
);

//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" />;

<App>
  <HomePage>
    <Header />
    <SearchBar />
    <EmployeeList>
      <EmployeeListItem person="James King" />
      <EmployeeListItem person="Julie Taylor" />
      <EmployeeListItem person="Eugene Lee" />
    </EmployList>
  </HomePage>
  <EmployeePage>
    <Header />
    ...
  </EmployeePage>
</App>

//declare a function to define a component -- this is like a class
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 HelloMessage(props) {
   return <p>Hello World!</p>;
}

function GoodbyeMessage(props) {
   return <p>See ya later!</p>;
}

function MessageList(props) {
   return (
      <div>
         <HelloMessage /> {/* A HelloMessage component */}
       	 <GoodbyeMessage /> {/* A GoodbyeMessage component */}
      </div>
   );
}

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

/*** in App.js ***/

//import from other components; HelloMessage.js, Messages.js, etc
import { HelloMessage } from './Messages.js'

//declare a function component
export default function App(props) {
  return (
    <HelloMessage /> {/* render imported Component */}
  )
}

/*** in index.js ***/
import App from './App.js' //default import

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)

//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
}

ReactDOM.createRoot(document.getElementById('root'))
   .render(<MessageItem message="Be quiet" />)

//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} />)