Intro to React as a Beginner

currentCount = 0
  • the representation of the code on what should be displayed to the user in that given moment - single source of truth.
  • ReactDOM — this is what lets React append/render to the DOM/screen, you are working with the React library
const reactContentRoot = document.getElementById(‘root’)
Index.html:<div id=“root”></div>
  • props { }, null….
  • what you want to place in the html element, text or content: “item1”
const myFirstElement = React.createElement('ul', null,
[ React.createElement('li', null, "item1"),
React.createElement('li', null, "item2") ]
// React.createElement('li', null, "item1")
)
  • It translates JSX into the code above like React.createElement( )
  • component is a function that returns JSX
ReactDOM.render(<App />, reactContentRoot)OrReactDOM.render(App(), reactContentRoot)
  • App.js is like a wrapper for all the components - a home base where it links all the other component files
Index.js ==> Components folder/  App.js ==> all other components files
example: const handleClick = () => { alert(‘working’)}
<button onClick={handleClick}>
  • you can pass in one prop or multiple props
const displayBtn = searchValue.length > 0
{displayBtn && <button onClick={handleClearClick}>clear</button>}
  • 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 */

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store