Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
32
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

React 再入門

React 再入門

by takanorip
1 / 23

はじめに

勉強会用の資料です。
これからReactを触ってみようとしている人、最近しばらくやってなくて忘れちゃったみたいな人向けの内容になっています。
要するに超初心者向けです。


Reactとは?

  • Facebook製 JavaScript UIライブラリ
    (≠フレームワーク)
  • フレームワークのView部分を担当
  • ES2015(ES6)で記述する
  • アニメーションはあまり得意でない
    → jQueryを併用

コンポーネント指向

  • コンポーネント=UIを構成する部品
  • コンポーネントを組み合わせてページを構築
  • prop(定数)とstate(状態)を使って動的に構築

スクリーンショット 2016-09-10 23.39.49.png
赤いとこがコンポーネント


公開されているコンポーネント

Material UI(今日使うやつ)
http://www.material-ui.com/

react-toolbox
http://react-toolbox.com/


JSX

JavaScriptの中にXMLを記述するもの。
(DeNAとかPhotoshopのとは別もの)
通常はプリコンパイルが必要

render() {
  return (
    <div className="sample">こんな感じ</div>
  );
}

Virtual DOM

仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。
(mizchi)

【参考】なぜ仮想DOMという概念が俺達の魂を震えさせるのか
http://goo.gl/QxfXRg


スクリーンショット 2016-09-11 0.06.07.png


メリット

簡単でパフォーマンスが良い(Virtual DOM)
【参考】リアルなDOMは遅い、仮想DOM(React.js)は速い
http://steps.dodgson.org/b/2014/12/11/why-is-real-dom-slow/
規模が大きくなっても管理しやすい


環境構築

  • node.js
  • npm
  • webpack
  • babel

node.js

コマンドラインで動くJavaScript
http://nodejs.jp/


npm

node.jsのパッケージ管理ツール
package.jsonで管理

{
  "dependencies": {
    "material-ui": "^0.15.3",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
  },
}

webpack

jsとかを依存関係解決しつつ結合したり
分割したりしてくれる
webpack.config.jsに設定を記述

module.exports = {
  entry: __dirname + "/src/App.js",
  output: {
    path: __dirname + "/dist",
    filename: "sample.js"
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: "babel",
      query: {
        presets: ["react", "es2015", "stage-0"]
      }
    }]
  }
};

babel

ES2015をコンパイルしてES5に変換してくれる
https://html5experts.jp/kyo_ago/16979/


JavascriptFatigue

でもいろいろ設定めんどくさい!


create-react-app


create-react-app

最近Facebookがリリースしたコマンド
これ一発でReactを動かすのに必要な環境を自動で構築してくれる

$ npm install -g create-react-app
$ create-react-app sample
$ cd sample
$ npm start

この後こんな感じになればビルド成功

> react-router-sample@0.0.1 start /Users/takanori/Documents/sample_project/React/react-router-sample
> react-scripts start
Starting the development server...
Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

FireShot Capture 3 - React App - http___localhost_3000_.png


実際に編集してみよう

編集するファイル

├── index.html
├── favicon.ico
├── package.json
├── src
│   ├── App.js(←ここ)
│   ├── index.js
│   ├── App.css(←ここ)
│   ├── index.css
│   └── logo.svg

おわり


付録


create-react-appの中身

  • webpack
  • webpack-dev-server
  • html-webpack-plugin
  • style-loader
  • Babel (ES6/ES2015)
  • Autoprefixer
  • ESLint

カスタマイズが必要なときは下記コマンドを実行

npm run eject
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
32
Help us understand the problem. What are the problem?