React几种基本配置方案_html/css_WEB-ITnose
对于没有使用过React的同学总觉得它复杂，但在现实中，使用React并不困难。就我个人而言，学习React应该基于创建项目特定类型的设置细节之上(比如Webpack、Redux、ES6、JSX、Babel等)，而不是一下子就去忙于理解所有的设置项。
在这篇文章中列出了有关于React方面的七种设置。大部分的设置我都将会向大家展示，但总的来说，这并不困难。接下来的内容从简单到复杂，介绍React的设置。
方法1：只使用React，不使用JSX
如果在React项目中决定不使用JSX，又想渲染HTML DOM。那么在准备写React代码之前，在你的HTML页面需要引入一个 react.js 和 react-dom.js 文件。
react.js 文件是创建React节点和组件所需要的核心文件。当你打算在一个HTML中渲染一个组件（比如DOM）还需要 react-dom.js 文件。 react-dom.js 文件依赖于 react.js 文件，所以在引入 react-dom.js 文件之前要先引入 react.js 文件。比如下面的示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>React</title> <script src="./src/js/react.js"></script> <script src="./src/js/react-dom.js"></script></head><body></body></html>
在HTML页面中使用 react.js 和 react-dom.js 文件，就可以创建React节点或组件，然后渲染成DOM。接下来创建一个名叫 HelloMessage 的React组件，并且放到
<body> <div id="app"></div> <script> var HelloMessage = React.createClass ({ displayName: "HelloMessage", render: function render () { return React.createElement("div", null, "Hello ", this.props.name); } }); ReactDOM.render(React.createElement(HelloMessage, {name: "John"}), document.getElementById("app")); </script></body>这样使用不需利用JSX或ES 2015。
方法2：通过browser.js转换JSX/ES 2015(非生产设置)
可以按前面的方式，在HTML页面中添加一个额外的脚本，允许使用JSX/ES2015。然后在客户端使用Babel来转换JSX并不是一个适于生产。在客户端运行时处理JSX/ES2015时负担很重，但对于非生产环境下在HTML中添加 browser.js 文件，可以在客户端中运行时转换JSX。
在HTML页面中使用JSX来实现前面示例中 HelloMessage 组件:
<body> <div id="app"></div> <script type="text/babel"> const HelloMessage = React.createClass({ render: function (){ return <div>Hello {this.props.name}</div>; } }); ReactDOM.render(<HelloMessage name="Jhon" />, document.getElementById("app")); </script></body>代码的转换发生了，那是因为我们引入了 browser.js 的Babel文件，并且给
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？
Mar 12, 2025 pm 04:05 PM
本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
