【2017】React V15.6.1教程 【01】简介&小白环境搭建Win10,intellij IDEA,Webstorm

很多废话,不想看可以跳过去
我不是什么大牛,编程好的人请不要过来凌辱我了:(,一只软妹经不起凌辱,除了骂回去,只会哭!!!!这里只是分享自己的笔记和经验,既不严谨也不严肃。中间可能会有错误,如果各位朋友发现了请告诉我。
——————————————————————————————————
最近想要编一个web,不想用servlet这种古董级的技术来写一个HTML+CSS的网站。时间比较充裕,网页功能简单,所以想尝试使用React。看了几个教程,彻底懵逼了。WTF!!感觉教程里用的东西和我的完全不同,视频教程比较老(希望极客学院出新的!),文字教程看不懂,大牛们写的文章教程夹杂了很多新的东西,他们给自己讲明白了,我啥也没看明白!!

本来我各个环节都薄弱,而且不想全部都学会了才开始使用React,毕竟有些东西精通了也用不到,最后还是忘了。对于其他知识,只想知道要用的部分。

React主要需要一点terminal 语言(几乎没多少),HTML ,CSS, JSP.它和传统网页没什么大区别,因为React就是FB 的 JavaScript库而已。React就是一种框架,并非新的语言。

所以这个教程的特点是:

  • 新:V15.6.1 ,2017年的
  • 细:适合新手,小白,记忆力差,经不起一点严肃对待的人(我)
  • 结合环境:intellij IDEA ,Webstorm 。
  • 不全面(优点):只知道要知道的事情,不节外生枝。
  • 可能会有错误:(,有些中文写的奇怪。

环境的搭建

有个东西你一定要有(纯小白应该不止这,哈哈)

  • npm.

编译器 & 操作系统

  • 任意(我用了webstrom+win10)

最好要有Github,就不说了把,你搜搜,一大把。不过也不是必须的。不妨碍。

环境配置过程:Node.js -> npm -> react ->跑起来!

下载Node.js: https://nodejs.org/zh-cn/
下载npm: 终端输入

 npm install

下载react: cd你要下的地方,终端输入

npm install -g create-react-app

建立react项目my-app:cd你要下的地方,终端输入

create-react-app my-app

跑起来:终端输入

cd my-app
npm start

日后facebook可能会更改命令,你可以在这查看他们的官网
https://facebook.github.io/react/docs/installation.html

————————————————————————————————

下载npm之前你可能需要下node.js先,

什么是Node.js?
我可以不负责任的告诉,你暂时也不需要知道node.js是什么,或者简单百度一下就可以了。

不过你之前有可能下过node了,怎么看你有没有node?
你在你的终端输入 node -v
如果显示了版本,就是有。没有就下一个

Ps,你要是不知道怎么打开terminal,我就要打你屁股了。除了CMD,你也能试试鼠标右键+shift,在菜单里选择打开终端或者PowerShell(windows)。

什么是npm?怎么用?
要学的只是很多,我也可以不负责任的告诉你,你不用管npm是什么,下载就行了。

我们的目标不是精通terminal语句,精通Node.js , 更不是记住所有的插件。我们的目标是学会React

成功的话,你会见到这么一个界面:

image.png

文字可能略有不同,因为我给删了,我忘了原来是什么。

恭喜你大兄弟,小老妹!你成功搭建好环境了!!

————————————————————————————————

后面的话,有点重要:

想学React,大家肯定还是要看一些教程的!就看我这破玩意是百分之一万不够的。至于看什么教程,我就不敢推荐了。因为我就是没有教程才自己写教程的。

视频教程里我几乎没发现特别好的,中文英文都是。不是说做视频的人不牛逼,而是教程过旧,15年出的几乎就可以淘汰了,过时了。you土逼(油管,youtube)只有一个视频的博主和我用的是一个版本的react,可是他的英语有很大的印度口音,you土逼都不肯提供自动翻译,我无法集中注意力,所以放弃了。以下的教程都是来自我的同学,同事和同屋(男友)的智慧成果。

可能你看到我的帖子的时候,我的帖子也过时了哈哈哈哈,或者也许有更好的教程出现了。怎么样分辨是不是已经过时了呢?以我的时间线为标准来看,

  • 如果是在HTML 里导入<script src="react.js">这种标签的,可以考虑不要看了。连FB的例子都不用这样的写法了。
  • 如果跟你提到https://facebook.github.io/react/ 官网中有download的标签界面,下载zip的,可以不用看了。通常是0.几的版本才有的。

看也没关系,反正你发现和你下载的App sample完全不一样。但是对于基础语法学习啥的肯定是有好处的。

FB的官方教程点这里,英文

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

推荐阅读更多精彩内容