ProgateでReactの学習

この記事は3分で読めます

自分用メモ

随時追記していく

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

学習コース React Ⅰ

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

①Reactに触れてみよう


ReactはJavaScriptのライブラリの1つ
サイトの見た目の部分を作ることが出来る
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内に複数の要素があるとエラーになる
複数の要素がある/場合は、上のように
タグで囲んで、
1つの要素にまとめること

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を記述できる

③stateとイベントを学ぼう

④カウントアップ機能を作ろう



備忘録メモ


フロントエンドは技術がコロコロ変わる?
※参考:JavaScriptとは?出来る事やライブラリについて




  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。