Next.js Learning Notes

type

status

date

slug

summary

react-course

npx create-react-app react-course

npm install

npm start


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

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:


function whatever() {
return(
    <div className="card">
    <h2>title</h2>
    <div className="actions">
      <button className="btn">delete</button>
    </div>
  </div>
);
}
export default whatever;

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


function Todo(props) {
    function deletehandler() {
        console.log('clicked')
        console.log(props.text)
    };
return(
    <div className="card">
    <h2>{props.text}</h2>
    <div className="actions">
      <button className="btn" onClick={deletehandler}>delete</button>
    </div>
  </div>
);
}
export default Todo;

and this is a parent component code


import Todo from "./component/Todo";
function App() {
  return (
    <div>
      <h1 className="h1">my to dos</h1>
      <Todo text="one" />
      <Todo text="2" />
    </div>
  );
}

export default App;

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

event props


function Backdrop(props) {
return(
    <div className="backdrop" onClick={props.oncancel}/>
)
};

export default Backdrop;

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

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


import { useState } from "react";
import Modal from "./Modal";
import Backdrop from "./Backdrop";

function Todo(props) {
  const [modalisopen, setmodalopen] = useState(false);
  function closemodal() {
    setmodalopen(false);
  }

  function deletehandler() {
    setmodalopen(true);
  }
  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn" onClick={deletehandler}>
          delete
        </button>
      </div>
      {modalisopen && <Modal cancel={closemodal} confirm={closemodal}/>}
      {modalisopen && <Backdrop oncancel={closemodal} />}
    </div>
  );
}
export default Todo;

{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.


function Modal(props) {
  function cancelmodal() {
    props.cancel();
  }
  function confirmmodal() {
    props.confirm();
  }
  return (
    <div className="modal">
      <p>are u sure?</p>
      <button className="btn btn--alt" onClick={cancelmodal}>
        cancel
      </button>
      <button className="btn" onClick={confirmmodal}>
        confirm
      </button>
    </div>
  );
}

export default Modal;

<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