Table of Contents:

• Introduction
• Components
• Props
• State
• Summary

Introduction
JSX stands for JavaScript XML. JSX is a more sophisticated version of JavaScript, in which it makes it easier to write or add HTML in React. JSX is faster than regular JavaScript since it can easily convert HTML tags to react elements. JSX works efficiently by utilizing react components, which are independent and reusable bits of code that serve the same purpose of functions in JavaScript, but work in isolation and return HTML. JSX has 3 rules to make a react component: 1. A component must return JSX, 2. A component takes in one argument called "props" which is an object, 3. The name of the component/function must start with a capital letter.

Components
As previously mentioned, components are essentially the same as functions in JavaScript. However, instead of having one index.js file with a thousand lines of code, components allow you to organize and abstract out the functionality of your code in separate components. These components enable a "templating" functionality, that helps us organize our user interface's logic and presentation. Since components serve as a "template" for our apps, we typically have components that render other components or "child components". Which is extremely important step when first setting up your app. For example, in my phase-2 project I have a home component set up when the page initially loads, which then renders a SportsList component that displays 3 different components as links that can be clicked, to which unique html will be displayed on the page depending on which one was clicked.

function Home (){
   return (
      <div>
       <SportsList/>
      </div>
   );
 }

Then inside "SportsList"...

function SportsList (){
   return (
     <div>
       <NavLink> Basketball <NavLink/>
       <NavLink> Baseball <NavLink/>
       <NavLink> Football <NavLink/>
     </div>
  );
}

The "NavLinks" are just clickable links to the different Basketball, baseball, and football components. Which themselves render their own unique HTML when clicked. The importance of these child components is that it allows different HTML to be displayed based on whatever the user desires. Additionally, by setting up your components in this format you can easily pass data or values between components that makes them more dynamic and a lot more reusable. The data that is passed into our components are called props.

Props
Quick Recap: A component is a function that takes props as an argument and returns JSX.

React allows us to pass units of information from a parent component down to a child component. We call these props, which are shown as an object with key-value pairs related to the data we passed down from the parent component. Props can hold any kind of data(strings, numbers, booleans, objects, even functions!). To pass props to a component, you add them as attributes when you render the component, just like adding attributes to an HTML element. For example, using the same example as before, lets say I wanted to pass information from my Home component to my SportsList component I would do it like so..

function Home (){

const data = {sport1: Basketball, sport2: Baseball, sport3: Football}

   return (
     <div>
       <SportsList data={data}/>
     </div>
  );
}

Then inside "SportsList"...

function SportsList ({data}){
   return (
     <div>
       <NavLink> {data.sport1} <NavLink/> 
       <NavLink> {data.sport2} <NavLink/>
       <NavLink> {data.sport3} <NavLink/>
     </div>
  );
}

This would give us the same as the previous example:

function SportsList (){
   return (
     <div>
       <NavLink> Basketball <NavLink/>
       <NavLink> Baseball <NavLink/>
       <NavLink> Football <NavLink/>
     </div>
  );
}

State
Lastly, the state object is where you store property values that belongs to the component. State is used in components when there are variables whose value will change. Since we cant send data up from a child component to its parent, we use state to pass data down to child components. In addition to passing the state variable a child component, we also pass it a setter function which when called updates the value of the state variable with whatever argument it was called with. To decide which component to create our state variables in, we need to locate the closest common parent.
Syntax:

1. we need to import state in top level parent component and call it inside the function and pass it an initial value.

Import React, { useState } from ‘react’;

function App(){
const [name, setName] = useState("")

   function setNewName(newName){
    setName(newName)
    }

 return (
  <Name name={name} setNewName={setNewName}/>
 );
}

function Name({name, setNewName}){

  function handleChange(e){
   setNewName(e.target.value)
  }
    return(

   <input
    type="text"
    value = {name}
    onChange= {handleChange}
   />

 );
}

In this example, we set our "name" state variable to be an empty string initially in the App component and passed it to the Name component with a callback function. Then when the user types their name into the input field, the onChange attribute calls handleChange function. The handle change function then calls the callback function, "setNewName", we passed to the name component with the value of whatever was typed. Which takes us back to the App component, where the parameter "newName" is equal to that same value that was typed. To which that function then calls the setter function(setName) for the state variable "name". By calling the setter function, name is now no longer equal to empty string, but whatever value was typed by the user. Which can then passed if needed to other child components of App.

Summary
When writing code in React understanding how components, props, and state works is essential when creating and building your applications. Without the basic understanding of how each work dynamically with each other, ones code can get jumbled and misconstrued quickly. On the other hand, having a strong understanding of how these features of React work, one can easily build a well organized, dynamic, and efficient application.