React进阶(三) 学习心态与方法

React开发难在哪?

点击查看进群方法

大家要认识到的是,React仅仅只是一个达到目标的工具, 他并不难

1

认知

对于整个前端行业而言,React的出现具有里程碑的意义。它重新定义了前端开发。

但React的掌握并没有大家认为的那样难。

它给我们提供了一个开发思路以及少量的API,这些API学习起来还算轻松。不过在阅读此系列文章之前,应该有不少读者已经通过官方文档或者其他途径开始尝试学习React,并且在学习过程中遇到了困难。这些困境会给大家带来一些React难以攻克的假象。

我想要说的是,大多数困难,可能并不是React本身带给你的。而是当前那个问题带来的。我们不知道如何用React来解决这个问题,所以我们认为React很难。又或者我们不知道能够用React来干点什么,所以我们无法感知到自己的进步。

因此我们首先需要认知到的是,整个React的学习过程,一定是先学会使用工具,并且利用工具去战胜实践过程中各种各样挑战的这样一个过程。

由于每个人不同的学习与实践经验,同样的问题对于不同的人来说可能意味着不同的难度。例如要求使用React编写一个拖拽组件,知道拖拽实现的原理的朋友,可能就会很容易搞定这个问题,但是对于拖拽原理理解还不够的同学,那么就必然需要付出更多的精力去学习拖拽相关的知识点才能应对自如。

因此,经验的不同,会直接导致学习的快慢。所以就必须要求底子稍微薄弱的同学保持良好的心态,你要认识到,这都是正常的。

2

心态

基于上述的认知,当我们在学习过程中遇到困难时,一定要避免产生怀疑自己能力等的负面情绪或者厌学情绪。学会调整自己,学会将问题细化,通过搜索,查阅资料,寻求帮助等方式,积极地去解决他们。

对没有毕业、或者没有太多工作经验的朋友来说,未来在工作中会遇到的问题,我们认知并不是那么深刻。因此在学习过程中,很多东西我们都不知道为什么要这样做。我们也感受不到不同解决方案之间的差异与提升,所以印象就不会那么深刻,思维也很难有进一步的深入。这种状况带来的问题就是会导致学习起来会比经验丰富的前辈们慢一些,甚至可能会遗忘一些之前学过的知识。不过大家不用担心,这种状况都是正常的。我们只要多多实践,练习,就能克服。

现在我们正面临新的更好的开发方式,和几年前的前辈相比,我们能少走一些弯路,但是我们不能少走所有的弯路直接到达终点。

我们并不需要在某个时刻搞懂所有的问题。正确的学习方法一定会时常感受到“柳暗花明又一村”的感觉。很多时候我们不需要急着在某一个时刻解决当前面临的问题,也许休息一下,出去散个步,聊会儿天,打会儿游戏,再回过头来思考,问题就迎刃而解。不要在某个问题上死磕,这样会很快耗尽你的学习热情与动力。

尽量不要花心思去担忧暂时还触碰不到的知识。每个人都加了各种不同的学习群。你总会听到,感受到各种各样不同的未知词汇,即使在我们的零基础学习群里,也会有很多这样的声音。

很多人因为这些声音感到焦虑。

完全没有必要,只要你还在持续学习,学习阶段到了,这些东西自然而然就能接触,并且掌握到。

3

方法

一定要动手实践。不要干读文章!

写《前端基础进阶》这系列文章,发现了一个很有意思的现象。

阅读量7W+
阅读量接近3W
阅读量1W+

从第一篇,到最后一篇,阅读量从7W+递减到2W+。只能说,半途而废的人还蛮多。

所以,不要半途而废,你就能脱颖而出。这也是一个非常重要的学习方法。

4

环境搭建

React的官方文档,为了新的学习者能够更加容易接受React,在最初的介绍中,告诉我们可以通过在js中引入React库,并且在js中直接如下使用。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

但是我个人并不认同这样的入门方式,因为在实践中,我们几乎不会这样使用。

与Vue一样,React同样具有非常优秀的构建工具,但是由于推广方式的原因,React刚入门的同学可能还不知道它。

create-react-app

作为最易上手的react脚手架,create-react-app并不需要花费太多时间就能够掌握,大家只需要按照我接下来的步骤安装需要的环境即可。

当然,要配置一个功能更强大,更适合实践的脚手架,则还需要在此基础上做更多的扩展。我们在开发中再慢慢完善。

1. 安装node

nodejs官方网站下载你的操作系统对应的node版本。和普通应用一样安装即可。

建议选择左侧稳定版

该页面会自动推荐更合适你电脑的node版本。点击左侧大按钮,将会下载最新的稳定版本。右侧大按钮可能会有一些更新的,但还处于测试阶段的新特性。因此我们通常选择左侧的下载。

node安装的同时,npm也会一起被安装。npm是一个js包管理工具,我们可以利用该工具下载需要的js库。例如我们需要在项目中引入jQuery。那么可以直接这么干。

// 仅在当前项目安装
> npm install jquery

// 全局安装
> npm install jquery -g

安装完成之后,通过查看node版本的方式确保node已经正常安装。


node -v

由于网络原因,当我们想要通过npm下载项目依赖包时,可能会很慢甚至直接无法下载,因此在使用时我们通常会使用淘宝NPM镜像

首先使用如下指令安装cnpm,用以替换默认的npm

> npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就可以使用cnpm来安装想要的模块了。

> cnpm install jquery

当然,现在更多的人更偏向于使用另外一个包管理工具yarn。在后续的教程中,我们可能也会使用到yarn而不使用npm。大家可以访问yarn官方网站按照教程安装yarn。

通常能够使用npm安装的模块,都能够使用yarn来安装,他们的常用指令如下:

// 安装模块
> npm install lodash
> yarn add lodash

// 启动项目
> npm start
> yarn start

// 构建项目
> npm run build
> yarn build

入门时只需要记住几个简单的即可,在这里不建议深究更多的指令,在学习过程中慢慢掌握即可。

yarn 也可以配置国内镜像源。

# 国内源
> npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
> tyarn -v

# 阿里内网源
> tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
> ayarn -v

安装之后执行yarn指令,极少部分情况可能会出现如下提示

> yarn: command not found,

你需要将 yarn global bin 路径配置到环境变量中,方法如下

# mac 系统:
> sudo vi ~/.bash_profile
# 在 .bash_profile 中添加下面一行:
export PATH="$PATH:`yarn global bin`"

# windows系统:
# 获取 global bin 的路径
> yarn global bin
C:\Users\Administrator\AppData\Local\Yarn\bin
# 复制上面的 global bin 的路径,添加到系统环境变量 PATH。

2. 安装一个好用的命令行工具

对于windows系统来说,我们可以直接使用系统自带的cmd。但是cmd比较难用。因此我个人比较推荐大家安装git,并通过git中的git.bash工具进行指令操作。

点击下载git

git下载页面

也是与安装其他应用一样,在电脑上安装好git,找到git的安装目录,我们会发现有一个bash工具。双击它即可使用。

对于mac系统来说,使用起来则相对简单,我们可以直接使用系统自带的terminal工具即可。当然,也可以安装更加好用的iTerm。

点击下载iTerm

iTerm2下载页面

通常我们在安装好iTerm之后,会下载一个非常好用的集成补丁oh my zsh。它为我们使用指令提供了非常多的快捷操作与舒适的补全提示。

// 安装oh my zsh
> curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

对美观有自己要求的同学可以选择对应的主题。

oh my zsh主题选择

3. 安装 create-react-app

如果刚才我们的包管理工具(npm/yarn)已经安装好,那么安装create-react-app就比较简单。

> yarn add create-react-app -g
添加-g表示全局安装

接下来我们就可以使用create-react-app来创建项目啦。

4. 创建第一个react项目

找到一个你专门用来存放项目的目录,例如我的目录名字叫做develop。在命令行工具中进入到这个目录,然后使用如下指令创建项目。

// 进入目录
> cd develop

// 创建一个名为kill的项目
> create-react-app kill

创建完成之后,我们可以看到类似如下图所示的界面。

具体的操作指令都已经告诉我们啦
// 进入项目
> cd kill

// 启动项目
> yarn start

// 打包项目
> yarn build

// 暴露出项目的具体配置,以便于在此基础上扩展/修改更多的配置
> yarn eject

进入并启动项目,在浏览器中输入http://localhost:3000,我们可以看到如下界面。

通常会自动打开

我的第一个React项目

在命令行工具中,注意关注这里的提示。

注意关注这里的两个地址

我们可以直接在电脑中输入http://localhost:3000访问项目。同时,我们也可以输入http://192.168.0.101:3000访问项目。如果你的手机与电脑处于同一局域网,我们也可以通过该地址在手机上访问项目,这对于移动端开发的调试非常有用。

手机上访问

5. 认识项目

打开项目,我们可以看到如下目录。

项目结构

node_modules

node_modules文件夹是项目所有依赖包的存放地址,除了项目初始化时安装的所必须的依赖包之外,我们后续通过yarn/npm安装的包都存放在该目录下。

package.json 与 yarn.lock

项目的配置文件与依赖包的描述文件。目前我们暂时还不需要对他们有过多的了解。在未来如果你要学习webpack等构建工具时才会深入的了解他们。

public

项目的入口文件。通常我们会将index.html存放在该目录里。

src

模块与组件的存放目录。在create-react-app创建的项目中,每一个单独的文件都可以被看成一个模块,例如单独的image,单独的css,单独js等,而所有的组件都存放于src目录中,其中index.js则是js的入口文件。

通常我们创建一个web页面,则需要分别通过link与script标签引入对应的css与js文件。但是在create-react-app的开发环境中,构建工具帮助我们自动完成了这些操作,我们只需要按照当前开发环境的简单规则来组织自己的代码即可。当我们通过yarn build打包项目之后,我们会看到html页面则变成了我们熟知的样子。

5

节奏

后续的所有文章,都会严格结合typescript来跟大家分享。在学习群里跟大家做了一个调研,大家也愿意先学一些能够使用的typescript语法规则,然后再进行react的学习。

群里调研结果

因此,后面会有至少三篇文章介绍typescript。

那么既然要支持ts,我们创建项目的指令就需要修改成

> create-react-app kill --template typescript

最后,混迹半生,变成了一个贼爱钱的人,如果大家觉得文章写得还不错,一定要多多打赏我呀!

点击查看进群方法

推荐阅读:

关于学好JavaScript,我写了一本书

这里有与React hooks有关的一切

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,457评论 25 707
  • 「研究酵素」的结果,认为易患肝病、高血压、动脉硬化、过敏、结核、糖尿病、心脏病、肾脏病、风湿、肥胖等疾病,都是因为...
    快乐_4a34阅读 203评论 0 0
  • 转眼,十月就要结束了。时光总是在你回头之时,才觉得倏忽而去,眨眼间消失不见。这是我坚持100天写作以来,完成的第一...
    茶人老七阅读 208评论 0 0
  • 父类:NSObject 能够影响通过图片管理器获得的资源的静态图像的一组选项。 内容 1. 安排一个图像请求 @p...
    Shmily落墨阅读 11,108评论 0 11