This is the App.jsx file. You would render an App Component in the ReactDOM.render method inside the index.js file. You can create your own HTML pages and CSS styles.

import React, { useState } from "react";

function App() {
   const [isMousedOver, setMouseOver] = useState(false);

   function handleMouseOver() {
      setMouseOver(true);
   }

   function handleMouseOver() {
      setMouseOver(false);
   }

   return (
      <div>
         <button
            style={{ backgroundColor: isMousedOver ? "black" : "white" }}
            onMouseOver={handleMouseOver}
            onMouseOut = {handleMouseOut}
         >
            Hover
         </button>
      </div>
   );
}

export default App;

State is a React concept that allows us to make our apps more interactive and mutable.

React components has a built-in state object. 

The user interfaces re-renders based on the value of state variables.

Declarative programming: the use of variables such as state to change an object’s property

Imperative programming: explicitly setting an object’s property

Imperative programming is about how a program works while Declarative programming is about what a program does. 

Using regular variables to declaratively change the user interface of a React component will not work. You need a special kind of variable in order to cause React elements to re-render: State variables. You also need special functions called Hooks that look– or hook— into the state of your app to read and modify it.

You use the useState hook in order to get access to the component’s state.

import React from "react";

function App() {
   const state = React.useState();
}

Whatever we put into the parentheses of the useState function is the initial state of the component.

const state = React.useState(123);

If we wanted to access the state variable we just created, we would extract the first element of the state array:

console.log(state[0])
// prints out 123

Whenever you change state, React updates any UI elements corresponding w/ that piece of state automatically.

Using state[0] to access state variables is kind of unintuitive though and not the most efficient way to code. So we can use destructuring to make it easier on us as programmers:

const [count] = useState(123);

console.log(count);
//prints 123

How do we change the value of state variables?

const [count, setCount] = useState(123);

setCount(count - 1);

console.log(count);
// prints 122

JSX only allows you to use JavaScript expressions within curly braces. It does not allow you to enclose JavaScript statements.

So if you wanted to use a condition to decide which content to render on the screen, you COULD NOT use a statement like this:

return <div>{
   if (isLoggedIn === true){
      return <h1>My Favorite Foods</h1>
   } else {
      return <p>My Least Favorite Foods</p>
   }
}</div>;

Instead, you would have to use a ternary operator. This is how ternary operators work:

condition ? do if true : do if false

foodAtHome === true ? makeFood() : buyFood()

So this is how you would accomplish the task from above:

return <div>{
   isLoggedIn === true ? <h1>My Favorite Foods</h1> : <p> My Least Favorite Foods</p>
}</div>;

Another way you can incorporate logic into your JSX objects is with the AND operator. The AND operator in React checks if the first condition is true or false. If true, it looks to see if the expression is also true then displays the expression. If the statement is false, it will not even look at the expression.

condition && expression

true && expression

false && -expression-

Here’s an example of the AND operator:

return <div>{
   currentTime > 12 && <h1>It's not the morning</h1>
}</div>;

We can use the JavaScript map function to make our code a lot cleaner when creating multiple components of the same type from a JSON-type data source.

So instead of having something like this:

function App() {
   return (
      <div>
         <Card 
            name={contacts[0].name}
            img={contacts[0].img}
            tel={contacts[0].phone}
          />
          <Card 
            name={contacts[1].name}
            img={contacts[1].img}
            tel={contacts[1].phone}
           />
          <Card 
            name={contacts[2].name}
            img={contacts[2].img}
            tel={contacts[2].phone}
           />
         ...

We can use something like this:

function createCard(contact) {
   return <Card name={contact.name} img={contact.img} />
}

function App() {
   return (
      <div>
         {contacts.map(createCard)}
         ...

We still have something to fix though. Once you run your new code, you should get this warning:

This is because we don’t have a key prop in our child components. The key must be unique among each of the mapped components.

function createCard(contact) {
   return <Card 
      key={contact.id}
      name={contact.name} 
      img={contact.img} 
   />
}

The key CANNOT be used as a property in the component’s props array. The key is for React to use, not us.