只是简单的 React
概括
许多包通常与 React 一起使用来处理状态管理和路由等事务。如果您是 React 新手，尝试一次性学习所有这些内容会让您感到不知所措。让我们构建一个没有任何额外功能的简单 React 应用。
不使用 JSX 的 Hello World
大多数人在 React 中使用 JSX，但这需要 Babel，这意味着我们需要 Webpack 之类的东西。如果我们不使用 JSX，那么我们就不必担心这些。这里有一个不使用 JSX 的示例，可以帮助我们入门。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
var e = React.createElement;
ReactDOM.render(
e('h1', null, 'Hello, world!'),
document.getElementById('root')
);
</script>
</body>
</html>
React.createElement的第一个参数是元素类型（或您的自定义组件，我们稍后会看到）。第二个参数是您可以传递给该元素的属性（通常称为props）。第三个参数是子元素。在本例中，我们只会在此处显示“Hello, world!”，但我们可以在此处放置另一个元素或组件，甚至可以放置它们的列表。
将其粘贴到 html 文件中并在浏览器中打开。
如果你好奇的话，JSX 是一种语法糖，因此你可以写<h1>Hello, world!</h1>而不是React.createElement('h1', null, 'Hello, world!')。有关更多信息，请参阅不使用 JSX 的 React。
成分
React 应用程序可以拆分为组件。以下是演示组件的 TODO 应用程序的开头。
var e = React.createElement;
function TodoItem() {
return e("li", null, "Todo Item");
}
function TodoApp() {
return e("div", null, [
e("h1", { key: "title" }, "To Do List"),
e("ul", { key: "todos" }, [
e(TodoItem, { key: "item1" }),
e(TodoItem, { key: "item2" })
])
]);
}
ReactDOM.render(e(TodoApp), document.getElementById("root"));
钥匙道具有什么用处？
键是创建元素列表时必须提供的唯一字符串。您可以阅读有关 react keys 的更多信息，但我建议您暂时跳过它。
不使用 ES6 的 Class 样式组件
要获取状态和生命周期钩子，您必须使用类样式来创建组件。大多数示例都使用 ES6 类来实现这一点，但这意味着我们再次需要 Babel。为了避免这种情况，请在unpkg.com的帮助下引入create-react-class，如下所示：<script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>。这将公开一个名为createReactClass的函数，我们可以使用它来创建有状态的组件。以下是一个例子：
var TodoItem = createReactApp({
render: function() {
return e("li", null, "Todo Item");
}
});
这是一个愚蠢的例子，但我们将在下一节中更好地利用它。
查看React Without ES6文档来获取关于该主题的更多信息。
普通反应状态
某种状态库（例如 Redux）经常被引入到 React 应用程序中，这是一个需要理解的全新层面。不要假设您的应用程序需要这个。React 的内置组件状态在许多情况下就足够了。建议您将状态存储在顶级组件中，并通过 props 将其传递给子组件。这是一个演示此操作的简单 TODO 应用程序。
var e = React.createElement;
function TodoItem(props) {
return e("li", null, props.text);
}
var TodoApp = createReactClass({
getInitialState: function() {
return { items: [], text: "" };
},
handleEditInput: function(evt) {
this.setState({ text: evt.target.value });
},
handleSubmit: function(evt) {
evt.preventDefault();
if (!this.state.text.length) return;
this.setState(function(prevState) {
return {
items: prevState.items.concat({
id: Math.random() + "",
text: prevState.text
}),
text: ""
};
});
},
render: function() {
return e("div", null, [
e("h1", { key: "title" }, "To Do List"),
e("input", {
key: "input",
type: "text",
value: this.state.text,
onChange: this.handleEditInput
}),
e(
"button",
{ key: "add-todo-btn", onClick: this.handleSubmit },
"Add ToDo"
),
e(
"ul",
{ key: "todos" },
this.state.items.map(item =>
e(TodoItem, { key: item.id, text: item.text })
)
)
]);
}
});
ReactDOM.render(e(TodoApp), document.getElementById("root"));
下一步是什么？
现在，您可以构建一个功能合理的应用程序，而无需了解所有关于 JSX、Webpack、Babel、Redux 等的知识。您可能会发现您想要添加这些内容，但您不必这样做。
您现在可以采取以下步骤之一：
- 按照上述模式构建应用程序。
- 一次学习一个构建块，例如 JSX，并在此基础上扎实理解 React。
- 如果您想要所有附加功能，但又不想手动设置它们，请尝试create-react-app或NEXT.js之类的程序。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~