react 事始めして見る.

環境設定して見る

https://www.to-r.net/media/react-tutorial12/

を見ながらやっていく.

# プロジェクトの作成

$ create-react-app start-react

Success! Created start-react at /Users/shuzon/work/tech/react/start-react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd start-react
  npm start

Happy hacking!

プロジェクトが生成された.

サーバを立ち上げて見る

npm start を実行することでローカルサーバが立ち上がる.

スクショはこんな感じ

<h1 className="App-title">ようこそReactへ</h1>

試しに, <h1>を追加して見た.

追加された.

コンポーネントを忖度してみる

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
            <h1 className="App-title">ようこそReactへ</h1>
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

Component は render 関数を持つ.
戻り値としてjsx記法でhtmlを書いていく.

jsx記法

jsxはjava scriptの中にHTMLタグをかけるようにする文法拡張である.

上記のサンプルコードでは <img src={logo} className="App-logo" alt="logo" />のうち,
{logo}がjsx記法に該当する.

javascriptのコード展開ができるため, 生成するhtmlを柔軟に変更できる.

今回はここまで.