如何用reactjs构建一个完整的前端页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用reactjs构建一个完整的前端页面相关的知识，希望对你有一定的参考价值。
参考技术A 用reactjs构建一个完整的前端页面的步骤：准备：React 的安装包，建议去官网下载安装
1、使用 React 的网页源码，结构大致如下：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// **用户代码 **
</script>
</body>
</html>
上面代码有两个地方需要注意。
首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 javascript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
$ babel src --out-dir build
3、渲染转换成html节点，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
这里以插入hello world为例来说明
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
); 参考技术B React + Redux + RxJS
用 monad 来管理 asynchronous, store 来管理 state.
如何用字符串（ReactJS）中的空格替换并在 HTML 中呈现？
【中文标题】如何用字符串（ReactJS）中的空格替换并在 HTML 中呈现？【英文标题】：How to replace space with in a string (ReactJS) and render in HTML? 【发布时间】：2021-12-16 05:37:05 【问题描述】：<div className="mt-2 font-sidebar capitalize">
item.title
</div>
item.title 可以是任何字符串（来自后端），例如“所有产品”、“最喜欢”、“特色商品”等。
我想要一种将item.title 中的空格 替换为&nbsp; 的方法，以便在以HTML 呈现时它仍然有空格 - 这是针对特定用例的。
非常感谢您的帮助。
【问题讨论】：
使用item.title.replace时出了什么问题？
@evolutionxbox 直接打印出来。例如：所有 产品
reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
这能回答你的问题吗？ How to show html entity using React?
感谢@evolutionxbox 这有帮助！有没有更好的方法来做到这一点？
【参考方案1】：
你可以这样做：
item.title.replaceAll(' ', '\u00a0');
如果你确定只有1个空格，你可以使用replace()，所以我建议使用replaceAll()
您可以使用&nbsp; 所指的Unicode 字符（U+00A0）来代替&nbsp;：
【讨论】：
这行得通....以上是关于如何用reactjs构建一个完整的前端页面的主要内容，如果未能解决你的问题，请参考以下文章