React：一个简单的入门
最近我在学习 React，虽然远称不上专家，但我很享受边学边教的过程。这不仅能帮助别人学习，还能巩固我所学的知识，并获得一些反馈，让我了解自己可能不理解的地方。由于我还在学习，我会把我以前的一个项目迁移到 React 上，我选择的项目是Material Design 的 Switch 组件。
目标是只需编写一个 HTML 标签，就能恢复一个简洁、美观且易于使用的切换开关。我将使用 JSFiddle 来演示各个步骤。
<MaterialSwitch>Toggle switch</MaterialSwitch>
设置
首先，我们先快速创建一个组件hello world!。我知道在这个简单的阶段，我们可以使用React 函数式组件而不是完整的类，但稍后我们需要使用类来访问状态，所以我们先从一个类开始。
这个类需要继承React.Component，只需要这个render()函数。函数在这里。
ReactDOM.render(<MaterialSwitch />, document.querySelector("body"))
<MaterialSwitch />你会注意到我在最后添加了这一行，在这个演示中，我们可以假装它与html 中的代码相同。
创造
现在让我们来实际考虑一下我们要创建的组件，它是一个复选框，所以我们需要；
- 标签文本
child- 复选框旁边显示的文本 - readOnly
property- 该复选框是否只读？ - 已禁用
property- 该复选框是否已禁用？ - defaultChecked
property- 加载时处于选中状态 - 已检查
state- 内部已检查状态
我想这就是我们需要的全部内容了，我这里有三个不同的标签。child子组件和属性都是从上层组件传递过来的，组件本身无法控制它们，它们只是存在而已。但是，状态可以在组件内部进行更改，这正是 React 的魅力所在。propertystate
添加状态和属性
因为我们需要使用状态，所以需要使用构造函数。使用构造函数时，必须确保props向super函数传递参数，才能保证一切正常运行。
constructor(props) {
/**
* This is the super function it ensures
* the constructor function still carries
* out it's original purpose.
*/
super(props);
/*
* Here I am setting up the default states
* I am setting "checked" to be equal to
* the property "defaultChecked"
*/
this.state = {
checked: props.defaultChecked
}
}
我们还需要从现有项目中复制 HTML 代码，但要做一些 React 方面的修改。
render() {
// This is how get our props, we could have
// done this.props.readonly for each place
// we wanted to use the props but I think
// this is easier to understand
const {children, readonly, disabled, defaultChecked } = this.props;
return (
<label className="md_switch">
<input
readonly={readonly}
disabled={disabled}
defaultChecked={defaultChecked}
type="checkbox"
/>
<span className="md_switch__toggle"></span>
{children}
</label>
)
}
在JSXHTML中，任何你想使用变量的地方，只需将变量名放在花括号内，像这样。{variable}
值得一提的是，在任何你想class向元素添加 `<a>` 的地方，你都必须使用 `<a>`className而不是标准的 `<a>`，class这是因为 ` class<a>` 是 JavaScript 中的保留字。
添加功能
我们的函数只需要在复选框的选中状态改变时更新状态即可。编写这个函数并不难，但要让它正常工作，我们还需要做一些其他工作。
/**
* Update checked on change
*
* @param {Event} event - from the changed element
*/
changeHandler(event) {
this.setState({checked: event.target.checked})
}
很简单，将 checked 状态设置为事件的 checked 参数的目标。现在让我们把它连接到HTML/ JSX。
render() {
const {children, readonly, disabled, defaultChecked } = this.props;
return (
<label class="md_switch">
<input
readonly={readonly}
disabled={disabled}
defaultChecked={defaultChecked}
onChange={this.changeHandler}
type="checkbox"
/>
<span class="md_switch__toggle"></span>
{children}
</label>
)
}
要向事件添加函数，只需添加 onEvent 标签，我们希望在更改时触发，所以我们将使用onChange（注意驼峰式命名）。
但这仍然行不通，因为在this.changeHandler上下文中this已经更改为event。为了确保上下文this仍然绑定到我们的 React 组件，我们需要在构造函数中添加以下代码行。
this.changeHandler = this.changeHandler.bind(this);
活动
最后一段JS代码需要允许组件用户使用事件，所以我们会使用`.`将事件传递回去props。由于我们已经在使用onChange事件，我们需要修改函数，以便将事件进一步传递。
/**
* Update checked on change
*
* @param {string} text
*/
changeHandler(event) {
const { onChange } = this.props;
this.setState({checked: event.target.checked});
If(typeof onChange === "function") onChange(event);
}
我onChange从 props 中获取了信息，现在我们可以将事件传递上去。我添加这个typeof函数是为了以防万一用户添加了一些奇怪的内容，或者甚至什么都没添加。
HTML/部分JSX就简单多了，我们只需要像这样传递我们的 prop 即可
render() {
const {children, readonly, disabled, defaultChecked, onInput } = this.props;
return (
<label class="md_switch">
<input
readonly={readonly}
disabled={disabled}
defaultChecked={defaultChecked}
onChange={this.changeHandler}
onInput={onInput}
type="checkbox"
/>
<span class="md_switch__toggle"></span>
{children}
</label>
)
}
造型
样式设置非常简单，只需添加我们的 CSS 代码即可。我不会详细介绍 CSS 代码，因为它与我复刻的原始帖子中的代码完全相同。代码如下。
总结
好了，我们已经完成了第一个 React 组件。它包含一个简单的标签，可以用来切换 Material Design 的样式。
让我们来看看HTML最终结果。
<div>
<MaterialSwitch>Toggle Switch</MaterialSwitch>
<br />
<MaterialSwitch defaultChecked>Pre-activated</MaterialSwitch>
<br />
<MaterialSwitch disabled>Disabled</MaterialSwitch>
<br />
<MaterialSwitch defaultChecked disabled>
Activated and disabled
</MaterialSwitch>
<br />
<MaterialSwitch>
Really really really long label
content to hopefully span several lines
to show that the checkbox will stay central.
</MaterialSwitch>
</div>
好了，就到这里，我们大功告成了，感谢阅读。如果您有任何问题、建议或者只是想聊聊天，欢迎在下方留言。再次感谢！
🦄🧠💕🦄🦄💕❤🧠💕❤
文章来源：https://dev.to/link2twenty/react-a-simple-start-3doj