Reactには　〜.jsx　という拡張子が存在し、JavaScriptとHTMLが混ざったJavaScriptの拡張言語になります。 この.jsxとはどのような役割かというと　React"要素"を作成するのに使用します。 また、jsxを使ったほうがコードの見やすさ、HTMLライクに書けるという点からjsxの使用が推奨されています。 以下、比較 jsxを使わない場合 <code>btn.js</code> React.createElement('button',{className: 'button-red'},'click!!') jsxを使う場合 <code>ButtonRed.jsx</code> import React from 'react' const ButtonRed = () =&gt; {return (&lt;button className='button-red'&gt;click!!&lt;/button&gt;)} といった内容になります。 ちなみにjsxの場合、.jsxファイル内にて　"rafce"　と入力しタブ補完で下記のような雛形データができます。 <code>ButtonRed.jsx</code> import React from 'react' const ButtonRed = () =&gt; {return (&lt;div&gt;ButtonRed&lt;/div&gt;)} export default ButtonRed return文の中はHTMLの世界となっており、なにか変数を入れたい場合は下記のように記述します。 <code>Name.jsx</code> import React from 'react' const Name= () =&gt; { const yourName = "たなか"return (&lt;div&gt;&lt;p&gt;{yourName}です&lt;/p&gt;&lt;/div&gt;)} export default Name このように{}で囲ってあげることで、その中はJavaScriptの世界になります。 以下注意点です。 ・Reactをimportする（rafceでタブ補完をすれば雛形が出来ますので推奨） ・return文の中ではjsx記法となりclassはclassNameとする。 ・HTMLは必ず階層構造にする このJSXは必須の書き方ではないですが、コードの見やすさ、HTMLのような簡単な記述方法が好まれており、Reactでは推奨されている記述方法です。

第3回 JSXとは

[ React ] 第3回 JSXとは

SPAとは”シングルページアプリケーション”と言われるもので、第一回で記述した仮想DOMがキーとなります。 特徴 ・WEBページ全体を読み込むのは初回のみ ・WEBページ内で更新があった際はJavaScriptで更新箇所のみ変更（1部のDOMなのでページ全体を更新するわけではないので更新が早い) 上記の特徴からWEBページを操作しているユーザーのストレスがないということです。 ちなみにページ操作中に画面が切り替わり、かつURLも変更されているので画面遷移をしているのではないかと疑問に感じたことがありますが、調べてみると動的にURLを変更しているだけで、あくまでも1つのDOM上で動いています。 SPAはユーザーへのストレス軽減、UX向上に最適なものだと思います。 React以外にもVueでもSPAが使用できるので気になった方はぜひ調べてみてください。

第二回 SPAとは

[ React ] 第二回 SPAとは

Reactとはfacebook社によって作られたjavascriptの代表的なライブラリです。 （私は当初フレームワークと思っていました。） UI（ボタンやフォント、背景画像などWEBサイト上で目にする全てのもの。）の作成に優れており、HTML要素のようなコンポーネントを作成し、再利用ができ、素早くUIを作成できます。 特筆すべき点は、Reactにはpropsやstateという機能が存在し、データの保存や処理が容易です。 また、仮想DOMを採用しておりページの表示速度がとても早いです。 情報を受け取った際にまずはバーチャルなDOMに情報を反映し、その後、バーチャルなDOMと本来のDOMの差分、変更された部分のみを同期することで、無駄のないページ読み込みをすることが出来ます。 私自身、これらの恩恵を受けたいと思いReactの学習に励んでおります。

Reactとはどんなものなのか知っていきましょう。

Learn

記事一覧