react学习记录（一）

本文主要是介绍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学习记录（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！