当前位置：首页 > React

如何使用react开发app

2026-01-24 19:59:16React

安装必要的工具

确保系统已安装Node.js（建议版本14或更高），它自带npm包管理器。通过终端运行node -v和npm -v验证安装。React官方推荐使用create-react-app脚手架快速初始化项目，全局安装命令如下：

npm install -g create-react-app

创建React项目

在目标目录下执行以下命令生成新项目（如my-app为项目名）：

npx create-react-app my-app
cd my-app
npm start

此操作会自动配置Webpack、Babel等工具，并启动开发服务器。浏览器访问http://localhost:3000可查看默认页面。

项目结构解析

生成的目录包含以下核心文件：

src/index.js：应用入口文件，渲染根组件。
src/App.js：默认根组件，可在此修改主界面。
public/index.html：HTML模板，<div id="root">为React挂载点。
package.json：定义依赖项和脚本命令（如build用于生产环境打包）。

开发组件

创建自定义组件通常使用函数式组件或类组件。例如，新建src/components/Button.js：

如何使用react开发app

import React from 'react';

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

export default Button;

在App.js中引入并使用：

import Button from './components/Button';

function App() {
  const handleClick = () => alert('Clicked!');
  return <Button onClick={handleClick}>Click Me</Button>;
}

状态管理

对于简单状态，使用useState钩子。复杂场景可引入Redux或Context API。以下为useState示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

路由配置

使用react-router-dom实现多页面导航。安装后配置路由：

如何使用react开发app

npm install react-router-dom

修改src/index.js：

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

在组件中定义路由：

import { Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}