自分用メモ

随時追記していく

※参考：Progateとは？魅力や欠点、学習の順序や心得など

0.1 学習コース React Ⅰ
- 0.1.1 ①Reactに触れてみよう

1 h2です
- - 1.0.1 ③stateとイベントを学ぼう
  - 1.0.2 ④カウントアップ機能を作ろう
- 1.1 備忘録メモ

学習コース React Ⅰ

Reactはサイトの見た目を作る事ができるJavaScriptのライブラリ
ここでは「state」という、Reactの最も大事な機能を学ぶ

Progate

React 学習コース Ⅰ | Progate

https://prog-8.com/lessons/react/study/1

Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

①Reactに触れてみよう

ReactはJavaScriptのライブラリの１つ
サイトの見た目の部分を作ることが出来る
Facebook、Airbnb、Dropbox、Progateなどが採用してる

Reactのモバイル版である「React Native」を使うと
iOSとAndroidの両方でスマホアプリを作る事ができる

★ブラウザに表示しよう（Hello World）

class App extends React.Component`{
render(){
return (
);
}
}

「App.js」というファイルの「renderメソッド」の「return」内に
「＜h1＞Hello World＜/h1＞」と記述すると、
ブラウザに「Hello World」と表示される
今の段階では、「App.jsのreturnの中で記述する」と覚えておけばOK

ーーーーーーーーーーーーーーーーーー
②JSXを学ぼう

★JSX
Reactの、見た目を作るコードをJSXと言う
JSXは、HTMLとほぼ同じように記述できる
見出しには＜h1＞タグや＜h2タグ＞、文書には

タグや
その他

タグなど、HTMLと同様のタグが使えるようになっている

render() {
return {

h1です

h2です

pです

{/*この部分はコメントです*/}

}
}

HTMLを記述できるのが特徴、ただし違いもある
return内に複数の要素があるとエラーになる
複数の要素がある/場合は、上のように

タグで囲んで、
１つの要素にまとめること

JSXを{/* */}で囲むと、その部分はコメントになる
コメントにすると、そのJSXは表示されない
正しくコメント出来てる場合は、囲んた部分が廃炉になる

★imgタグの注意点

render(){
return (

)
}

「imgタグ」は、HTMLでは閉じタグは必要なかったが、
JSXでは閉じタグが必要になる

のように、タグの終わりにスラッシュ「/」を記述する

ーーーーーーーーーーーーーーーーーー

★Apps.jsの構成

import React from ‘react’; /*①*/
class App extends React.Component { /*②*/
render() {　/*③*/

}
}

export default App;　/*④*/

①Reactをインポート
②「React.Component」を継承するクラスの定義
③JSXを戻り値とするrenderメソッドを定義
④クラスをexport

★JSXとJS
JSXとJavaScriptは、記述する部分がはっきりと分かれている

class App extends React.Component {
render() {
return (
//ここにJSXを記載する
);
}
}

renderメソッドのreturn内のみ、JSXで記述する必要がある
JSXで記述された要素はブラウザに表示される

ーーーーーーーーーーーーーーーーーー

★JavaScriptを記述する

class App extends React.Component {
render() {
const text = ‘Hello World’;
return (
//ここにJSXを記載する
);
}
}

renderメソッドの、returnの外ならJavaScriptを記述できる