很多废话,不想看可以跳过去
我不是什么大牛,编程好的人请不要过来凌辱我了:(,一只软妹经不起凌辱,除了骂回去,只会哭!!!!这里只是分享自己的笔记和经验,既不严谨也不严肃。中间可能会有错误,如果各位朋友发现了请告诉我。
——————————————————————————————————
最近想要编一个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
成功的话,你会见到这么一个界面:
文字可能略有不同,因为我给删了,我忘了原来是什么。
恭喜你大兄弟,小老妹!你成功搭建好环境了!!
————————————————————————————————
后面的话,有点重要:
想学React,大家肯定还是要看一些教程的!就看我这破玩意是百分之一万不够的。至于看什么教程,我就不敢推荐了。因为我就是没有教程才自己写教程的。
视频教程里我几乎没发现特别好的,中文英文都是。不是说做视频的人不牛逼,而是教程过旧,15年出的几乎就可以淘汰了,过时了。you土逼(油管,youtube)只有一个视频的博主和我用的是一个版本的react,可是他的英语有很大的印度口音,you土逼都不肯提供自动翻译,我无法集中注意力,所以放弃了。以下的教程都是来自我的同学,同事和同屋(男友)的智慧成果。
可能你看到我的帖子的时候,我的帖子也过时了哈哈哈哈,或者也许有更好的教程出现了。怎么样分辨是不是已经过时了呢?以我的时间线为标准来看,
- 如果是在HTML 里导入<script src="react.js">这种标签的,可以考虑不要看了。连FB的例子都不用这样的写法了。
- 如果跟你提到https://facebook.github.io/react/ 官网中有download的标签界面,下载zip的,可以不用看了。通常是0.几的版本才有的。
看也没关系,反正你发现和你下载的App sample完全不一样。但是对于基础语法学习啥的肯定是有好处的。