React Foundations をやってみる
りょた参考
りょた１章
React is a JavaScript library for building interactive user interfaces.
React とはコレ。
りょた２章
What is the DOM?
The DOM is an object representation of the HTML elements. It acts as a bridge between your code and the user interface, and has a tree-like structure with parent and child relationships.
DOMとはコレ。
りょた命令型プログラミングと宣言型プログラミング
The code above is a good example of imperative programming. You're writing the steps for how the user interface should be updated. But when it comes to building user interfaces, a declarative approach is often preferred because it can speed up the development process. Instead of having to write DOM methods, it would be helpful if developers were able to declare what they want to show (in this case, an h1 tag with some text).
これがReactの良さ。結果ベースで実装できる。
デメリットとしては、DOMの操作の箇所が中のソースを見ない限りわからない、という点。
このページもわかりやすい。
りょたPages like this are often called “living styleguides” or “storybooks”.
https://react.dev/learn/reacting-to-input-with-state#displaying-many-visual-states-at-once
storybookの由来ってこれなのか。面白い。
りょた４章
りょた５章
りょたFirst, React components should be capitalized to distinguish them from plain HTML and JavaScript:
コンポーネント名がアッパーキャメルである理由
りょた６章
一つのnodeにせずにmapを利用したい場合は明示的なFragmentを利用する必要がある。
const listItems = people.map(person =>
<Fragment key={person.id}>
<h1>{person.name}</h1>
<p>{person.bio}</p>
</Fragment>