Need help with didact-explain?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

chinanf-boy
208 Stars 33 Forks 24 Commits 2 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 32,055
JavaScr...
Vue.js
libui
vue-tem...
23 commits

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 (

this.handleClick()}> Hello {name + "!".repeat(times)}
); } }

Didact.render( , 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.