翻譯 Meteor React 製做 Todos - 02 - 組件

時間 2019-12-05

標籤翻譯 meteor react 製做 todos 組件欄目 React 简体版

原文原文鏈接

在 React 組件中定義視圖

在開始編寫React視圖庫以前，要先添加react包，這個包囊括了你在Meteor應用中開始運行React所須要全部東西。這個React庫本身能夠自動將jsx文件編譯，而且經過ReactMeteorData的mixin加載數據。咱們將會在接下來的步驟中看到如何使用全部的這些東西。javascript

打開一個新的終端，在你運行Meteor程序相同的文件夾下運行這樣一條命令：css

meteor add react

替換啓動代碼

爲了啓動，咱們來替換掉默認的啓動應用的代碼，接下來咱們會討論這是什麼意思html

首先，替換掉最開始的名爲simple-todos-react.html的HTML文件內容。java

<head>
  <title>Todo List</title>
</head>
 
<body>
  <div id="render-target"></div>
</body>

而後, 刪除simple-todos-react.js並創建三個新的文件react

新建 simple-todos-react.jsx文件寫入這些內容git

if (Meteor.isClient) {
  // 下面的代碼最會在客戶端運行
 
  Meteor.startup(function () {
    // 在頁面加載完成以後，使用 Meteor.startup 來渲染 React 組件
    React.render(<App />, document.getElementById("render-target"));
  });
}

新建App.jsx文件，並寫入如下內容：es6

// 不要在App前面添加 var
App = React.createClass({
  getTasks() {
    return [
      { _id: 1, text: "This is task 1" },
      { _id: 2, text: "This is task 2" },
      { _id: 3, text: "This is task 3" }
    ];
  },
 
  renderTasks() {
    return this.getTasks().map((task) => {
      return <Task key={task._id} task={task} />;
    });
  },
 
  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
 
        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
});

新建Task.jsx文件，並寫入github

// Task 組件 - 表示單個的待作事宜
Task = React.createClass({
  propTypes: {
    // 這個組件從React的prop中接受task並顯示
    // 咱們使用propTypes來表示這個屬性是必須的
    task: React.PropTypes.object.isRequired
  },
  render() {
    return (
      <li>{this.props.task.text}</li>
    );
  }
});

咱們剛剛在應用中添加的三個事情分別是如下的意思：瀏覽器

一個 App React組件sass
一個 Task React組件
一些包裹在 if (Meteor.isClient) { ... } 中的代碼, 這些代碼定義了在瀏覽器中會被執行，還有Meteor.startup, 這個讓程序知道頁面在被加載完成以後如何去調用代碼。

在教程以後，咱們會在添加和修改代碼的時候參考這些組件

看看結果

在咱們的瀏覽器中，應用將會看起來像這個樣子：

Todo List

This is task1

This is task2

This is task3

若是你的應用看起來並非這樣，請確認你的代碼和例子上的一致

HTML文件中定義靜態內容

Meteor將你的應用中的HTML文件切分並識別三個最高等級的標籤：<head>, <body>,還有<template>

每一個在 <head>標籤中的標籤被添加到已被髮送的HTML文件的head部分，<body>標籤中的全部標籤一樣是被添加到已被髮送的HTML的body部分，就像正常的html文件同樣

每個在<template>中的標籤將會被編譯成Meteor模板文件, 那些能夠被包含在HTML中，包含{{>templateName}}或者是在js中引用的Template.templateName。在本教程中，咱們並不會使用這些Meteor特性，由於咱們將會用React定義全部的這些視圖組件。

用React定義視圖組件

在React中，視圖組件是被使用React.createClass定義的。你的組件能夠有任何你想要的方法。除了幾個像是render這樣的特殊方法。組件能夠接收來自於父組件經過props屬性傳過來的數據。在這個教程中，咱們將看一看更多的一些React特性。你也能夠經過Facebook's React tutorial來學習

從JSX的render方法中獲得標記語言(markup)

在React組件中最重要的方法就是render, 這個被React調用從應該被顯示的HTML中返回內容(description)，HTML內容被叫作JSX的javascript的擴展語言所編寫。這是一種像是在javascript中寫HTML的樣子。你早就看出了一些明顯的不一樣了吧：在JSX中，你使用className屬性代替class，關於JSX一個重要的事情就是它(JSX)並非一種像是Spacebars或是Angular的模板語言 -- 它被直接編譯成常規的JavaScript文件。瞭解更多請看React docs

JSX文件可使用ES2015的新特性

若是你如今尚未嘗試過下一代JavaScript特性，一些代碼片斷可能看起來有點怪異。這是由於.jsx文件會隨着react包被編譯，同時包含一些通用的ES2015特性，即下一代JavaScript。這些特性包含了如下的：

箭頭函數:

(arg) => {return result;}

方法名簡化：

render() {...}

使用const和let替換var

你能夠閱讀ecmascript README來了解Meteor所支持的特性。想要更多關於 ECMAScript 2015 的知識能夠看看下面的幾個文章：

添加樣式

在咱們作更多的將來打算以前，先來添加一些CSS來讓咱們的頁面好看一點兒吧。

由於本教程專一於HTML和JavaScript，因此你能夠拷貝下面的代碼到simple-todos.css文件中。這是你直到本教程結束都會用到的全部CSS代碼。這個應用沒有這些CSS也能運行，可是你添加了這些CSS會更好看一點。

/* CSS 聲明在這裏 */
body {
  font-family: sans-serif;
  background-color: #315481;
  background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  background-attachment: fixed;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 0;
  margin: 0;

  font-size: 14px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100%;
  background: white;
}

header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}

#login-buttons {
  display: block;
}

h1 {
  font-size: 1.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}

form {
  margin-top: 10px;
  margin-bottom: -10px;
  position: relative;
}

.new-task input {
  box-sizing: border-box;
  padding: 10px 0;
  background: transparent;
  border: none;
  width: 100%;
  padding-right: 80px;
  font-size: 1em;
}

.new-task input:focus{
  outline: 0;
}

ul {
  margin: 0;
  padding: 0;
  background: white;
}

.delete {
  float: right;
  font-weight: bold;
  background: none;
  font-size: 1em;
  border: none;
  position: relative;
}

li {
  position: relative;
  list-style: none;
  padding: 15px;
  border-bottom: #eee solid 1px;
}

li .text {
  margin-left: 10px;
}

li.checked {
  color: #888;
}

li.checked .text {
  text-decoration: line-through;
}

li.private {
  background: #eee;
  border-color: #ddd;
}

header .hide-completed {
  float: right;
}

.toggle-private {
  margin-left: 5px;
}

@media (max-width: 600px) {
  li {
    padding: 12px 15px;
  }

  .search {
    width: 150px;
    clear: both;
  }

  .new-task input {
    padding-bottom: 5px;
  }
}

如今，你已經添加了這些CSS，這款應用應該看起來會更好一點了。切換到你的瀏覽器看看新的樣式並確認其有沒有加載成功吧~