当前位置:首页 > React

react 如何执行

2026-03-30 14:25:53React

安装 React

确保系统已安装 Node.js(建议版本 12 或更高)。通过以下命令创建新的 React 应用:

npx create-react-app my-app

启动开发服务器

进入项目目录并启动开发服务器:

cd my-app
npm start

默认情况下,应用会在 http://localhost:3000 自动打开浏览器窗口。

react 如何执行

项目结构说明

主要文件及目录:

  • src/App.js: 主组件文件
  • src/index.js: 应用入口文件
  • public/index.html: 主HTML模板

编写组件

src/App.js 中修改默认组件代码:

react 如何执行

function App() {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  );
}

构建生产版本

运行构建命令生成优化后的生产代码:

npm run build

构建结果将输出到 build 目录。

高级配置

需要自定义配置时可执行:

npm run eject

注意:此操作不可逆,会暴露所有配置项。

标签: react
分享给朋友:

相关文章

react如何开发组件

react如何开发组件

React 组件开发基础 React 组件分为函数组件和类组件两种形式。函数组件是现代 React 开发的主流方式,结合 Hooks 可以实现完整功能。 函数组件示例: function Gree…

react如何查

react如何查

React 查询方法 React 提供了多种查询 DOM 元素的方式,以下是几种常见的方法: 使用 ref 通过 useRef 钩子可以获取 DOM 节点的引用,适用于直接操作 DOM 的场景。…

如何监控react性能

如何监控react性能

使用 React Profiler API React 16.5 及以上版本内置了 Profiler API,可直接测量组件渲染时间。通过 <React.Profiler> 包裹目标组件,…

如何实操react

如何实操react

安装 React 环境 使用 create-react-app 快速搭建项目: npx create-react-app my-app cd my-app npm start 项目启动后默认在…

react如何获取光标

react如何获取光标

获取光标位置的方法 在React中获取光标位置通常涉及处理输入框或文本区域的onChange或onSelect事件。以下是几种常见的方法: 通过selectionStart和selectionEnd…

react如何实现混入

react如何实现混入

在React中实现混入(Mixin)功能可以通过以下几种方式实现,React官方已不推荐使用传统的React.createClass混入方式,但可通过高阶组件或自定义Hook替代。 高阶组件(HOC…