學習 React.js：用 React.js 和 Flux 創建一個簡單的購物車

Creating A Simple Shopping Cart with React.js and Flux

Ken Wheeler (@ken_wheeler)

簡介

歡迎來到學習 React 的第四章這也是最後一章！到現在，我們已經學習了怎樣利用 React 的 API 來創建狀態型組件，如何應用它們，以及如何運用臉書的 Flux 架構來工作的

今天我們將把所有的這一切放到一塊，來創建一個簡單的購物車應用。在現在的電商網站上，產品的詳細頁面相互依賴，而 React 有助於簡化並有效的組織它們。

如果你還沒準備好，我強烈建議你看看這個學習系列前面的三篇文章:

ReactJS 0.12

在寫這系列文章的時候，React 的 0.12 版發布了，而且還有不少變化。這篇教程將會用 0.12 的語法來寫。這些改變包括以下這些：

  • 用 JSX 語法的時候不再需要 /** @jsx React.DOM */ 頭聲明了
  • renderComponent 改成 render
  • renderComponentToString 改成 renderToString

你可以在官方的博客的更新日志了解更多的改变。

開始

我們搭建一個應用的第一步是首先確定我們應該做什麼。我們需要這樣：

  • 顯示有幾個選項的產品
  • 價格隨著不同選擇改變
  • 追加物品到購物車
  • 從購物車移除物品
  • 顯示在購物車中商品個數
  • 顯示在購物車中商品總價
  • 根據選項顯示每種商品的小結
  • 當沒有庫存的時候，把"放到購物車"改成"售罄”
  • 點擊"查看購物車"之後跳轉購物車頁面

下面是完成圖：

這個應用將用純客戶端開發，原因是我不打算寫服務端。我們將會用模擬 API 以及模擬數據，這樣，我們可以集中在組件上面。下面來看看我們的目錄結構：

目錄結構

<!-- lang: js -->
css/
---- app.css
img/
---- scotch-beer.png
js/
---- actions/
-------- FluxCartActions.js     // Our app‘s action creators
---- components/
-------- FluxCart.react.js      // Cart Component
-------- FluxCartApp.react.js   // Main Controller View
-------- FluxProduct.react.js   // Product Component
---- constants/
-------- FluxCartConstants.js   // Our app‘s action constants
---- dispatcher/
-------- AppDispatcher.js       // Our app‘s dispatcher
---- stores/
-------- CartStore.js           // Cart Store
-------- ProductStore.js            // Product Store
---- utils/
-------- CartAPI.js             // Mock API
---- app.js                     // Main app.js file
---- ProductData.js             // Mock Data
index.html
package.json

下面，來看看我們的 package.json 文件。我們會用到下面這些模塊：

  • Browserify
  • Reactify
  • React
  • Flux
  • Watchify
  • Uglify
  • Underscore
  • Envify

我們可以直接執行 npm install 來安裝所有的依賴項，然後執行 npm start 指令來啟動進程，監控我們的工程以及當我們保存修改的時候進行打包。

package.json

<!-- lang: js -->
{
  "name": "flux-pricing",
  "version": "0.0.1",
  "description": "Pricing component with flux",
  "main": "js/app.js",
  "dependencies": {
    "flux": "^2.0.0",
    "react": "^0.12.0",
    "underscore": "^1.7.0"
  },
  "devDependencies": {
    "browserify": "~6.2.0",
    "envify": "~3.0.0",
    "react": "^0.12.0",
    "reactify": "^0.15",
    "watchify": "~2.1.0"
  },
  "scripts": {
    "start": "watchify -o js/bundle.js -v -d .",
    "build": "browserify . | uglifyjs -cm > js/bundle.min.js"
  },
  "author": "Ken Wheeler",
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  }
}

API & 模擬數據

為了保持我們可以專注在 Flux & React 上，我們將使用模擬 API 和模擬數據來演示我們的工程。也就是說，雖然數據是假的，但是 API 本身是和真正的 API 一致的，當我們需要用真的 API 的時候，可以很容易的就遷移過去。

讓我們來看看模擬的產品數據是怎樣的：

ProductData.js

<!-- lang: js -->
module.exports = {
  // Load Mock Product Data Into localStorage
  init: function() {
    localStorage.clear();
    localStorage.setItem(‘product‘, JSON.stringify([
      {
        id: ‘0011001‘,
        name: ‘Scotch.io Signature Lager‘,
        image: ‘scotch-beer.png‘,
        description: ‘The finest lager money can buy. Hints of keyboard aerosol, with a whiff of iKlear wipes on the nose. If you pass out while drinking this beverage, Chris Sevilleja personally tucks you in.‘,
        variants: [
          {
            sku: ‘123123‘,
            type: ‘40oz Bottle‘,
            price: 4.99,
            inventory: 1

          },
          {
            sku: ‘123124‘,
            type: ‘6 Pack‘,
            price: 12.99,
            inventory: 5
          },
          {
            sku: ‘1231235‘,
            type: ‘30 Pack‘,
            price: 19.99,
            inventory: 3
          }
        ]
      }
    ]));
  }

};

就像你看到的那樣，我們定義了一個產品，它有個叫做 variants 的選項。我們的 schema 還反映了數據的類型，你可以通過簡單的調用一個 RESTful API 來拿到數據。我們準備把這個數據放到 localStorage，這樣我們的模擬 API 可以拿到並且在我們的應用中使用它們。

來看我們的模擬 API 是怎樣從 localStorage 獲取數據的，然後又是怎樣用 Flux action 把這些數據發送到我們的 ProductStore 中的 ：

CartAPI.js

<!-- lang: js -->
var FluxCartActions = require(‘../actions/FluxCartActions‘);

module.exports = {

  // Load mock product data from localStorage into ProductStore via Action
  getProductData: function() {
    var data = JSON.parse(localStorage.getItem(‘product‘));
    FluxCartActions.receiveProduct(data);
  }

};

好了，現在我們又了我們的樣本產品數據，有了樣本 API，我們該怎樣 利用它們開始我們的應用。

要初始化我們的數據，啟動我們的 API 調用，然後掛載我們的 controller view 真的是非常簡單。我們的 app.js 文件，如下，是用來處理這個流程的：

app.js

<!-- lang: js -->
window.React = require(‘react‘);
var ProductData = require(‘./ProductData‘);
var CartAPI = require(‘./utils/CartAPI‘)
var FluxCartApp = require(‘./components/FluxCartApp.react‘);

// Load Mock Product Data into localStorage
ProductData.init();

// Load Mock API Call
CartAPI.getProductData();

// Render FluxCartApp Controller View
React.render(
  <FluxCartApp />,
  document.getElementById(‘flux-cart‘)
);

Dispatcher

因為我們這個應用要用到 Flux ，我們需要創建我們自己的臉書 Dispatcher 庫。我們還要添加一個 handleAction 幫助方法到我們的 Dispatcher 實例，這樣才我們可以確定 action 的來源。

雖然我們當前的應用沒有明確要求這樣做，但是如果我們想把它掛到真正 API 上，或者處理一些從 View 以外來的動作的話，這將是極好的一個解決方法。

AppDispatcher.js

<!-- lang: js -->
var Dispatcher = require(‘flux‘).Dispatcher;

// Create dispatcher instance
var AppDispatcher = new Dispatcher();

// Convenience method to handle dispatch requests
AppDispatcher.handleAction = function(action) {
  this.dispatch({
    source: ‘VIEW_ACTION‘,
    action: action
  });
}

module.exports = AppDispatcher;

在我們的 handleAction 方法裏面，我們從 action creator 接收到一個 action，然後我們的的 Dispatcher 把 action 和一個 source 屬性一起推送出去，這樣 action 就像一個參數一樣可以被使用了。

Actions

現在我們已經完成了依賴項目，數據和我們的 Dispatcher，現在開始來看看我們的工程的實際需求。Action 是很好的起點。讓我們先定義好 action 常量，都是應用要用到的機能：

FluxCartConstants.js

<!-- lang: js -->
var keyMirror = require(‘react/lib/keyMirror‘);

// Define action constants
module.exports = keyMirror({
  CART_ADD: null,       // Adds item to cart
  CART_REMOVE: null,    // Remove item from cart
  CART_VISIBLE: null,   // Shows or hides the cart
  SET_SELECTED: null,   // Selects a product option
  RECEIVE_DATA: null    // Loads our mock data
});

定義好我們的常量，我們需要創建實際的 action 方法。這些方法將會在我們的 視圖/組件 裏面被調用，然後告訴我們的 Dispatcher 廣播推送 action 到 Stores

action 本身包含了我們所需要的 action 常量和數據。我們的 Stores 然後會觸發更新事件，這些事件被 Controller View 監聽，這樣它們就知道什麼時候該更新狀態了。

下面，來看看我們是怎樣用 Dispatcher 的 handleAction 方法來傳遞 actionType 常量和關聯數據到 Dispatcher 的：

FluxCartActions.js

<!-- lang: js -->
var AppDispatcher = require(‘../dispatcher/AppDispatcher‘);
var FluxCartConstants = require(‘../constants/FluxCartConstants‘);

// Define actions object
var FluxCartActions = {

  // Receive inital product data
  receiveProduct: function(data) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.RECEIVE_DATA,
      data: data
    })
  },

  // Set currently selected product variation
  selectProduct: function(index) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.SELECT_PRODUCT,
      data: index
    })
  },

  // Add item to cart
  addToCart: function(sku, update) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.CART_ADD,
      sku: sku,
      update: update
    })
  },

  // Remove item from cart
  removeFromCart: function(sku) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.CART_REMOVE,
      sku: sku
    })
  },

  // Update cart visibility status
  updateCartVisible: function(cartVisible) {
    AppDispatcher.handleAction({
      actionType: FluxCartConstants.CART_VISIBLE,
      cartVisible: cartVisible
    })
  }

};

module.exports = FluxCartActions;

Stores

現在我們有了 Actions 的定義，下面該來創建 Stores 了。每個 Store 管理著應用中特定部分的狀態，因此我們將為我們的產品和購物車分別創建一個。讓我們先從 ProductStore 下手：

ProductStore.js

<!-- lang: js -->
var AppDispatcher = require(‘../dispatcher/AppDispatcher‘);
var EventEmitter = require(‘events‘).EventEmitter;
var FluxCartConstants = require(‘../constants/FluxCartConstants‘);
var _ = require(‘underscore‘);

// Define initial data points
var _product = {}, _selected = null;

// Method to load product data from mock API
function loadProductData(data) {
  _product = data[0];
  _selected = data[0].variants[0];
}

// Method to set the currently selected product variation
function setSelected(index) {
  _selected = _product.variants[index];
}

// Extend ProductStore with EventEmitter to add eventing capabilities
var ProductStore = _.extend({}, EventEmitter.prototype, {

  // Return Product data
  getProduct: function() {
    return _product;
  },

  // Return selected Product
  getSelected: function(){
    return _selected;
  },

  // Emit Change event
  emitChange: function() {
    this.emit(‘change‘);
  },

  // Add change listener
  addChangeListener: function(callback) {
    this.on(‘change‘, callback);
  },

  // Remove change listener
  removeChangeListener: function(callback) {
    this.removeListener(‘change‘, callback);
  }

});

// Register callback with AppDispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;

  switch(action.actionType) {

    // Respond to RECEIVE_DATA action
    case FluxCartConstants.RECEIVE_DATA:
      loadProductData(action.data);
      break;

    // Respond to SELECT_PRODUCT action
    case FluxCartConstants.SELECT_PRODUCT:
      setSelected(action.data);
      break;

    default:
      return true;
  }

  // If action was responded to, emit change event
  ProductStore.emitChange();

  return true;

});

module.exports = ProductStore;

上面，我們定義了兩個私有方法，loadProductData 和 setSelected。我們用 loadProductData 來，當然，加載我們的模擬數據到 _product 對象。我們的 setSelected 方法用來設置當前選中的產品。

我們用方法 getProduct 和 getSelected 來暴露數據，返回它們各自當前內部數據。在 View 裏面，用 require 我們的 Store 之後，這些方法就可以被利用了。

最後，我們註冊一個囘調到我們的 AppDispatcher ，用 switch 來匹配檢查是否拿到的 action 是我們支持的種類。在它的事件中，我們調用私有方法拿到 action 的數據，然後激活 change 事件，強制我們的 view 用新的狀態刷新。

下面，我們開始做我們的 CartStore：

<!-- lang: js -->
var AppDispatcher = require(‘../dispatcher/AppDispatcher‘);
var EventEmitter = require(‘events‘).EventEmitter;
var FluxCartConstants = require(‘../constants/FluxCartConstants‘);
var _ = require(‘underscore‘);

// Define initial data points
var _products = {}, _cartVisible = false;

// Add product to cart
function add(sku, update) {
  update.quantity = sku in _products ? _products[sku].quantity + 1 : 1;
  _products[sku] = _.extend({}, _products[sku], update)
}

// Set cart visibility
function setCartVisible(cartVisible) {
  _cartVisible = cartVisible;
}

// Remove item from cart
function removeItem(sku) {
  delete _products[sku];
}

// Extend Cart Store with EventEmitter to add eventing capabilities
var CartStore = _.extend({}, EventEmitter.prototype, {

  // Return cart items
  getCartItems: function() {
    return _products;
  },

  // Return # of items in cart
  getCartCount: function() {
    return Object.keys(_products).length;
  },

  // Return cart cost total
  getCartTotal: function() {
    var total = 0;
    for(product in _products){
      if(_products.hasOwnProperty(product)){
        total += _products[product].price * _products[product].quantity;
      }
    }
    return total.toFixed(2);
  },

  // Return cart visibility state
  getCartVisible: function() {
    return _cartVisible;
  },

  // Emit Change event
  emitChange: function() {
    this.emit(‘change‘);
  },

  // Add change listener
  addChangeListener: function(callback) {
    this.on(‘change‘, callback);
  },

  // Remove change listener
  removeChangeListener: function(callback) {
    this.removeListener(‘change‘, callback);
  }

});

// Register callback with AppDispatcher
AppDispatcher.register(function(payload) {
  var action = payload.action;
  var text;

  switch(action.actionType) {

    // Respond to CART_ADD action
    case FluxCartConstants.CART_ADD:
      add(action.sku, action.update);
      break;

    // Respond to CART_VISIBLE action
    case FluxCartConstants.CART_VISIBLE:
      setCartVisible(action.cartVisible);
      break;

    // Respond to CART_REMOVE action
    case FluxCartConstants.CART_REMOVE:
      removeItem(action.sku);
      break;

    default:
      return true;
  }

  // If action was responded to, emit change event
  CartStore.emitChange();

  return true;

});

module.exports = CartStore;

如你所見，我們的這個 store 和 ProductStore 很像。我們用 _products 對象來存儲當前在購物車中的產品，用 _cartVisibility 來標記我們的購物車是否可見。

我們再添加了一些複雜的公共方法，允許我們的 Controller View 來處理應用的狀態:

  • getCartItems 返回購物車中的物品
  • getCartCount 返回購物車中的物品總件數
  • getCartTotal 返回購物車中的物品總價格

好了，Store 就是這樣。下面開始著手寫我們的視圖。

Controller View

我們的 Controller View 是頂級組件，它監聽著我們 stores ，並且根據狀態來調用 Stores 的公用方法。然後會通過 props 來把 state 傳給子控件。

Controller View 主要負責：

  • 通過調用 Store 的公用方法設置我們應用的狀態
  • 通過 props 屬性將 state 傳遞給子控件，操作子控件
  • 監聽 Store 的更新事件

FluxCartApp.react.js

<!-- lang: js -->
var React = require(‘react‘);
var CartStore = require(‘../stores/CartStore‘);
var ProductStore = require(‘../stores/ProductStore‘);
var FluxProduct = require(‘./FluxProduct.react‘);
var FluxCart = require(‘./FluxCart.react‘);

// Method to retrieve state from Stores
function getCartState() {
  return {
    product: ProductStore.getProduct(),
    selectedProduct: ProductStore.getSelected(),
    cartItems: CartStore.getCartItems(),
    cartCount: CartStore.getCartCount(),
    cartTotal: CartStore.getCartTotal(),
    cartVisible: CartStore.getCartVisible()
  };
}

// Define main Controller View
var FluxCartApp = React.createClass({

  // Get initial state from stores
  getInitialState: function() {
    return getCartState();
  },

  // Add change listeners to stores
  componentDidMount: function() {
    ProductStore.addChangeListener(this._onChange);
    CartStore.addChangeListener(this._onChange);
  },

  // Remove change listers from stores
  componentWillUnmount: function() {
    ProductStore.removeChangeListener(this._onChange);
    CartStore.removeChangeListener(this._onChange);
  },

  // Render our child components, passing state via props
  render: function() {
    return (
      <div className="flux-cart-app">
        <FluxCart products={this.state.cartItems} count={this.state.cartCount} total={this.state.cartTotal} visible={this.state.cartVisible} />
        <FluxProduct product={this.state.product} cartitems={this.state.cartItems} selected={this.state.selectedProduct} />
      </div>
    );
  },

  // Method to setState based upon Store changes
  _onChange: function() {
    this.setState(getCartState());
  }

});

module.exports = FluxCartApp;

我們從公有方法 getCartState 開始。我們用這個方法來調用 Stores 的共有方法，接收當前狀態然後設置應用的狀態。我們在 getInitialState 方法中執行第一次，然後在每次接收到 Store 的更新事件時也執行。

為了接收到這些更新事件，我們在加載的時候，往 Stores 追加監聽，這樣就可以知道什麼時候發生改變。同樣，在卸載組件的時候把這些事件移除。

在我們的 render 方法中，我們組合 FluxCart 和 FluxProduct 兩個組件。在這裏，我們把 state 狀態傳給它們，通過組件的屬性或者 props。

Product View

接下來，開始美化我們的應用了，來看 Product View。我們希望用從 Controller View 拿到的狀態，做一個超級豐富的，有良好交互的產品展示。

那麽開始

FluxProduct.react.js

<!-- lang: js -->
var React = require(‘react‘);
var FluxCartActions = require(‘../actions/FluxCartActions‘);

// Flux product view
var FluxProduct = React.createClass({

  // Add item to cart via Actions
  addToCart: function(event){
    var sku = this.props.selected.sku;
    var update = {
      name: this.props.product.name,
      type: this.props.selected.type,
      price: this.props.selected.price
    }
    FluxCartActions.addToCart(sku, update);
    FluxCartActions.updateCartVisible(true);
  },

  // Select product variation via Actions
  selectVariant: function(event){
    FluxCartActions.selectProduct(event.target.value);
  },

  // Render product View
  render: function() {
    var ats = (this.props.selected.sku in this.props.cartitems) ?
      this.props.selected.inventory - this.props.cartitems[this.props.selected.sku].quantity :
      this.props.selected.inventory;
    return (
      <div className="flux-product">
        <img src={‘img/‘ + this.props.product.image}/>
        <div className="flux-product-detail">
          <h1 className="name">{this.props.product.name}</h1>
          <p className="description">{this.props.product.description}</p>
          <p className="price">Price: ${this.props.selected.price}</p>
          <select onChange={this.selectVariant}>
            {this.props.product.variants.map(function(variant, index){
              return (
                <option key={index} value={index}>{variant.type}</option>
              )
            })}
          </select>
          <button type="button" onClick={this.addToCart} disabled={ats  > 0 ? ‘‘ : ‘disabled‘}>
            {ats > 0 ? ‘Add To Cart‘ : ‘Sold Out‘}
          </button>
        </div>
      </div>
    );
  },

});

module.exports = FluxProduct;

來看我們的 render 方法，我們定義了一個 Action，用來把組件綁到指定元素上。通過導入我們的 Action，我們可以從這個方法裏面調用它，並觸發更新處理：

  • selectProduct 設置當前選中的產品選項
  • addToCart 添加當前選中的產品到購物車，並打開購物車

在我們的 render 方法裏，我們會算一下被選中的產品還有多少庫存，通過比較我們放到購物車裏面的和庫存。我們通過這樣的計算來更新 “放到購物車” 按鈕狀態。

Cart View

購物車總得有個車把東西裝在一起吧。在我們的應用中，當一個產品被放到購物車，我們用一條數據來表示它被選中，當然你可以增加數量，但是我們不會弄幾條重複的數據。然後再把總價給算出來。

就像下面這樣：

FluxCart.react.js

<!-- lang: js -->
var React = require(‘react‘);
var FluxCartActions = require(‘../actions/FluxCartActions‘);

// Flux cart view
var FluxCart = React.createClass({

  // Hide cart via Actions
  closeCart: function(){
    FluxCartActions.updateCartVisible(false);
  },

  // Show cart via Actions
  openCart: function(){
    FluxCartActions.updateCartVisible(true);
  },

  // Remove item from Cart via Actions
  removeFromCart: function(sku){
    FluxCartActions.removeFromCart(sku);
    FluxCartActions.updateCartVisible(false);
  },

  // Render cart view
  render: function() {
    var self = this, products = this.props.products;
    return (
      <div className={"flux-cart " + (this.props.visible ? ‘active‘ : ‘‘)}>
        <div className="mini-cart">
          <button type="button" className="close-cart" onClick={this.closeCart}>×</button>
          <ul>
            {Object.keys(products).map(function(product){
              return (
                <li key={product}>
                  <h1 className="name">{products[product].name}</h1>
                  <p className="type">{products[product].type} x {products[product].quantity}</p>
                  <p className="price">${(products[product].price * products[product].quantity).toFixed(2)}</p>
                  <button type="button" className="remove-item" onClick={self.removeFromCart.bind(self, product)}>Remove</button>
                </li>
              )
            })}
          </ul>
          <span className="total">Total: ${this.props.total}</span>
        </div>
        <button type="button" className="view-cart" onClick={this.openCart} disabled={Object.keys(this.props.products).length > 0 ? "" : "disabled"}>View Cart ({this.props.count})</button>
      </div>
    );
  },

});

module.exports = FluxCart;

我們有車了！我們的購物車組件有三個方法：

  • closeCart 關閉購物車
  • openCart 打開購物車
  • removeFromCart 從購物車中拿掉

當渲染我們的購物車的時候，我們用 map 方法來渲染我們的每條數據。注意 <li> 標籤，我們添加了 key 屬性。這是一個特殊的屬性，在動態追加子節點到組件上的時候。在 React 內部是唯一標識，這樣它們就可以保持它們正確的狀態和順序了。如果我們刪除掉這個屬性，打開你的控制檯，你會看到 React 會拋出警告說，你的 key 沒有設置，你有可能在渲染的時候出異常。

為了讓我們的購物車切換打開關閉，我們要做的僅僅是通過 React 來操作 CSS，處理 active class。

總結

如果你跟著上面一步步做了，現在你可以點你的 index.html，然後你就能看到你的應用跑起來啦。要不然的話，你就直接看下面的 Demo 吧。多點幾次放到購物車，把庫存都買完，享受一下任性的快感，同時看看我們按鈕的狀態是怎樣變成售罄的，以及我們購物車的數據變化。

師傅領進門，你現在可以自己去看這個例子的遠嗎了，然後試著追加些新特效到你的購物車，比如說用 react-router 來試試看網格佈局，或者給每個產品多加幾個選項。來叉我，不要被蒼老師攔住。

這篇文章是學習 React 系列的最後一篇文章了，我希望大家看得很爽學得很爽。我堅信 2015 年將是 React 年，所以，用你從這裏學到的東西，去幹些酷酷的事情吧。

时间： 2024-10-12 16:06:05

學習 React.js：用 React.js 和 Flux 創建一個簡單的購物車的相关文章

學習 React.js：用 Node 和 React.js 創建一個實時的 Twitter 流

Build A Real-Time Twitter Stream with Node and React.js By Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第二章,該系列文章將集中在怎麼熟練並且有效的使用臉書的 React 庫上.如果你沒有看過第一章,概念和起步,我非常建議你繼續看下去之前,回去看看. 今天我們準備創建用 React 來創建一個應用,通過 Isomorphic Javascript. Iso-啥? Isomorphic. Java

學習 React.js：瞭解 Flux，React.js 的架構

Getting To Know Flux, the React.js Architecture Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第三章.今天我們將會學習臉書的 Flux 架構的工作方式,以及我們怎麼把它應該用到我們的工程中. 如果你沒有準備好,我強烈建議你回去看看這個系列的第一.第二章,Getting Started & Concepts 和 Building a Real Time Twitter Stream with Node and

學習 React.js：用 ReactJS 30 分鐘打造一個移動應用

Make a Mobile App with ReactJS in 30 Minutes Ken Wheeler (@ken_wheeler) React 能讓前端開發者以前所未有的方式來構建應用.它有許多好處:比如單向數據流,簡單的組件生命週期,聲明組件之類的. Reapp 是最近發佈的基於 React 的一個框架.它是一個專為性能和生產效率而生的移動應用平台.你可以把它看做是一個精心優化過的 UI 組件,並且帶有一套很好的編譯系統,以及許多有用工具,能讓你輕松構建你的應用. Reapp 給我

學習筆記:Linux 文件和目錄屬性及權限

1 . Linux 中的文件 1.1 文件屬性概述 在linux裡面一切皆文件!! Linux 系統中的文件或目錄的屬性主要包括:索引節點(inode).文件類型.權限屬性.鏈接數.所歸屬的用戶和用戶組.最近修改時間等內容: 下面我們看一下執行ls- lhi的結果: [[email protected] oldboy]# ls -lhi     (-h 以人可讀的檔案大小方式呈現) total 28K 394661 drwxr-xr-x. 3 root root 4.0K Jul 10 12:4

大二上學期學習生活總結

暑假的時候沒有回家,一直呆在學校學習.雖然沒能在外打工賺錢,不過卻學到了不少知識.對自己未來的付出.比賺生活費更有意義. 大一一年的學習之後,我對自身存在的不足有了進一步認識,也开始了新一波的奮鬥! [專業課] 這個學期幾乎全是專業課,包含C#.網頁設計. 操作系統.Linux.數據庫和計算機網絡. [計算機網絡]之前學過,後來期末考試的時候,感覺又忘得几乎相同了,雖然沒掛科,不過卻應該驚醒,閑了再翻翻看看. [C#]也是之前學過,在學期末的課程設計中使用SQLserver數據庫做了一個學生管理

一次測試即學習的案例

一般工程人員都知道 TDD 的使用方式,也明白 UnitTest 對於程式碼品質有著良好的保護 但比較少去探討的另一個好處應該是「學習」這件事了 雖然一般來說我們寫 Testing 其實是針對已知的事物(Business logic)去做測試與保護 比較少做未知的探索測試,但在一般有寫 Testing 情況下,還是有機會學習的 (所以還是鼓勵大家多多寫測試 ) 以下我分享一個測試即學習的案例給各位小夥伴 這個案例其實很簡單,我寫了一個 UnitTest 想要測試 EPPlus 在讀取完我建立的

老男孩老師課程學習筆記----第一階段Linux命令行總結

~相信自己,勤奮努力,不斷總結!~ 1.mkdir make directorys 創建目錄   例子: mkdir /data 在根/下創建data目錄   -p 遞歸創建目錄 例子: [[email protected] /]# mkdir -p /oldboy/test/a/b/c/d   (-p 遞歸創建目錄) [[email protected] /]# tree /oldboy/(如果tree沒有,可以yum install tree -y) /oldboy/ └── test   

Angular、React.js 和Node.js到底选谁?

为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情,但在这种情况下,对于到底应该选择哪种框架,程序员之间并没有一致的意见,每个人都有不同的想法,并且听起来都相当合理. 为了让一切归于和谐,本文就来探究一下这三大框架各自的优缺点. 基础知识部分: 在我们深入研究这三种框架的具体细节之前,先来了解一些前情提要.yigouyul22.com xucaiz

JS - The react framework

这几天因为赶时间 , 所以理解上可能有许多的误差 , 如果你不幸点进来了 , 请不要看我的代码 , 这几天我会重新修改 , 然后把错误的不足的 全部修正一下 . /hwr/src/index.js 1 import React from 'react'; 2 import ReactDOM from 'react-dom'; // Choose a file from the path 3 import Detail from './pages/Detail'; //Automatic sear