Shutaro Aoyama

Search

SearchSearch

React Beginner Tutorial

Jul 05, 2024, 6 min read

React Beginner’s Tutorial (1) What is React | Hypertext Candy

  • Virtual DOM

  • Component-Oriented

  • CodePen seems good for testing.

    • The usage is also explained.

  • Both ReactDOM and JSX can be imported as regular JavaScript files.

    • I wonder how JSX works and allows for non-standard JavaScript syntax.
    • It’s okay to think of it as being based on the JSX syntax (takker).
      • Similar to TypeScript and CoffeeScript.
      • It transpiles back to plain JS.
        • <div>...</div> becomes something like React.createElement("div", null, ...).
      • I see (blu3mo).

  • When writing loops or generating multiple elements with JSX, it is necessary to have a unique key for each element to indicate their individuality.

    • It’s better to have it for optimization purposes.

  • React components are created as functions that return React elements.

    • The input and output are similar to createElement.
    • JSX cleverly connects them together.

  • The advantage of using React is that it allows for more declarative code compared to manipulating the DOM directly.

  • When writing <X> <Y /> </X> in JSX,

    • If the function of X does not pick up and return the children property, Y will not be rendered.
      • I see (blu3mo).
    • React.Fragment and virtual DOMs of HTML tags seem to have this implemented by default.

  • As an impression for now, I find JSX a bit weird.

    • It’s probably just a matter of getting used to it, but the mixture of XML and JavaScript makes it hard to read.
    • It’s like a mix of nouns and verbs.
    • For now,
      • You can write something HTML-like anywhere.
      • If you want to write JavaScript inside something HTML-like, use {}.
      • It’s important to have the image that HTML has a stronger influence (?).
    • It’s important to always consider that the contents inside {} will eventually become an object.
      • It’s like a variant of \text${object}text“ (takker).
        • This is also always (object|primitive) inside {}.

jsx

const element = (
  <ul>
    {members.map(member => (
      <li key={member.name}>
        {member.name} plays {member.instrument}
      </li>
    ))}
  </ul>
);
  • I don’t quite understand this.
    • It seems that createElement("li", ~~) is being done for each element of members with map, but how does it become a child of ul?
      • Since it’s using map, an array of children is generated, I see.

React Beginner’s Tutorial (3) Props and State | Hypertext Candy

  • It’s className instead of class because class is a reserved word in JavaScript.

  • Essentially, the number of times a hook is executed must be the same for each rendering.

  • This is because React internally manages the values of state based on the order of calls.

    • It’s a quite delicate mechanism, huh? (laughs)
    • Well, in the end, it’s not magic or a separate layer system, but just JavaScript functions.

React Beginner’s Tutorial (4) Forms and Event Handling | Hypertext Candy

  • Essentially, the child does not know about the parent.
  • onChange, for example, occurs before the change.
    • I don’t know if it’s the same on the web, but it’s like the willXXX in iOS.
    • In other words, if you don’t handle the event properly, the change won’t even persist, so it’s not even “will”.
    • Well, it’s probably a different feeling from the did/will events in iOS (before SwiftUI).
  • Why can’t we use if statements inside {} in JSX?
    • https://reactjs.org/docs/jsx-in-depth.html#props-in-jsx
      • It seems that it’s because it’s not an expression.
    • But I still don’t quite understand why map is allowed, but if statements that return React elements are not.
      • It seems that it’s allowed if it’s an immediate function that encapsulates the if statement.
      • So, I guess the object itself should be inside {}.
    • But I still don’t understand why the ternary operator is safe.- https://qiita.com/smicle/items/7d3b9881834dc0142fb7

    • condition ? expr1 : expr2

    • So, the ternary operator always returns either expr1 or expr2, so you can put it inside {}.
    • I want a detailed explanation of what “Expression” means.
  • What happens to Events?
  • Problem 2
    • The state of password should have been confined to the password component.
  • Clonedle - Wordle Clone
  • Why declare functions using const instead of function statements in JavaScript?

React Tutorial (5) Let’s make a ToDo app | Hypertext Candy

  • If you’re used to Swift, the lack of strict typing can feel a bit weird.
    • I want to switch to TypeScript soon.
    • It feels the most uncomfortable to pass functions with ambiguous arguments.
  • Also, it’s inconvenient without Enums. jsx
// ❌ This way, it executes the function instead of passing it
<Comp onSomething={doSomething(123)} />
// ✅ Arrow function is also OK
<Comp onSomething={() => doSomething(123)} />
// ✅ Use bind
<Comp onSomething={doSomething.bind(null, 123)} />

React Development Environment

Although this series is titled “Introductory” tutorial, understanding the basics is more important than anything else. In fact, there is very little to learn about the React library itself. As mentioned in the text, if you have knowledge of peripheral technologies such as Router and Redux, and above all, an understanding of the JavaScript language specification, you can start real development.

It’s the same tutorial I used when I learned React (takker)

  • I remember it being a very easy-to-understand tutorial.
  • (I found out about it in 60c61ae91280f00000a26bd3, thank you very much 🙇‍♂️ (blu3mo))
    • I’m glad (takker)
    • And I completely forgot that I had already recommended it ()

Graph View

Backlinks