React Basics

How to set up REACT for Rendering?

import React from 'react'
import ReactDom from 'react-dom'

ReactDom.render(
<h1>Hello</h1>,
//what we want to display(our entire app)
document.getElementbyId("root")
//where we want to display it
)

1. On the top, you need to import react on every page/component that you use react on. The ReactDom is not needed on every page and is usually used in the main index.js file that renders the final application.

2. To render the React component, ReactDom.render takes 2 arguments.

   1. What we want to render

   2. And where we want to render it within the HTML file.

React Fragments?

• When you don't want to create a Top level element of Div or others that may mess with your CSS styling, you can use a React Fragment to encompass your code.

    function createCard(){
    // Instead of using Divs, use a React Fragment
    <React.Fragment>
        <h1>Hello</h1>
        <h2>World</h2>
    </React.Fragment>
  
    //you can also use the following empty opening and closing tags as ReactFragments
    <>
     <h1>Hello</h1>
        <h2>World</h2>
    </>
    }
  

How to create React Components:

There are 3 rules for creating a function component in React:

1. It must return JSX

2. It can only take in one argument called props, which is an object

   1. props are assigned values when the function is called within another component

3. The name of the function MUST start with a capital letter

    function Card(props){
    return (
    <div>
        <h1>{props.greeting}</h1>
        <h2>{props.secondGreeting}</h2>
    </div>
        )
    }
   

Component Composition using children

• Using composition in react is a powerful tool that allows you to dynamically update or alter components

• It allows you to add JSX individually to a Component call that adds specific JSX to the component on each individual call

function Card(props){
return (
<div>
    <h1>{props.greeting}</h1>
</div>
    )
}

function Homepage(){
return (
    <main>
    <Card greeting="Hello World"/> //This will just display the Card based on the props of greeting passed in. 
    <Card greeting="Hello"> // Using this syntax with an openening and closing for the Card component, you can dynamically add additional JSX that will be included in this call of the Card componenet only. 
        <p>This is Bob</p>
    </Card>
    </main>
    )    
}

Code Organization with Import/Export

• Instead of having all of your JSX in one file, it is easier to create each component within its own file and to export/import each component when needed.

• In these component files, if there is no rendering happening directly to the DOM, you don't need to import ReactDom

//This is a component
import React from 'react'

function Card(props) {
return (
<div>
    <h1>{props.greeting}</h1>
</div>
    )
}
function logger(){ console.log("h1")}
const name = "Bob"

export {logger, name}// you can export variables as well

export default Card

• The "export default" allows us to use the Card in different components in other files.

• Anywhere you want to use the Card component, you have to "Import" it following a relative path

• You can export variables as well using the export syntax followed by the curly brackets and the variables' names.

import React from 'react'
import Card, {logger, name} from './Card.js' //importing card and other variables here

function App(){
return(
    <main>
        <Card greeting="Hello!!!"/>
    </main>
    )
}

• You can also rename the variable when importing it into a different component.

  • The Card component could be renamed to "MyCard" while importing it and React will know it is the Card component as that is what is being exported from the Card Component file.

• You can import the variables from the Card app that we exported by using the Curly Brackets after importing the Card component.

Destructing of Props

• Gives you easier access to the data of the props coming to you

•           function App(props){
             const { emoji, key} = props //This destructeres and assigns the props to their corresponding value. The variable names are the keys in the props. 
            }
  
            function App({emoji = "Hi", key})// The props can be destructured directly in the props area.
          //Another important part of using it in the arguments is placing default values. If an emoji value isn't provided, it will use the value of "Hi" as the default
  

Conditional Rendering

• Used to render elements based on a condition.

• Use if else statements to use conditional logic outside the JSX but inside the component Function.

  • Cannot use statements inside JSX

• You can write conditional expressions using ternary operators.

  • {variable ? <returnThis /> : <orReturnThis/>

  • If variable is true, return <returnThis/>, else return <orReturnThis/>

Event Handling in React

OnClick

• Event handlers are added on to DOM elements and not React Components.

• They start with "on" and then the Event. So a click event is "onClick"

• They are passed similarly to a prop and have a callback function. Most times, it is better to reference a function but if it is simple enough, you can use an Arrow function

•     function SayHello(){
          function hello(){
              console.log("hello")
              }
      return <button onClick={hello}>Click Me<button/>
      }
  

You can also pass down the reference to the callback function as a prop on a React Element and use it once passed down.

onChange

• Used for handling changes to input values such as <input>, <select>, <textarea>, etc

onSubmit

• Used with <form> elements and added to this element

• you must call event.preventDefault() just like in javascript in the callback function

Citations: Flatiron School Software Engineering