【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.mzph.cn/news/875157.shtml

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

相关文章

【计算机毕业设计】866校企合作管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

Git处理Failed to connect to www.google.com port 80: Timed out

Git处理Failed to connect to www.google.com port 80: Timed out 输入提交代码命令&#xff1a;git push -u origin master 报错&#xff1a;fatal: unable to access https://gitee.com/solitudeYu/gerenzhuye.git/: Failed to connect to www.google.com port 80: Timed ou…

AI数字人+城市交通大数据可视化平台,让交通管理与服务更简便、更智能

如今&#xff0c;AI数字人作为科技革命和产业革命的重要驱动力&#xff0c;AI数字人接入城市交通大数据可视化平台&#xff0c;可以有效地将各硬件与业务系统进行深度融合&#xff0c;完成业务闭环。依托AI数字人的应用&#xff0c;使城市交通大数据可视化平台的使用复杂度大幅…

我在Vscode学Java泛型(泛型设计、擦除、通配符)

Java泛型 一、泛型 Generics的意义1.1 在没有泛型的时候&#xff0c;集合如何存储数据1.2 引入泛型的好处1.3 注意事项1.3.1 泛型不支持基本数据类型1.3.2 当泛型指定类型&#xff0c;传递数据时可传入该类及其子类类型1.3.3 如果不写泛型&#xff0c;类型默认是Object 二、泛型…

Elastic 数据分层策略:为弹性及高效的实施而优化

作者&#xff1a;来自 Elastic Michael Calizo, Tim Lee 在 Elastic&#xff0c;我们大多数成功的客户实施都是从单一用例开始的&#xff0c;旨在满足特定的业务需求。Elastic 最初被采用通常是因为开发人员欣赏它提供的功能。然而&#xff0c;由于其灵活性和可定制性&#xff…

Ubuntu安装QQ教程

Ubuntu安装QQ教程 腾讯更新Linux版的QQ&#xff0c;这里安装一下&#xff1b; 首先&#xff0c;进入官网找到合适对应的安装包&#xff1b; QQLinux版本官网&#xff1a;https://im.qq.com/linuxqq/index.shtml 我们是ubuntu系统选择X86下的deb版本&#xff0c;如果是arm开…

ROS参数服务器增删改查实操C++

ROS参数服务器增删改查实操C 创建功能包参数服务器新增&#xff08;修改&#xff09;参数参数服务器获取参数参数服务器删除参数 ROS通信机制包括话题通信、服务通信和参数服务器三种通信方式&#xff0c;各原理及代码实现如下表 功能博客链接说明VScode配置 ROS 环境VScode创建…

【Vue实战教程】之Vuex状态管理详解

Vuex状态管理 1 Vuex简介 1.1 什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用了集中式存储管理应用的所有的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 简单来说&#xff0c;Vuex是一个适用于在Vue项目开发时使用的状态管理…

机器学习 | 回归算法原理——多项式回归

Hi&#xff0c;大家好&#xff0c;我是半亩花海。接着上次的最速下降法&#xff08;梯度下降法&#xff09;继续更新《白话机器学习的数学》这本书的学习笔记&#xff0c;在此分享多项式回归这一回归算法原理。本章的回归算法原理基于《基于广告费预测点击量》项目&#xff0c;…

Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习多输入单输出时间序列预测

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 步骤1: 数据准备 收集和整理历史数据。确保数据集经过适当的预处理,如归一…

【人工智能】Transformers之Pipeline(五):深度估计(depth-estimation)

目录 一、引言 二、深度估计&#xff08;depth-estimation&#xff09; 2.1 概述 2.2 技术路径 2.3 应用场景 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4.2 pipeline对象使用参数 2.4 pipeline实战 2.5 模型排名 三、总结 一、引言 pipeline&#xff08…

mysql JSON特性优化

有朋友问到&#xff0c;mysql如果要根据json中的某个属性过滤&#xff0c;数据量大的话&#xff0c;性能很差&#xff0c;要如何提高性能&#xff1f; 为什么要用json串&#xff1f; 由于一些特定场景&#xff0c;mysql需要用到json串&#xff0c;例如文档&#xff0c;不同的…

详解Stable Diffusion 原理图

参考英文文献&#xff1a;The Illustrated Stable Diffusion – Jay Alammar – Visualizing machine learning one concept at a time. 在这个Stable Diffusion模型的架构图中&#xff0c;VAE&#xff08;变分自编码器&#xff09;模型对应的是图中的 E 和 D 部分。 具体来说…

【BUG】已解决:NameError: name ‘python‘ is not defined

NameError: name ‘python‘ is not defined 目录 NameError: name ‘python‘ is not defined 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于…

深入学习STL标准模板库

C STL standard template libaray 标准模板库 目录 C STL standard template libaray 标准模板库 一、标准容器顺序容器vectordequelistvector deque list对比 容器适配器stackqueuepriority_queue 关联容器(1)无序关联容器unordered_setunordered_multisetunordered_mapunorde…

Cxx Primer-chap7

类的基本思想是数据抽象和封装&#xff0c;前者强调interface和implement分离&#xff0c;后者在此基础上&#xff0c;强调访问控制符&#xff08;存疑&#xff09;。同时类的实现者和使用者考虑的角度不同&#xff0c;前者考虑实现效率&#xff0c;后者仅需关注功能即可&#…

C++相关概念和易错语法(23)(set、仿函数的应用、pair、multiset)

1.set和map存在的意义 &#xff08;1&#xff09;set和map的底层都是二叉搜索树&#xff0c;可以达到快速排序&#xff08;当我们按照迭代器的顺序来遍历set和map&#xff0c;其实是按照中序来遍历的&#xff0c;是排过序的&#xff09;、去重、搜索的目的。 &#xff08;2&a…

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

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

arm环境下构建Flink的Docker镜像

准备工作 资源准备 按需下载 flink&#xff0c;我的是1.17.2版本。官方说1.13版本之后的安装包兼容了arm架构&#xff0c;所以直接下载就行。 如需要cdc组件&#xff0c;提前下载好。 服务器准备 可在某云上购买arm服务器&#xff0c;2c/4g即可&#xff0c;按量付费。 带宽…

谷粒商城实战笔记-43-前端基础-Vue-使用Vue脚手架进行模块化开发

文章目录 一&#xff0c;Vue的模块化开发1&#xff0c;目录结构2&#xff0c;单文件组件 (SFC)3&#xff0c;模块化路由4&#xff0c;Vuex 模块5&#xff0c;动态组件和异步组件6&#xff0c;抽象和复用7&#xff0c;构建和打包8&#xff0c;测试9&#xff0c;文档和注释10&…