Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content

chinanf-boy/didact-explain

Repository files navigation

didact explain translate-svg

「 一个DIY指南 > 建立你自己的React 翻译」

中文 | english


更新 √

翻译的原文 与日期 最新更新 更多
commit ⏰ 2018 3.7 last 中文翻译

贡献

欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看

生活

help me live , live need money 💰


Didact Build Status npm version

这个存储库与系列帖子一起使用,这解释了如何从头开始逐步构建React.

动机

Didact的目标是, 通过提供相同API的更简单实现, 以及如何构建它的逐步说明,使React的内部更容易理解. 一旦你理解了React如何在内部工作,使用它将更容易.

分步指南

Medium 博文 en-翻墙 代码示例 提交 其他语言
介绍 中文
渲染DOM元素 codepen diff 中文
元素创建和JSX codepen diff 中文
虚拟DOM和对比 codepen diff diff diff 中文
组件和状态 codepen diff 中文
Fibre-递增对比 codepen diff diff 中文

用法

🚧请勿将其用于生产代码!

用npm或yarn安装:

$ yarn add didact

然后像使用React一样使用它:

/** @jsx Didact.createElement */
import Didact from 'didact';

class HelloMessage extends Didact.Component {

  constructor(props) {
    super(props);
    this.state = {
      count: 1
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    const name = this.props.name;
    const times = this.state.count;
    return (
      <div onClick={e => this.handleClick()}>
        Hello {name + "!".repeat(times)}
      </div>
    );
  }
}

Didact.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

介绍

一步一步地来, 本文只是对作者-项目-解释-的中文翻译 「英文原版需要翻墙」

我很想知道React

幸运的是,如果我们不关心性能,可调试性,可移植性等等,React的三个或四个主要特性并不是很难重写。

实际上,它们非常简单,可以用不到200行代码编写。

我们将这样做。使用相同的API在不到200行的代码中编写React的工作版本。鉴于这个图书馆的教学性质,我们将其称为Didact

>>> 最后成果 codepen.io


1. 渲染DOM元素

>> 1.Rendering-DOM-elements.md

2. 元素创建和JSX

>> 2.JSX.md

3. 实例-对比和虚拟DOM

>> 3.Virtual.md

4. 组件和状态

>> 4.Components-and-State.md

5. Fibre-递增对比

>> 5.Fibre.readme.md

演示

你好,世界
你好,世界JSX
todomvc
递增渲染,演示

执照

MIT©Hexacta

About

🇨🇳翻译: 「 Didact 」 DIY React ❤ 更新 ✔

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published