React メモ

React.js

Reactの導入とメモ

環境構築

まずはNode.jsのインストール
次にnpmのインストール(yarnを使いたければインストール)

npmの場合
//Reactのプロジェクト作成　
$ npx create-react-app 作成したいディレクトリ名

yarnの場合
//Reactインストール 
$ yarn global add create-react-app
//Reactのプロジェクト作成
$ create-react-app 作成したいディレクトリ名

//yarnで起動
$yarn start
//npmで起動
$npm start

1. React.jsとは

Facebook社が公開したUI構築のためのjsライブラリ
全てのReactコンポーネントは、自己のprops に対して純関数のように振る舞わねばならない

2.JSXとは

React.createElement関数
javaScriptの機能を全て備えた構文の拡張の為テンプレート言語とは異なる
ReactDOMはHTMLの属性ではなくキャメルケース (camelCase) のプロパティ命名規則を使用
※class→className

class App extends React.Component{
  render() {
  //jsを書ける範囲
    return (
       <div>  { '中括弧内ならjsを書ける' } </div>
    );
  }
}

利点
インジェクション攻撃を防ぐ
jQueryと比べてDOMの管理が楽になる

3.props

properties(プロパティ)の略称
財産、性質と言う意味を持つ

読み取り専用で外部から注入される変数の事

4.stat　

状態と言う意味を持つ

props に似ているが、コンポーネントによって完全に管理されるプライベートなもの
そのコンポーネントが内部的に持っている状態のことで外部から注入できない

//こんにちは と表示されるコード
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ‘こんにちは’};
  }

  render() {
    return (
        <div>
          <h1>{ this.state.name }</h1>
      </div>
    );
  }
}

5.Redux

ReactJSが扱うUIのstate(状態)を管理をするためのフレームワーク
ReduxはFluxの概念を拡張してより扱いやすく設計されもの

Reduxの基本設計3つの原則

• Single source of truth アプリケーション内でStoreは1つのみとし、Stateは単独のオブジェクトとしてStoreに保持される
• State is read-only Stateを直接変更することはできず、actionをStoreへdispatchすることでしかStateは変更できない。
• Mutations are written as pure functions Stateを変更する関数(Reducer)はpureな関数にする

6. hooks

コンポーネントの中で呼び出されるHooksは
いつなんどきでも必ず同じ順番で同じ回数呼び出されること