【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://www.rhkb.cn/news/385305.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【日常记录】【插件】Typed.js:用于创建打字效果的 JavaScript 库

文章目录 1. 引言2. 安装3. 基本使用参考链接 1. 引言 Typed.js是一个用于创建打字效果的 JavaScript 库。这个效果就是 chatgpt、百度的文心一言等其他的大模型&#xff0c;回复用户的问题的时候的效果 typed-js 官网typed 案例 2. 安装 CDN方式 这俩都可以&#xff0c;还有其…

在 Windows 上安装 PostgreSQL

官网下载地址&#xff1a; https://www.enterprisedb.com/downloads/postgres-postgresql-downloadsWindows平台 官网直接提供exe安装包&#xff0c;没有手动安装的压缩包 postgresql-14.4-1-windows-x64.exe几个重要的安装选项 安装界面会指定服务程序和库两个路径&#xf…

【JavaScript】深入理解 `let`、`var` 和 `const`

文章目录 一、var 的声明与特点二、let 的声明与特点三、const 的声明与特点四、let、var 和 const 的对比五、实战示例六、最佳实践 在 JavaScript 中&#xff0c;变量声明是编程的基础&#xff0c;而 let、var 和 const 是三种常用的变量声明方式。本文将详细介绍这三种变量声…

Centos7_Minimal安装Cannot find a valid baseurl for repo: base/7/x86_6

问题 运行yum报此问题 就是没网 解决方法 修改网络信息配置文件&#xff0c;打开配置文件&#xff0c;输入命令&#xff1a; vi /etc/sysconfig/network-scripts/ifcfg-网卡名字把ONBOOTno&#xff0c;改为ONBOOTyes 重启网卡 /etc/init.d/network restart 网路通了

pycharm+pytorch+gpu开发环境搭建

一、安装anacoda 1、下载Anaconda安装包 官网下载地址 https://www.anaconda.com/distribution/ 清华镜像 Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 下载python3.8对应的版本Anaconda3-2021.04-Windows-x86_64.exe 下载完成…

PCB设计应该注意的问题

1.PCB布局与走线 论文 常见的PCB布局要点 1.放置滤波电容时遵循的的原则为&#xff1a; 放置的位置以靠近器件的引脚为最佳&#xff0c;电容的大小以从大到小以次靠近所要滤波的器件连接处&#xff0c;如一般使用的电容为10uF、1uF、0.1uF、0.01uF等&#xff0c;10倍的差额&a…

实验2-1-4 输出菱形图案

#include<stdio.h> int main(){printf(" A \n");printf("A A\n");printf(" A \n");}

C++《类和对象》(中)

一、 类的默认成员函数介绍二、构造函数 构造函数名与类同名内置类型与自定义类型析构函数拷贝构造函数 C《类和对象》(中) 一、 类的默认成员函数介绍 默认成员函数就是⽤⼾没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。 那么我们主要学习的是1&…

等级保护 总结2

网络安全等级保护解决方案的主打产品&#xff1a; HiSec Insight安全态势感知系统、 FireHunter6000沙箱、 SecoManager安全控制器、 HiSecEngine USG系列防火墙和HiSecEngine AntiDDoS防御系统。 华为HiSec Insight安全态势感知系统是基于商用大数据平台FusionInsight的A…

概率论--矩估计

目录 简介 矩估计法的基本步骤 延伸 矩估计法在大样本情况下的准确性和有效性如何评估&#xff1f; 在实际应用中&#xff0c;矩估计法的局限性有哪些具体例子&#xff1f; 如何处理矩估计法在某些情况下可能出现的不合理解或无法唯一确定参数的问题&#xff1f; …

日常开发记录分享——C#控件ToolTip实现分栏显示内容

文章目录 需求来源实现思路实施请看VCR等等别走&#xff0c;有优化 需求来源 需要在鼠标浮动到指定位置后提示出详细的信息&#xff0c;一开始使用的tooltip实现&#xff0c;但是里面的内容效果并不理想&#xff0c;需要有条理性&#xff0c;于是就想到能不能将展示的东西分列…

鸿蒙(API 12 Beta2版)【创建NDK工程】

创建NDK工程 下面通过DevEco Studio的NDK工程模板&#xff0c;来演示如何创建一个NDK工程。 说明 不同DevEco Studio版本的向导界面、模板默认参数等会有所不同&#xff0c;请根据实际工程需要&#xff0c;创建工程或修改工程参数。 通过如下两种方式&#xff0c;打开工程创…

kafka源码阅读-ReplicaStateMachine(副本状态机)解析

概述 Kafka源码包含多个模块&#xff0c;每个模块负责不同的功能。以下是一些核心模块及其功能的概述&#xff1a; 服务端源码 &#xff1a;实现Kafka Broker的核心功能&#xff0c;包括日志存储、控制器、协调器、元数据管理及状态机管理、延迟机制、消费者组管理、高并发网络…

乐鑫ESP32-H2设备联网芯片,集成多种安全功能方案,启明云端乐鑫代理商

在数字化浪潮的推动下&#xff0c;物联网正以前所未有的速度融入我们的日常生活。然而&#xff0c;随着设备的激增&#xff0c;安全问题也日益成为公众关注的焦点。 乐鑫ESP32-H2致力于为所有开发者提供高性价比的安全解决方案&#xff0c;这款芯片经过专门设计以集成多种安全…

基于微信小程序的校园二手交易平台/Java的二手交易网站/基于Javaweb校园二手商品交易系统(附源码)

摘 要 使用校园二手交易平台管理校园二手物品交易&#xff0c;不仅实现了智能化管理&#xff0c;还提高了管理员的管理效率&#xff0c;用户查询的功能也需要校园二手交易平台来提供。 设计校园二手交易平台是毕设的目标&#xff0c;校园二手交易平台是一个不断创新的系统&…

React搭建Vite项目及各种项目配置

1. 创建Vite项目 在操作系统的命令终端&#xff0c;输入以下命令&#xff1a; yarn create vite 输入完成以后输入项目名称、选择开发框架&#xff0c;选择开发语言&#xff0c;如下图所示&#xff0c;即可完成项目创建。 注意事项&#xff1a; 1. Node版本必须符合要求&…

在VMware创建Ubuntu24

目录 一、创建虚拟机 1. 自定义创建虚拟机 2. 设置虚拟机兼容 3. 选择镜像 4. 命名虚拟机&#xff0c;选择存放位置 5. 处理器配置 6. 内存配置 7. 网络类型配置 8. I/O控制器类型 9. 磁盘配置 10. 完成虚拟机创建 二、Ubuntu安装 1. 进入虚拟机中进行ubuntu的安…

20240724----安装git和配置git的环境变量/如何用命令git项目到本地idea

备注参考博客&#xff1a; 1&#xff09;可以参考博客&#xff0c;用git把项目git到本地 2&#xff09;可以参考博客vcs没有git 3)git版本更新&#xff0c;覆盖安装 &#xff08;一&#xff09;安装git &#xff08;1&#xff09;官网下载的链接 https://git-scm.com/downlo…

go-kratos 学习笔记(7) 服务发现服务间通信grpc调用

服务发现 Registry 接口分为两个&#xff0c;Registrar 为实例注册和反注册&#xff0c;Discovery 为服务实例列表获取 创建一个 Discoverer 服务间的通信使用的grpc&#xff0c;放到data层&#xff0c;实现的是从uses服务调用orders服务 app/users/internal/data.go 加入 New…

数据结构(2)

文章目录 1. 线性表的顺序表示2. 线性表的链式表示 1. 线性表的顺序表示 1. 线性表是具有相同数据类型的 n n n 个数据元素的有限序列&#xff0c;其中 n n n 为表长。 2. 线性表的顺序存储又称顺序表。它是用一组地址连续的存储单元依次存储线性表中的数据元素&#xff0c;从…