【React 】开发环境搭建详细指南

文章目录

    • 一、准备工作
      • 1. 安装 Node.js 和 npm
      • 2. 选择代码编辑器
    • 二、创建 React 项目
      • 1. 使用 Create React App
      • 2. 手动配置 React 项目
    • 三、集成开发工具
      • 1. ESLint 和 Prettier
      • 2. 使用 Git 进行版本控制

在现代前端开发中,React 是一个非常流行的框架,用于构建用户界面。无论你是刚刚开始学习 React,还是希望在现有项目中采用 React 技术,搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境,涵盖所需的工具和最佳实践,帮助你快速启动并顺利进行开发。

一、准备工作

1. 安装 Node.js 和 npm

Node.js 是一个 JavaScript 运行环境,npm 是 Node.js 的包管理器。它们是搭建 React 开发环境的基础工具。你可以从 Node.js 官网 下载并安装最新版本的 Node.js,安装 Node.js 后,npm 会自动安装。

安装 Node.js 和 npm 的步骤:

  1. 打开 Node.js 官网并下载最新的 LTS 版本。

  2. 根据操作系统的提示完成安装。

  3. 安装完成后,打开终端或命令提示符,输入以下命令检查安装是否成功:

    node -v
    npm -v
    

2. 选择代码编辑器

选择一个适合的代码编辑器可以大大提高开发效率。Visual Studio Code(VS Code)是目前最流行的代码编辑器之一,提供了丰富的扩展和强大的功能。你可以从 VS Code 官网 下载并安装。

二、创建 React 项目

1. 使用 Create React App

Create React App 是由 Facebook 提供的一个官方工具,旨在帮助开发者快速创建和设置 React 项目。它默认配置了很多开发所需的工具和设置,使你可以专注于编写代码。

使用 Create React App 创建项目的步骤:

  1. 打开终端或命令提示符。

  2. 输入以下命令安装 Create React App:

    npx create-react-app my-app
    

    这条命令会创建一个名为 my-app的新目录,并在其中生成初始的React 项目文件。

  3. 进入项目目录:

    cd my-app
    
  4. 启动开发服务器:

    npm start
    

    这条命令会启动本地开发服务器,并自动在默认浏览器中打开项目页面。

2. 手动配置 React 项目

如果你希望对项目的配置有更多的控制,可以选择手动配置 React 项目。这需要一些额外的步骤,但可以根据具体需求进行定制。

手动配置 React 项目的步骤:

  1. 创建一个新的项目目录并进入该目录:

    mkdir my-app
    cd my-app
    
  2. 初始化 npm 项目:

    npm init -y
    
  3. 安装 React 和 React DOM:

    npm install react react-dom
    
  4. 安装 Webpack 和 Babel 等开发工具:

    npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin
    
  5. 配置 Webpack 和 Babel:

    在项目根目录创建一个名为 webpack.config.js 的文件,并添加以下内容:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');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',},},],},plugins: [new HtmlWebpackPlugin({template: './public/index.html',}),],devServer: {contentBase: path.resolve(__dirname, 'dist'),port: 3000,},
    };
    

    在项目根目录创建一个名为 .babelrc的文件,并添加以下内容:

    {"presets": ["@babel/preset-env", "@babel/preset-react"]
    }
    
  6. 创建项目目录结构:

    mkdir src public
    touch src/index.js public/index.html
    

    public/index.html 文件中添加以下内容:

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>React App</title></head><body><div id="root"></div></body>
    </html>
    

    src/index.js 文件中添加以下内容:

    import React from 'react';
    import ReactDOM from 'react-dom';const App = () => <h1>Hello, React!</h1>;ReactDOM.render(<App />, document.getElementById('root'));
    
  7. 更新 package.json文件中的 scripts部分,添加启动开发服务器的命令:

    "scripts": {"start": "webpack serve --mode development"
    }
    
  8. 启动开发服务器:

    npm start
    

三、集成开发工具

1. ESLint 和 Prettier

ESLint 是一个静态代码分析工具,用于识别和修复代码中的问题。Prettier 是一个代码格式化工具,可以确保代码风格的一致性。

集成 ESLint 和 Prettier 的步骤:

  1. 安装 ESLint 和 Prettier 及其相关插件:

    npm install eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier
    
  2. 在项目根目录创建一个名为 .eslintrc 的文件,并添加以下内容:

    {"env": {"browser": true,"es2021": true},"extends": ["eslint:recommended","plugin:react/recommended","prettier"],"parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 12,"sourceType": "module"},"plugins": ["react","prettier"],"rules": {"prettier/prettier": "error"},"settings": {"react": {"version": "detect"}}
    }
    
  3. 在项目根目录创建一个名为 .prettierrc 的文件,并添加以下内容:

    {"singleQuote": true,"trailingComma": "all"
    }
    

2. 使用 Git 进行版本控制

Git 是一个分布式版本控制系统,广泛用于软件开发中。你可以通过 Git 进行代码管理,并使用 GitHub 等平台进行代码托管。

使用 Git 的步骤:

  1. 在项目根目录初始化 Git 仓库:

    git init
    
  2. 创建 .gitignore文件,忽略不需要版本控制的文件和目录:

    node_modules
    dist
    
  3. 提交代码:

    git add .
    git commit -m "Initial commit"
    

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3267774.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

与众不同的社交体验:Facebook的新功能与新变化

在快速变化的社交媒体领域&#xff0c;Facebook不断引入创新功能和变化&#xff0c;以满足用户日益增长的需求&#xff0c;并提供与众不同的社交体验。从增强现实到数据隐私&#xff0c;Facebook的新功能和更新正在塑造一个全新的社交平台。本文将深入探讨这些新功能和变化&…

昇思25天学习打卡营第33天|共赴算力时代

文章目录 一、平台简介二、深度学习模型2.1 处理数据集2.2 模型训练2.3 加载模型 三、共赴算力时代 一、平台简介 昇思大模型平台&#xff0c;就像是AI学习者和开发者的超级基地&#xff0c;这里不仅提供丰富的项目、模型和大模型体验&#xff0c;还有一大堆经典数据集任你挑。…

字节跳动推出端到端同声传译智能体;OpenAI 搜索引擎 SearchGPT 登场丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

2024算法、高性能计算与人工智能国际学术会议(AHPCAI 2024)

2024算法、高性能计算与人工智能国际学术会议&#xff08;AHPCAI 2024&#xff09; 2024 International Conference on Algorithms, High Performance Computing and Artificial Intelligence 2024年8月14-16日 | 中国-郑州 2024中国算力大会正在发起“算力中国最佳学术论文…

企业组织机构代码查询入口直达词令是什么?

企业组织机构代码查询入口直达词令是什么&#xff1f; 1、手机安装&#xff0c;打开词令关键词口令直达工具&#xff1b; 2、输入词令「组织机构代码查询」关键词直达口令&#xff1b; 3、搜索直达词令关联的目标企业组织机构代码查询入口&#xff1b; 4、输入营业执照上的18位…

基于DMASM镜像的DMDSC共享存储集群部署

DMv8镜像模式共享存储集群部署 环境说明 操作系统&#xff1a;centos7.6 服务器&#xff1a;2台虚拟机 达梦数据库版本&#xff1a;达梦V8 安装前准备工作 参考文档《DM8共享存储集群》-第11、12章节 参考文档《DM8_Linux服务脚本使用手册》 1、系统环境(all nodes) 1…

黄景仁,笔墨间的一抹清寒

黄景仁&#xff0c;字汉镛&#xff0c;一字仲则&#xff0c;号鹿菲子&#xff0c;生于乾隆十四年&#xff08;公元1749年&#xff09;&#xff0c;卒于乾隆四十八年&#xff08;公元1783年&#xff09;&#xff0c;享年仅35岁。他是宋代大诗人黄庭坚的后裔&#xff0c;出生于常…

【C++】初识C++基础篇·一(命名空间,函数重载,缺省参数,引用);

文章目录 前言1.输入与输出输出输入cin和scanf的对比 2.命名空间2.1namespace存在的意义2.2namespace的使用3.缺省参数4.函数重载重载函数的调用规则 5.引用 前言 我们先通过一段简单的代码来拉开C的序幕&#xff1b; //text.cpp #include<iostream> #include<stdio…

链路聚合加单臂路由

一、实验目的及拓扑 实验目的&#xff1a;在路由器及交换机之间建立链接聚合&#xff0c;交换机接入两台主机并通过路由器子接口自动分配IP地址&#xff0c;通过单臂路由实现两台主机互联 二、基本配置 1、交换机配置 [S1]vlan batch 10 20 [S1-Eth-Trunk1]dis th # interf…

matlab simulink 混合式VTOL-UAV动力学模型

1、内容简介 略 可以交流、咨询、答疑 2、内容说明 略混合式VTOL UAV是简单的将四旋翼和固定翼无人机结合在一起,不仅具备四旋翼飞行器的垂直起降,可悬停的特点,还具备固定翼飞行器的航程远,平飞速度快等特点,具有很重要的应用价值,在该飞行器布局中,四旋翼负责提供升力,工作…

《昇思25天学习打卡营第6天|ResNet50图像分类》

写在前面 从本次开始&#xff0c;接触一些上层应用。 本次通过经典的模型&#xff0c;开始本次任务。这里开始学习resnet50网络模型&#xff0c;应该也会有resnet18&#xff0c;估计18的模型速度会更快一些。 resnet 通过对论文的结论进行展示&#xff0c;说明了模型的功能&…

Ubuntu 22.04如何设置中文输入法

前言 近期整理了一下之前在ubuntu 22.04 中如何设置中文输入法的过程&#xff0c;对于本人比较适应读中文写中文来说&#xff0c;这是我安装后的第一步。 一、流程 1.1 安装中文语言包&#xff08;如果还未安装&#xff09; 首先是安装中文语言包&#xff0c;直接在终端输入…

全能Ai助手:写作到设计,宝藏神器帮你事半功倍

今天&#xff0c;就让我们一起踏上这场寻找“隐藏”宝藏的旅程&#xff0c;探索这些AI工具如何改变我们的生活&#xff01; 一、高效生产力的提升之道 1. 文案创作助手 案例&#xff1a;某位自媒体博主使用了一款智能写作工具&#xff0c;不仅大大节省了写作时间&#xff0c;…

数据库(MySQL)-视图、存储过程、触发器

一、视图 视图的定义、作用 视图是从一个或者几个基本表&#xff08;或视图&#xff09;导出的表。它与基本表不同&#xff0c;是一个虚表。但是视图只能用来查看表&#xff0c;不能做增删改查。 视图的作用&#xff1a;①简化查询 ②重写格式化数据 ③频繁访问数据库 ④过…

【React学习打卡第四天】

ReactRouter 一、概念二、创建路由开发环境三、快速开始四、抽象路由模块实际开发中的router配置 五、路由导航1.声明式导航2.编程式导航 六、路由导航传参1.searchParams 传参2.params 传参 七、嵌套路由配置八、默认二级路由九、404路由配置十、俩种路由模式 一、概念 一个路…

使用Python爬虫采集亚马逊新品榜商品数据

一、引言 1.1 亚马逊新品榜的重要性 亚马逊是全球最大的电商平台之一&#xff0c;亚马逊新品榜展示了最新上架并受欢迎的产品。对于电商卖家和市场分析师来说&#xff0c;了解这些新品榜单可以帮助他们捕捉市场趋势&#xff0c;了解消费者喜好&#xff0c;从而优化产品策略和营…

视频怎么加密?常见的四种视频加密方法和软件

视频加密是一种重要的技术手段&#xff0c;用于保护视频内容不被未经授权的用户获取、复制、修改或传播。在加密过程中&#xff0c;安企神软件作为一种专业的加密工具&#xff0c;可以发挥重要作用。 以下将详细介绍如何使用安企神软件对视频进行加密&#xff0c;并探讨视频加密…

block_size设置过大错误分析(查看CUDA设备线程块大小)

block_size设置过大错误分析&#xff08;查看CUDA设备线程块大小&#xff09; 1 问题描述2 问题分析3 解决方法4 调试和验证5 查看设备线程块大小 1 问题描述 本人作为CUDA编程初学者&#xff0c;在学习编写使用CUDA计算矩阵相乘代码时发现&#xff0c;如果我的 block_size &g…

可能是最好的工具网站

前些苏音在刷视频&#xff0c;发现了一堆好用的宝藏网站&#xff0c;这就赶快分享给大家。 工具网站 这个网站类似于网址导航&#xff0c;集合了包括工具类、资源类、软件类、AI类的合集 并且站长表示励志做体验感最好的工具网&#xff0c;聚焦最快解决用户的需求 首先就是办…