自分用メモ
随時追記していく
※参考: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 {
}
}
HTMLを記述できるのが特徴、ただし違いもある
return内に複数の要素があるとエラーになる
複数の要素がある/場合は、上のように
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を記述できる
フロントエンドは技術がコロコロ変わる?
※参考:JavaScriptとは?出来る事やライブラリについて
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とは?出来る事やライブラリについて
この記事へのトラックバックはありません。
この記事へのコメントはありません。