react如何分开js和HTML

React是一个用于构建用户界面的JavaScript库，它采用了组件化的思想，使得代码分离变得非常直观。在React中，你可以将JavaScript逻辑和HTML视图分开，主要通过以下几个步骤：

1. **组件化**：React的核心是组件，每个组件都是一个小的、独立的可复用模块。通常，每个组件由两个部分组成：`JSX`（JavaScript表达式嵌入XML）负责描述UI结构，包含HTML元素和属性，而内部的`render()`函数则处理逻辑，返回渲染后的结果。

   // JSX 示例
   function HelloWorld() {
     return <h1>Hello, World!</h1>;
   }

2. **状态管理**：React通过`state`来存储组件的数据，而不是直接在HTML中硬编码数据。当状态改变时，组件会自动重新渲染，反映到DOM上。

3. ** props（属性）传递**：组件间的通信通常是通过props从父组件传给子组件，而不是通过修改它们的state。这样保持了各组件之间的解耦。

4. **外部样式表**：可以使用CSS Modules或styled-components等工具，将样式与组件逻辑分离，避免全局污染。