likes
comments
collection
share

【React】如何创建你的第一个react app

作者站长头像
站长
· 阅读数 63

前言

本文主要内容：通过三种方式（或者可能只是两种方式）创建 react app

本来学习react想先总结一篇为什么要学react之类的文章，毕竟我一直很困惑既然前端三大件已经能完成一个网页了，为什么还要有这种框架。

然而看了一些文章后，虽然感觉到react确实是更便捷、更容易理解，但是还是不能很好地给出直观的理解，所以决定将这个计划暂时搁置，等到学习react到差不多以后再来填坑。

所以下面将分别用利用script引入react和本地脚手架搭建两种方式来创建一个react app

项目预览

这里只是创建一个hello world类似的入门程序，进而了解如何创建react app 【React】如何创建你的第一个react app 可以看到只是非常简单的一行

原生js创建

在进入react之前，记录一下用原生js是如何生成上面这一行文字的 首先是最重要的HTML框架

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>Test</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

可以看到定义了id="root"的div来定位，并且引入了script

所以再可以看js代码如下

const h1 = document.createElement("h1")
h1.textContent = "Hello, heheer!"
h1.className = "header"
document.getElementById("root").append(h1)

定义了一个h1元素，className是header，使用append方法放到页面的指定位置

于是就能得到相应的结果了

利用script引入react

这是最简便的在你的电脑上体验react的办法，在HTML中引入三行script，并且对引入的index.js添加type="text/babel"，表示写的是jsx语法

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <title>Test</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

下面是这三句script的来源

react cdn 链接：reactjs.org/docs/cdn-li…

编写jsx格式文件链接：reactjs.org/docs/add-re…

有了这些的引入后，我们就可以修改js文件了，来体验一下react与原生js不同的地方

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <h1 className="header">Hello, heheer!</h1>
)

可以看到这里用了render的方法，这在react里相当重要，你想展示的你写的东西就得通过它

这里补充一个小知识点，上面的写法是react18中的写法，在以前的react版本中你会看到类似下面的写法，当然现在是无法在最新版本的react运行的

const element = <h1 className="header">Hello, heheer!</h1>
ReactDOM.render(
   element
   , document.getElementById("root"))

就这样分别修改HTML文件和js文件，我们就得到了一个最简单的react文件

本地脚手架搭建

然而引入cdn的方法只能用于体验，肯定是无法用于生产环境的，所以我们就需要使用接下来的办法，在本地下载大量的依赖包，通过搭建本地的react脚手架创建react app

create-react-app

第一种是利用create-react-app来创建react文件，而这需要用到npm，关于npm前面的文章已经有过讲述，这里直接看一下安装完成的验证

【React】如何创建你的第一个react app

可以通过图上的命令看到这两个东西的版本号即可

那么接下来就可以创建react app了

用vscode打开你想要创建文件的文件夹，打开终端

【React】如何创建你的第一个react app

输入npx create-react-app my-app，就可以看到进入了创建的过程

这里的my-app是你自己定义的名字

【React】如何创建你的第一个react app

耐心地进行等待，等待出现以下提示，

【React】如何创建你的第一个react app

按照指令，cd my-app进入文件夹，再执行npm start

【React】如何创建你的第一个react app

跳出来这样一个页面，说明创建成功

于是我们就可以毫不留情地删除src中所有的文件，将之前写好的index.js放入取而代之，同样将index.html放入public文件夹中进行替换

当然还要做一些小修改,

首先是index.html，既然已经本地有了依赖，直接删除或者注释掉引入的三行script就好了

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <!-- <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->
        <title>Test</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

然后是index.js，需要通过import来引入相应的依赖

import ReactDOM from "react-dom"
import React from "react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <h1 className="header">Hello, heheer!</h1>
)

这样我们就获得了和上面一样的效果

Vite

通过Vite也能达到同样的效果，如下图，输入npm create vite@latest命令，再输入项目名和选择React，接着就会开始构建create app

【React】如何创建你的第一个react app

同样也是进入项目目录，进行npm install，完成依赖的安装

再执行npm run dev

【React】如何创建你的第一个react app

点击链接进入，看到如下界面

【React】如何创建你的第一个react app

说明创建完成。

这种方法相对上一种要快很多，但是搜到的博客大多都是用create-react-app的，所以特此分一块出来记录一下

转载自:https://juejin.cn/post/7156377493661253640
评论
请登录