如何快速搭建一个react项目

时间:2021-1-18 作者:admin

在开始学习之前,请:

下载完了之后,打开bash(cmd)或者vscode的终端,先检查一下node版本号以便查看node是否安装好,输入:node -v;查看npm版本号:npm -v;

我所写的demo都是基于以下版本

  • node: v10.23.0
  • npm: 6.14.8

所用工具

我选择了create-react-app作为创建react项目,原因有二:

  • 可信赖度高,create-react-app是由react官方支持的创建react应用程序的方法;
  • 省时省力,只需专注代码,无需做webpack,babel等配置,create-react-app预先配置好了且隐藏了该配置.

项目创建步骤

  1. 新建一个项目工程文件夹(往后将存放所有有关于react的项目),名为my-react:

  1. 用vscode打开该文件夹,打开终端,输入命令: npm i create-react-app -g 全局安装react脚手架:

  1. 使用create-react-app react_demos创建项目(安装时注意查看warnings,若node版本太低,记得适当将node版本升级):

项目创建完之后会自动生成一个react_demos文件夹,结构如下图所示:

我大概解释一下这个目录:

  • node_modules是node模块,里面存放了项目的依赖包,可以使用npm i [packageName] -S来安装我们所需要的包;
  • public是用来存放模板页面以及其他不需要打包编译的文件(比如,第三方插件),public/index.html是页面模板;
  • src是存放开发时我们书写源代码的文件夹,webpack将来会打包编译处理这其中的文件,src/index.js是项目的入口;
  • 对于这public/index.html和src/index.js,最好不要删除或修改文件名,但其他文件随意删除;
  1. 输入命令:cd react_demos进入项目,并npm start启动该项目,你会发现项目自动启动成功且自动打开http://localhost:3000地址,你能看到一个react的示例项目:

  1. 删除public,src中不必要的文件(记得在index.js以及index.html中删除引用,不然会报错),修改过后的index.js中代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

ReactDOM.render(
  <div>你好,苏夏大佬</div>,
  document.getElementById('root')
);

index.html中代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>跟着苏夏学react</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

最后保存打开浏览器,会发现页面如下:

看到这里,你应该对如何使用create-react-app如何搭建一个项目有一个大致的了解了,下期将讲述怎么使用该框架,并会写一些简单的demo从而达到学习的目的。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。