Next.js Learning Notes

type

status

date

slug

summary

react-course

npx create-react-app react-course

npm install

npm start

getElementById(’root’) finds specific element like <div id="root"></div> within html document, react needs a place within html to render components, The div with id="root" acts as a container where React app will be rendered.

import App from './App'; This imports a component named App from a file called App.js, and this App component will be rendered through root.render.

hint: the name of function should start with a capital caracter.

fucntion template:

and import custom function by import whatever from "./component/whatever” before use it.

what are props in react?

Props (short for "properties") are how you pass data from a parent component to a child component in React.

Key Points:

Props are always passed down: Data flows in one direction, from parent to child.

Any JavaScript value can be a prop: You can pass strings, numbers, arrays, objects, functions, and even other React components as props.

Default Props: You can set default values for props in case they are not passed from the parent component. This helps prevent errors and makes your components more robust.

for example, right down here is a child component code

and this is a parent component code

those <Todo text="X" /> colud pass props values from parent component to child component.

event props

onClick as build-in html function could use in <div />,

onClick={props.oncancel} transports props from parent component to child componet.

{modalisopen && <Backdrop oncancel={closemodal} />} conditionally renders the Backdrop component only when the modalisopen state is true. oncancel={closemodal} passes the closemodal function as a prop to the oncancel event handler of the Backdrop component.

so clicking the backdrop will trigger closemodal function, setmodalopen(false) will update the modalisopen state to false, so on the javascript choose not to render Modal and Backdrop component because of &&. there have an another way to accomplish that.

<div className="backdrop" onClick={props.oncancel}/>, don't see parentheses after props.oncancel because you are passing a function reference, not invoking the function.

onClick: This is a React event handler prop that listens for click events on the element.

={}: In JSX syntax, curly braces {} are used to embed JavaScript expressions.

props.oncancel: This part of the code is a reference to a function, not a function call. It means "get the property named oncancel from the props object, which should be a function."

Why pass a function reference instead of calling the function?

The onClick prop expects a function that React will automatically call when the click event happens.

If you were to call the function directly in onClick like onClick={props.oncancel()}, the function would be executed immediately during component rendering, not when the click event occurs.

In summary:

In event handler props, we need to pass a function reference so React can call it when the event happens.

Directly calling the function would lead to the function being executed at render time, not at event time.

react-course

event props

Routing