react脚手架的建立——小白入门

一、介绍:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。

做出来以后,发现这套东西很好用,就在2013年5月开源了。

二、React脚手架:create-react-app

React 的环境搭建,是比较繁琐的,有很多的依赖:reactreact-dombabelwebpack ... 需要很多的前置知识,很容易让人从入门到放弃。

于是就诞生了 脚手架 这种东西,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打开,然后编写,运行。

参考博客:https://www.runoob.com/nodejs/nodejs-npm.htmlhttps://www.jianshu.com/p/e16a9da931ec

 
 
 

原文地址:https://www.cnblogs.com/1starfish/p/11695693.html

时间: 2024-11-07 19:19:39

react脚手架的建立——小白入门的相关文章

【原创】连“霍金”都想学习的“人工智能”---【自己动手写神经网络】小白入门连载开始了(1)

欢迎关注[自己动手写神经网络]的博客连载!!! 第1章 神经网络简介 神经网络这个词,相信大家都不陌生.就在你打开本书,并试图了解神经网络时,你已经在使用一个世界上最复杂的神经网络——你的大脑,一个由大约1000亿个神经元(每个单元拥有约1万个连接)构成的复杂系统.但人的大脑太过复杂,以至于科学家们到目前为止仍然无法准确解释大脑的工作原理和方式.但有幸的是,生物神经网络的最最基本的元素已经能够被识别,而这就构成了本书想为你介绍的人工神经网络(Artificial Neural Network).

连“霍金”都想学习的“人工智能”---【自己动手写神经网络】小白入门连载开始了(1)

欢迎关注[自己动手写神经网络]的博客连载!!! 第1章 神经网络简介 神经网络这个词,相信大家都不陌生.就在你打开本书,并试图了解神经网络时,你已经在使用一个世界上最复杂的神经网络--你的大脑,一个由大约1000亿个神经元(每个单元拥有约1万个连接)构成的复杂系统.但人的大脑太过复杂,以至于科学家们到目前为止仍然无法准确解释大脑的工作原理和方式.但有幸的是,生物神经网络的最最基本的元素已经能够被识别,而这就构成了本书想为你介绍的人工神经网络(Artificial Neural Network).

「小白入门」Mac vimrc -- 配置

1.打开终端 方法1:Finder - 应用程序 - 实用工具 - 终端 : 方法2:Spotlight 中搜索「terminal」或者「终端」,后回车或者单击打开: 2.在终端的用户主目录下建立.vimrc 文件(Mac 下默认没有此文件) 方法:用户主目录即为终端打开的初始界面,在此界面上输入「mkdir .vimrc」(不包括直角引号),后回车: 3.编辑.vimrc 文件,自定义 Mac 下 Vim 的配置 方法:在终端的用户主目录下输入「vim .vimrc」后回车,即可进入.vimr

【webpack系列】从零搭建 webpack4+react 脚手架(四)

经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦.你要去浏览webpack的配置文件,找到哪些配置项,然后去更改它,我们希望有个参数配置文件,只要更改参数配置,而无需更改webpack的配置文件. 1 添加参数配置文件 (1)在根目录创建config文件夹,在config文件夹内新建一个index.js文件,文件内容如下: 'use strict

【自己动手写神经网络】小白入门连载(二)--机器人时代必须得有人工神经(不是神经病)

[自己动手写神经网络]小白入门连载(一) 在上一章中,我们已经介绍了神经网络的基本概念.思想,并提及了有关人工神经元模型的部分内容.在本章中,将对人工神经元模型做更多的介绍. 图2.1 多输入生物神经元示意图 在上一章中提到了一个简单的神经元模型,并且该模型只有一个输入p.这意味着只能有一个额外的神经元与之相连接,这显然是不够的.因此,一个实用的神经元必须是可以接受多个输入的,如图2.1所示,神经元拥有3个输入p1.p2和p3.其中,w和b是根据网络情况不断进行调整的,而传入函数s和传输函数f是

【自己动手写神经网络】小白入门连载(三)--神经元的感知

[真实原创,转载务必注明出处] 上一个连载中我们已经了解了神经元模型和其工作方式.单个神经元就可以构成一个最简单的神经网络--感知机.在单层神经元感知机中,网络接收若干过输入,并通过输入函数.传输函数给出一个网络的输出.这个网络已经可以解决苹果和香蕉的分类问题.在本系列中,将具体介绍其内部原理. 首先,我们确定感知机的输入.在此,我们引入形状和颜色两个变量,苹果的形状为圆形记为1,颜色为红色记为1:香蕉的形状为弯形记为-1,颜色为黄色记为-1.则有输入p如表3.1所示. 表3.1 常用传输函数列

【自己动手写神经网络】小白入门连载(二):机器人时代必须得有人工神经(不是神经病)

[自己动手写神经网络]小白入门连载(一) 在上一章中,我们已经介绍了神经网络的基本概念.思想,并提及了有关人工神经元模型的部分内容.在本章中,将对人工神经元模型做更多的介绍. 图2.1 多输入生物神经元示意图 在上一章中提到了一个简单的神经元模型,并且该模型只有一个输入p.这意味着只能有一个额外的神经元与之相连接,这显然是不够的.因此,一个实用的神经元必须是可以接受多个输入的,如图2.1所示,神经元拥有3个输入p1.p2和p3.其中,w和b是根据网络情况不断进行调整的,而传入函数s和传输函数f是

git 小白入门( 二 ) —— 入门操作

不懂安装的可以翻看 git 小白入门( 一 )-- 安装教程 ____________________________________________ 四:如何操作? 一:创建版本库. 什么是版本库?版本库又名仓库,英文名repository,你可以简单的理解一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改,删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者在将来某个时刻还可以将文件"还原". 所以创建一个版本库也非常简单,如下我是D盘 –> www下

git 小白入门( 三 ) —— 远程仓库

还不会基本操作的可以翻看上一篇 git 小白入门( 二 ) -- 入门操作 ____________________________________________________ 五:远程仓库. 在了解之前,先注册github账号,由于你的本地Git仓库和github仓库之间的传输是通过SSH加密的,所以需要一点设置: 第一步:创建SSH Key.在用户主目录下,看看有没有.ssh目录,如果有,再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件,如果有的话,直接跳过此如下命令,