react学习记录(一)

2021/4/10 18:46:19

本文主要是介绍react学习记录(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言:公司有个项目框架用的是react,所以需要学习一下相关内容,开立此贴记录一下自己的学习过程,同时也督促自己持续学习。

文章目录

    • 一、搭建开发环境:
      • 1.1、node和npm环境要求。
      • 1.2、创建项目
      • 1.3、本地启动项目
      • 1.4、打包项目

一、搭建开发环境:

看了半天文档,也不知道应该怎么搭建环境,也许是vue开发习惯太深,总想找个脚手架来生成。而react里似乎没有对应的描述,只找到了几个工具链,不知道这里的工具链是否就是指的脚手架?
不纠结了,随便选一个工具链来开发。
最终选择基于Create React App工具链来开发学习。

首先基本的环境配置:

1.1、node和npm环境要求。

node和npm的环境要求为:
1、Node >= 10.16
2、npm >= 5.6

1.2、创建项目

我也不知道为啥就直接到了创建项目这一步,我并没有全局安装一个叫做Create React App的工具,看文档说npx是 npm 5.2+ 附带的 package 运行工具,推测使用npx指令来创建项目,也许就不用全局安装这些脚手架或者工具链之类的吧。
创建项目命令为:

npx create-react-app my-app

随手创建了一个项目,结果发现报错了,原来是因为项目名称不能包含大写字母,改成短横线写法吧。
在这里插入图片描述
改写完后,项目创建成功,可以看到一些基本的指令提示,以后再看看是啥意思。先赶紧进去看看项目结构。
在这里插入图片描述

1.3、本地启动项目

好家伙,这熟悉的项目结构,看来这个所谓的工具链其实就是脚手架工具。帮我们生成基本的项目结构,引入一些基础的依赖。
那么启动项目的指令就应该也是一样的,可以通过package.json来配置。
在这里插入图片描述
这里就先用脚手架生成的默认指令本地启动一下项目看看吧。

npm start

项目启动成功。
在这里插入图片描述

1.4、打包项目

那同理,打包项目就是run build了

npm run build

在这里插入图片描述
打包成功,和vue不太一样的是代码是存放在build文件夹下的,估计后面有配置的地方吧。

粗略的瞟了几眼,package.json里面没有webpack相关的依赖,不知道是否是通过webpack打包构建的。翻了翻node_modules,发现了webpack的安装包,那么这里的react-scripts的内部应该用的也是用webpack那套东西。

在这里插入图片描述
那相关的包分析,管理工具应该也可以加 。

。。。晚上再来看看。



这篇关于react学习记录(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程