React - React、JSX、条件判定とループを使う

予測：コマンドラインツール、node、yarnの使用

• 1. React and ReactDOM
• 1. 使用方法JSX
• 1. 条件判定とループの使用

ReactとReactDOMの紹介

create-react-appを使用してReactアプリを構築します。

yarn global add create-react-app 
create-react-app my-app
cd my-app
yarn start		//httpを開く://:00/ 

VScodeで my-appを開きます。

src/index.jsの下に以下のコードを出力します。

console.log(React)
console.log(ReactDOM)

この記事では、React要素を作成するためにReact.createElement()を使用し、React要素をページにレンダリングするためにReactDOM.render()を使用するだけです。

import React from 'react'
import ReactDOM from 'react-dom'
const element = React.createElement('div',null,'hello,world');
ReactDOM.render(element, document.querySelector("#root")); //ページを見てみよう

JSXの使い方

const element = <div>hello,world,</div>	
//これは文字列でもHTMLでもない！ JSXがReact要素を生成する
//上記とは対照的に、Reactの.createElement()を使ってReact要素を作成する こちらの方が直感的だ！等しい
//Reactのウェブサイトには、JSXを推奨すると書かれているが、上記は当てはまらない。.createElementの構文的な糖分は
//を生成する際には、やはりReactを使う必要がある。.createElement

• JSXで「埋め込み式」を使う

const name = 'your name'
const element = <div>hello,{name}</div>		//正当なJavaScript式はすべて{}  

• JSXの特定のプロパティ

const name = "your name"
const element = <div className="greeting">hello</div> 
//JSX の構文はJavaScriptに近いので、小さなこぶをつけて命名した。

• JSXのサブ要素

const element = (<div> <div> </div> </div>) 
// 複数の要素が直感的でない方法でフォーマットされることがあるので、括弧で括ることに注意しよう！

React要素での条件判定とループの使用

条件判定
function Hi(){
	return <div> Hi </div>
}	// Hi はReactコンポーネントである
function Hello(){
	return <div> Hello </div>
}	// Hello はReactコンポーネントである
function Greeting(props){
	return props.greeting === 'hi'? <Hi /> : <Hello />
}	// Greeting はReactコンポーネントである
ReactDOM.render(<Greeting greeting="hi" />,document.querySelector("#root"));
//ページには
// 注：ユーザー定義コンポーネントは大文字で始まり、条件判定にはJavaScriptのifまたは条件演算子を使う。
// 条件演算子を使ってみよう Write

 
//renderを使ってJSXをレンダリングする方法は知っていると思うが、複数のJSXをループする方法は？mapを使う
function Component(props){
	return props.numbers.map((number)=><li>{number}</li>)
}
ReactDOM.render(
	<ul>
 <Component numbers={[1,2,3,4,5]} />
 </ul>,
	document.querySelector("#root")
);
//ページがulをレンダリングし、コンソールを開くとエラーメッセージが表示される。キーが追加されていない
//key本題の存在とは、ノードが変更された隣の兄弟をどう区別するかだ。どうやってキーを追加するのか？
<li key={number.toString()}> {number} </li>  

スマイリー