翻译 Meteor React 制造 Todos - 02 - 组件

2019年8月27日 177次阅读 来源: AnnatarHe

在 React 组件中定义视图

在最先编写React视图库之前，要先增加react包，这个包席卷了你在Meteor运用中最先运转React所须要一切东西。这个React库本身能够自动将jsx文件编译，而且经由过程ReactMeteorData的mixin加载数据。我们将会在接下来的步骤中看到怎样运用一切的这些东西。

翻开一个新的终端，在你运转Meteor顺序雷同的文件夹下运转如许一条敕令：

meteor add react

替代启动代码

为了启动，我们来替代掉默许的启动运用的代码，接下来我们会议论这是什么意义

起首，替代掉最最先的名为simple-todos-react.html的HTML文件内容。

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

然后, 删除simple-todos-react.js并竖立三个新的文件

新建 simple-todos-react.jsx文件写入这些内容

if (Meteor.isClient) {
  // 下面的代码最会在客户端运转
 
  Meteor.startup(function () {
    // 在页面加载完成以后，运用 Meteor.startup 来衬着 React 组件
    React.render(<App />, document.getElementById("render-target"));
  });
}

新建App.jsx文件，并写入以下内容：

// 不要在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文件，并写入

// Task 组件 - 示意单个的待做事件
Task = React.createClass({
  propTypes: {
    // 这个组件从React的prop中吸收task并显现
    // 我们运用propTypes来示意这个属性是必需的
    task: React.PropTypes.object.isRequired
  },
  render() {
    return (
      <li>{this.props.task.text}</li>
    );
  }
});

我们刚刚在运用中增加的三个事变离别是以下的意义：

  1. 一个 App React组件

  2. 一个 Task React组件

  3. 一些包裹在 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。这些特征包括了以下的：

  1. 箭头函数:

(arg) => {return result;}

  1. 要领名简化：

render() {...}

  1. 运用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，这款运用应当看起来会更好一点了。切换到你的浏览器看看新的款式并确认其有无加载胜利吧~

增加Sass(可选)

我晓得你一定想耍Sass。嘿嘿，来增加上sass吧
meteor add fourseven:scss
只要把simple-todos-react.css更名成simple-todos-react.scss就好了

    原文作者：AnnatarHe
    原文地址: https://segmentfault.com/a/1190000003852366
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞