Reactクイックスタート

マークアップを返すjavascript関数 function MyButton() { return ( <button>I'm a button</button> ); }

頭文字は大文字なのがReactコンポーネントなので、命名規則として大文字でコンポーネント定義が必要

関数名の前にexport defaultキーワードを付与する。

JSX構文という。

HTMLより構文が厳格で必ず <br />のようにタグ閉じが必要

複数のマークアップをリターンできない。 <div>...</div> や空の <>...</> ラッパのような共通の親要素で囲む必要があります。 function AboutPage() { return ( <> <h1>About</h1> <p>Hello there.<br />How do you do?</p> </> ); }

オンラインコンバータ https://transform.tools/html-to-jsx

classNameで指定される <img className="avatar" />

波括弧で囲むんだ変数がうめこめる return ( <h1> {user.name} </h1> ); return ( <img className="avatar" src={user.imageUrl} /> );

LWCならゲッターでやるようなことをもっと簡単に実現できる。 JSX の波括弧の中にもっと複雑な式を入れることもできます。 例えば、文字列の連結や、オブジェクト定義などができる： const user = { name: 'Hedy Lamarr', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', imageSize: 90, }; export default function Profile() { return ( <> <h1>{user.name}</h1> <img className="avatar" src={user.imageUrl} alt={'Photo of ' + user.name} style={{ width: user.imageSize, height: user.imageSize }} /> </> ); } 上記の例では、style={{}} は特別な構文ではなく、style={ } の中に オブジェクトを{}で定義して、それを埋め込んでいるだけ。 他にも条件演算子で分岐もできる <div> {isLoggedIn ? ( <AdminPanel /> ) : ( <LoginForm /> )} </div> これもおけ <div> {isLoggedIn && <AdminPanel />} </div>

JSX.Elementオブジェクト

リストの数分、JSX.Elementオブジェクトを生成し、それを埋め込むことで描画できる。 const products = [ { title: 'Cabbage', id: 1 }, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 }, ]; マップ関数でJSX.Elementオブジェクトのリストを作成する。 const listItems = products.map(product => <li key={product.id}> {product.title} </li> ); うめこむ return ( <ul>{listItems}</ul> ); LWCと同じでリストアイテムには、key属性を付与する必要があることに注意！

リストの各項目に対して一意に特定できるようにしておくことで、バインド後に、データの変更があった場合にkeyを使って特定するため

LWCと一緒 function MyButton() { function handleClick() { alert('You clicked me!'); } return ( <button onClick={handleClick}> Click me </button> ); }