react脚手架的建立——小白入门
一、介绍:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。
做出来以后,发现这套东西很好用,就在2013年5月开源了。
二、React脚手架:create-react-app
React 的环境搭建,是比较繁琐的,有很多的依赖:react
、react-dom
、babel
、webpack
... 需要很多的前置知识,很容易让人从入门到放弃。
于是就诞生了 脚手架
这种东西,create-react-app
就是一个 React 的脚手架,用它可以很方便的就创建了整个 React 的环境搭建,它解决了所有的依赖问题。
越上层的建筑,越方便的工具,也说明了我们对底层的定制性越差。不过对于新手学习的同学,把应用的东西先做起来之后,有必要再去理解底层环境的东西,也是种不错的学习的路径。
三、建立脚手架:
(1)电脑要先装上最新版的Node.js https://www.runoob.com/nodejs/nodejs-install-setup.html
它会直接包括住:npm npm是个啥?https://blog.csdn.net/qq_37696120/article/details/80507178
(2)装好了Node.js后配置一下环境变量,然后就可以使用npm 下载 create-react-app 了:
使用淘宝 NPM 镜像
大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
$ cnpm install [name]
接着:
cnpm isntall -g create-react-app 就是下载这个了脚手架了
create-react-app my-app 创建一个名为my-app的项目(可以先进入cd想部署的文件夹,然后创建这个项目,否则默认c盘)
慢慢等待安装
安装好了之后,接下来进入这个目录 cd my-app
然后安装依赖(脚手架都差不多) npm install
启动项目:npm start
项目跑起来的话,就用默认用你的3000端口打开构建的本地服务器,如果你的3000端口被占用,就会用其他端口打开啦
项目查看 可以用 webstorm或者vsCode打开,然后编写,运行。
写好了上传github 然后可以部署到github page 上面,免费访问。教程: https://www.jianshu.com/p/02c86540d324
参考博客:
https://www.runoob.com/nodejs/nodejs-npm.html
https://www.jianshu.com/p/e16a9da931ec
遇到问题:
1.【构建React-app应用时create-react-app卡住超慢的解决办法 - Edluminary的blog - CSDN博客】https://blog.csdn.net/qq_40197828/article/details/86823985
2.React 项目文件结构解析:https://my.oschina.net/korabear/blog/1815170
3.利用webstorm创建react项目:https://blog.csdn.net/qq_39207948/article/details/79467144