当前位置:首页 > React

linux 下如何安装react

2026-03-10 14:16:36React

安装 Node.js 和 npm

React 需要 Node.js 环境,通过 Node.js 的包管理器 npm 或 yarn 安装。在 Linux 系统中,可以通过以下命令安装 Node.js 和 npm:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

安装完成后,验证 Node.js 和 npm 版本:

node -v
npm -v

使用 create-react-app 创建项目

create-react-app 是官方推荐的脚手架工具,用于快速初始化 React 项目。运行以下命令安装并创建项目:

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

npx 会自动下载最新版本的 create-react-app,生成项目后进入目录并启动开发服务器。

linux 下如何安装react

使用 Yarn 替代 npm(可选)

Yarn 是另一个流行的包管理工具,安装方式如下:

sudo npm install -g yarn
yarn create react-app my-react-app
cd my-react-app
yarn start

手动配置 Webpack 和 Babel(高级)

如果需要自定义配置,可以手动设置 Webpack 和 Babel:

linux 下如何安装react

  1. 初始化项目并安装依赖:

    mkdir my-react-app
    cd my-react-app
    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
  2. 创建 webpack.config.js

    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
              },
            },
          },
        ],
      },
    };
  3. 创建 src/index.jspublic/index.html,运行 npx webpack 打包项目。

安装开发工具扩展

为提升开发效率,可以安装 React Developer Tools 浏览器扩展。在 Chrome 或 Firefox 扩展商店搜索并安装。

标签: linuxreact
分享给朋友:

相关文章

react native 如何

react native 如何

React Native 开发基础 React Native 是一个用于构建跨平台移动应用的框架,允许开发者使用 JavaScript 和 React 编写代码,同时生成原生 iOS 和 Androi…

react如何部署

react如何部署

部署 React 应用的常见方法 使用静态服务器部署 React 应用在构建后会生成静态文件,可以直接通过静态服务器部署。常用的静态服务器包括 Nginx、Apache 等。 运行构建命令生成静态文…

react如何收录

react如何收录

React 收录方法 React 的收录主要涉及搜索引擎优化(SEO)和预渲染技术。由于 React 是单页应用(SPA),默认情况下内容由 JavaScript 动态生成,可能导致搜索引擎爬虫难以收…

react如何diff

react如何diff

React Diff 算法原理 React 的 Diff 算法是 Virtual DOM 的核心部分,用于高效更新真实 DOM。其核心思想是通过对比新旧 Virtual DOM 树的差异,最小化 DO…

react如何动画

react如何动画

React 动画实现方法 React 中实现动画可以通过多种方式,包括原生 CSS、第三方库或 React 内置的动画解决方案。以下是几种常见方法: 使用 CSS 动画和过渡 通过 CSS 的 tr…

react 如何debug

react 如何debug

React 调试方法 使用 React Developer Tools React Developer Tools 是浏览器扩展,支持 Chrome 和 Firefox。安装后,可以在开发者工具中查看…