Intro to React as a Beginner

Going into week one of the final phase in the Flatiron Program, I had lots of JavaScript on my mind. I didn’t have my JS project assessment quite done — it was scheduled for that Friday. For the end of week on of React — I couldn’t quite focus on the curriculum and it wasn’t quite hitting home yet… until I hit a video named: React Js in 3.5 hours on YouTube by Mike Dane or check out his website.

I can’t emphasize How much I personally learned from this video. When I say “It hit home and all of a sudden everything made sense” I mean it 100%. The approach he took in teaching React was amazing, just leaving JavaScript land the week before. Here are some key notes that I thought were a good takeaway from the video about React:

State:

• a piece of state - the different values or different pieces of data in the program that are going to affect the user interface

(18:00 mins)So with a counter demo:

currentCount = 0

• a piece of data that we are actively keeping track of what’s going to affect the user interface
• the representation of the code on what should be displayed to the user in that given moment - single source of truth.

(29:01) — React vs ReactDOMj, What are you?

• React is a Core Library you will work with 99% of the time - JS functions make building/ creating UI elements easier
• ReactDOM — this is what lets React append/render to the DOM/screen, you are working with the React library

What is the Index.js file:

• This file is what is being rendered onto the DOM — Where React is looking for the main Div with the id of root, a home base.

const reactContentRoot = document.getElementById(‘root’)

• ReactDOM.render(‘hello world’, reactContentRoot) <===== takes in two arguments (ArgOne: ‘what you want rendered’, ArgTwo: finds the div with the id of root to render the content there)

Index.html:
…
<div id=“root”></div>
…

Creating an element with react:

the method React.createElement( ) - takes in three arguments:

• the html element you want to create like li, p, div…
• props { }, null….
• what you want to place in the html element, text or content: “item1”

— you can also pass in an array of elements like:

const myFirstElement = React.createElement('ul', null,
[ React.createElement('li', null, "item1"),
React.createElement('li', null, "item2") ]
// React.createElement('li', null, "item1")
)

• You could use ReactDOM(web app - computer) or ReactNative(this one is for like apps for your phone)

What is Babel:

• Babel is a JavaScript compiler and not a webpack loader. It compiles (transpiles) higher JavaScript code (ES6+) to lower JavaScript code (such as ES5)
• It translates JSX into the code above like React.createElement( )

JSX:

• JSX is html code in the JS file, not the html file.

Components in React:

• Components is like a container that holds elements inside of them - main reason to use components is for reusability
• component is a function that returns JSX

You can render the COMPONENT either way:

ReactDOM.render(<App />, reactContentRoot)
Or
ReactDOM.render(App(), reactContentRoot)

Layout of Create React App:

• Use Create React App to scaffold out a react application
• App.js is like a wrapper for all the components - a home base where it links all the other component files

Src-folder:

Index.js ==> Components folder/  App.js ==> all other components files

• When adding an event listener to the html tag like div - onClick is like a prop or attribute and you could just pass in the function name.

example: 
const handleClick = () => { alert(‘working’)}

<button onClick={handleClick}>

How react handles with communicating to the DOM?

- By using hooks

usedState():

• value that is directly hooked up to the UI

Prop:

• is a value that you pass into the component by the component that’s rendering it - external values/practically arguments passed in
• you can pass in one prop or multiple props

State:

• is a value that is internal to the component

Short circuiting :

the following statement converts into a truth or false value:

const displayBtn = searchValue.length > 0

short circuiting is the following in { } — the first set of {}

{displayBtn && <button onClick={handleClearClick}>clear</button>}

useEffect():

useEffect is a hook that allows us to respond to different events that happen in the lifecycle of the component

• allow us to run code when a piece of state is updated - or component loads
• takes in two arguments: a callback function and for the second argument is an ARRAY

Syntax:
useEffect(() => {
  if(currentCount === 10){
     setCurrentCount(0)
  // alert('got to the num 10!')
}
}, [currentCount])
/* DONT FORGET THE ARRAY AT THE END - KEY PART */

These are just some of the many notes that I took during the video by Mike Dane that I thought were incredibly useful as a beginner learning React. I found and learned so much and highly recommend this video not only to watch with but also open up VS Code or another code editor and code along with the example he included in the video. Thank you to one of the Avengers in code.