当前位置:首页 > React

_前端react如何安装

2026-03-31 08:41:08React

安装React的步骤

确保已安装Node.js(建议版本12.0.0或更高),可通过终端输入node -v验证。

使用官方工具Create React App快速搭建项目,运行以下命令:

npx create-react-app my-app

my-app为自定义项目名称,安装完成后进入项目目录:

cd my-app

启动开发服务器:

npm start

默认在浏览器打开http://localhost:3000即可看到初始页面。

手动配置React(可选)

通过Webpack和Babel手动配置,适合需要自定义构建流程的场景。初始化项目并安装核心依赖:

npm init -y
npm install react react-dom

安装开发依赖:

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

创建webpack.config.js配置文件,示例内容:

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' }
      }
    ]
  }
};

使用TypeScript模板

如需TypeScript支持,创建项目时指定模板:

npx create-react-app my-app --template typescript

其他安装方式

通过CDN引入React(适用于快速原型开发):

_前端react如何安装

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

标签: react
分享给朋友:

相关文章

如何降低react版本

如何降低react版本

降低 React 项目版本的步骤 检查当前 React 版本 在项目根目录的 package.json 文件中查看 dependencies 或 devDependencies 下的 react 和…

如何开发react

如何开发react

开发React应用的基本步骤 安装Node.js和npm 确保系统中已安装Node.js(包含npm)。可通过官网下载安装包,安装后验证版本: node -v npm -v 创建React项目…

react如何重启

react如何重启

重启 React 应用的方法 重新加载当前页面 使用 window.location.reload() 强制刷新页面,这会重新加载整个应用并重置所有状态。 window.location…

vscode如何配置react

vscode如何配置react

配置 VSCode 进行 React 开发 安装必要插件 ES7+ React/Redux/React-Native snippets:提供 React 代码片段快速生成功能。 Prettier -…

react如何编码参数

react如何编码参数

编码参数的方法 在React中,编码参数通常涉及URL查询参数或路由参数的编码和解码。以下是几种常见场景的处理方法: URL查询参数编码 使用encodeURIComponent对参数进行编码,避免…

react如何遍历树

react如何遍历树

遍历树结构的常用方法 在React中遍历树结构通常采用递归或迭代的方式。树结构可以是组件树、DOM树或自定义的数据结构。以下是几种常见的实现方法。 递归组件遍历 使用递归组件可以直观地渲染树形结构。…