React入门01-从零开始快速搭建react基础开发环境

It'sMyGo

已于 2024-07-01 12:06:26 修改

阅读量960

点赞数 13

分类专栏： React入门文章标签： react npm 前端

于 2024-06-29 22:22:59 首次发布

本文链接：https://blog.csdn.net/qq_33546823/article/details/140070781

版权

React入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前期准备

电脑上已经安装Node.js,本次学习使用的Node版本为20.4.0
使用的代码编辑器为Visual Studio Code
已经具备基础的html、css和javascript知识

快速创建Raect开发环境

使用命令行工具npx快速生成项目

使用如下的命令行将会自动创建一个React项目，其中npx是Node自带的一个命令行工具，creat-react-app是一个Node包，<peoject-name>是你自己的项目名称，例如，我创建了一个名为react-demo的项目。

npx create-react-app <project-name>

直接在命令行运行：

npx create-react-app react-demo

调整项目文件

去除入门学习所不需要的文件，只保留运行所必须的文件，/<project-name>/src文件目录下只保留App.js和index.js文件。

其中index.js 中的内容如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

在 index.js文件中，首先导入必要的核心包 React 和 ReactDOM，然后导入项目的根组件APP，并将该组件渲染到 id 为 "root" 的 div 节点下。该节点定义在/<project-name>/public/index.html，和Vue挂载到id为app的div根节点上又异曲同工之妙。

根组件App.js的内容如下：

function App() {
  return (
    <div className="App">
      this is a demo
    </div>
  );
}

export default App;

这里是React的一个函数组件，整个流程如下APP→index.js→public/index.html，期望的显示效果就是屏幕左上角显示this is a demo字样。

cd <project-name>
npm run start

直接拷贝下述代码即可运行项目，首先进入项目文件夹，接着运行package.json里面定义好的宏命令。

cd react-demo
npm run start

实现效果如下：

npx知识补充

npx 是 npm 5.2.0 版本之后引入的一个工具，用于简化 Node.js 包的执行，特别是在不需要全局安装包的情况下运行命令。npx的出现就是为了取代原先使用npm在package.json里面定义好scripts然后再npm run 才能执行node包中的可执行文件。npx能更轻松的管理本地依赖，避免全局污染，还可以再开发中使用不同版本的包，防止版本冲突。

npx <package>@<version>

npx执行流程

命令解析：NPX 接收并解析命令行输入。可以是执行本地安装的包，也可以是远程的Node包，也可以是其他公开的Javascript文件，例如Github gist。
检查本地缓存：NPX 会首先检查本地是否已经安装了指定的包。若本地有该包，直接使用。
安装依赖：如果本地没有安装指定的包，npx 会从 npm 仓库中临时安装该包(在这里是create-react-app)。
执行命令：NPX 执行解析后的命令(在这里是create-react-app react-demo)，并将输出结果返回给用户。
清理：再命令执行完成后npx会删除这些临时安装的包。