react學習系列之Hello Mr World

時間 2019-12-07

標籤 react 學習系列 hello world 欄目 React 简体版

原文原文鏈接

配置篇

經過Webpack和Babel-core在開發過程當中轉換JSX/ES 2015javascript

肯定安裝了`node.js`和`npm`，而後安裝全局packages,這裏用的是淘寶的`cnpm`

cnpm install webpack browser-sync -g

建立目錄和文件

在本地項目中建立須要目錄，而且在其下面建立子目錄和文件。css

├── build
├── index.html
├── package.json
├── src
│   ├── app.js
│   ├── app.css
└── webpack.config.js

打開 package.json 文件，而且建立一個空的JSON對象：html

{

}

經過`cnpm`安裝依賴關係

cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync css-loader extract-text-webpack-plugin style-loader webpack --save-dev

cnpm install react react-dom

配置`Webpack`

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: ['./src/app.js'],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'appBundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }, {
            loader: 'babel-loader',
            exclude: /node_modules/,
            test: /\.js$/,
            query: {
                presets: ['es2015', 'react', 'stage-0'],
            },
        }]
    },
    plugins: [
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ]
};

配置`package.json`

在依賴項上插入以下代碼java

"scripts": {
    "webpack": "webpack --watch",
    "server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"build/**/*.css\" \"build/**/*.js\" "
},

運行`Webpack`和`server`

在你項目根目錄下運行下面的 cnpm 命令：node

cnpm run webpack

同時打開另外一個命令窗口運行下面的 cnpm 命令：react

cnpm run server

運行這兩行命令開發的代碼就能跑起來了。webpack

若是你遵循全部的步驟操做，而且沒有出錯的話，那麼Browsersync應該會打開瀏覽器在 http://localhost:4000 這個地址上加載 index.html 和 app.js 。Webpack和Browsersync會運行所作的修改。web

至此，就能夠看到跑起來的頁面，能夠開始愉快的寫代碼啦算法

開發篇

配置index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./build/appBundle.js"></script>
</body>
</html>

配置app.js

import React from 'react';
import ReactDOM from 'react-dom';

var Hello = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
  render: function() {
    return <div style={{color: 'red'}}>Hello {this.props.title} {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" title="Mr"/>,
  document.getElementById('app')
);

基本概念

ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。typescript
HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它容許 HTML 與 JavaScript 的混寫，JSX和typescript同樣，都是語法糖。遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員
變量 Hello 是一個組件類。模板插入 <Hello /> 時，會自動生成 Hello 的一個實例。全部組件類都必須有本身的 render 方法，用於輸出組件。
注意，組件類的第一個字母必須大寫，不然會報錯，好比Hello不能寫成hello。另外，組件類只能包含一個頂層標籤，不然也會報錯。
```
var Hello = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});
```
上面代碼會報錯，由於Hello組件包含了兩個頂層標籤：h1和p。
組件的用法與原生的 HTML 標籤徹底一致，能夠任意加入屬性，好比 <Hello name="John"> ，就是 Hello 組件加入一個 name 屬性，值爲 John。組件的屬性能夠在組件類的 this.props 對象上獲取，好比 name 屬性就能夠經過 this.props.name 讀取。
添加組件屬性，有一個地方須要注意，就是 class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。
組件的屬性能夠接受任意值，字符串、對象、函數等等均可以。有時，咱們須要一種機制，驗證別人使用組件時，提供的參數是否符合要求。組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求.上圖代碼PropTypes 告訴 React，這個 title 屬性是必須的，並且它的值必須是字符串。若是通不過驗證，會報錯
getDefaultProps 方法能夠用來設置組件屬性的默認值。組件類實例裏聲明的屬性優先級比這個高
```
getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  }
```
組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現。