React基礎

Reactを勉強するにあたり、コンポーネントなどの理解を深めるため
アウトプットをするため記事を書く。

Hello World

いつものやつ

//コード１
ReactDom.render(
    <h1>Hello,world!</h1>,
    document.getElementById('root')
  );

JSXの導入

JSXとはReactでアプリケーションを作るためのJavaScript文法の一つ。
JSXはBabelというJSXコンパイラというソフトウェアを使って、ブラウザに配信する前に
JavaScriptに変換される。

例えば、nameという変数を宣言して、それを中括弧に囲んでJSX内で使用している。
以下では、nameという変数をelementの中に埋め込んでいる。
そして、ReactDOM.renderで呼び出し、htmlのid=rootの要素に格納される。
JSX の記法としては2行目のようにタグを含めて宣言することができる。

//コード２
const name = 'React Taro';
const element = <h1>Hello,{name}</h1>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

※注意1：ReactDOM.renderの第一引数の値はひとまとまりにしなければならない。

例えば


//コード３
ReactDOM.render(
    <h1>a</h1>
    <h2>b</h2>
    ,document.getElementById('root')
);

のように複数の要素を持つのは禁止されている。
コード３は以下のように変更すればよい。


//コード４
ReactDOM.render(
    <div>
        <h1>a</h1>
        <h2>b</h2>
    </div>
    ,document.getElementById('root')

JSX はif文やfor文も使うことができる。

//コード５
function getHello(user) {
  if(user){
      return <h1>Hello, {user}!</h1>;
  }
  return <h1>Hello, Guest!</h1>;
}

注意２:JSXでの閉じタグがないタグ

例えば、imgタグがある。

<img src="user_image.png">

この場合JSXでは閉じタグが必須なため以下のようになる。

<img src={user.imageURL} />

というように最後に「/」をつける必要がある。

インジェクション攻撃を防ぐ

インジェクション攻撃とは

インジェクション攻撃は

攻撃者がサーバーに、データベースを操作するSQL文やコマンド、JavaScriptといったスクリプト文などを送って、想定外の動作をさせる攻撃を指す。
防止

ReactDOMはJSXに埋め込まれた値をレンダリングされ表示される前にエスケープ処理します。

ここでエスケープ処理とは、プログラミング言語などの文字列、すなわち特別な意味を持つ文字や記号を
別の文字に置き換えることで悪意のあるユーザーからのアクセスに対処する処理である。

注意３

JSXはキャメルケースの命令規則を使用しているのでHTMLとは
少し違った属性名となっている。

例えばclass => classNameに置き換わっています。

Babelの挙動

BabelはJSXをReact.createElement()の呼び出しに変換する。
React.createElement()はバグの混入を防止する。

React基礎①