React+ES6 实例化教程(1)

现阶段来说无疑React已经成为前端开发框架的一个主流框架并且火的不要不要的,我最近一段时间尽管是被公司的繁琐事物忙的不可开交但是还是压不住这个React对我的吸引,果断利用作余(工作之余)时间自己了解了一下,下面就是我的学习过程(伴随着我从开始到初步了解实例化这篇文章也就写完了)。废话少说直接切入正题,下面就是我的学习过程:

首先来说我们得有一个开始的小demo才能正确打开大家的代码思维,所以我就从一个小的demo开始,还有一点我需要补充就是在开始小demo之前我们得需要搭建环境或者是需要知道引入哪些文件才能开发React实例(别怪我多嘴,我的学习过程就是这样的真的是走了不少弯路).

现在正式开始了:首先建立一个全新的空文件夹(我的叫react)我们有两种方式来开始我们的环境搭建一种必然是npm另一种则是直接引入js文件(这个很简单就不在这里赘述了)

我们先介绍npm方式:当然不是直接上来就是npm、、、那些命令,首先我们得需要知道我们这个小的demo需要什么,我们选择从我们根目录的package.json开始接下来是一个我的例子:package. json文件内容

package. json

这个package.json中的都是关于本次框架开发的依赖环境以及其他的描述信息,详细的内容我会在下一次的文章中做详细的讲解(因为现在有些我也不知道是什么意思,我会随着后来的学习一点一点解释给读者),那么现在的话我们已经有了基本的环境搭建文件,下一步就是我们的实例化需要依赖的webpack的配置问题。我们需要建立一个webpack.config.js来进行配置:


webpack.config.js

其中需要注意的是这里面有一个entry数组,这里面放的是我们的一个react项目入口我的项目入口为react.js在module里面的是需要依赖的一些外部组件,而在output中的这是入口文件输出配置,详细的内容我会在后来的文章中进行详细的介绍。

接下来有可能会有一些初探前端的读者会问为什么还没有写html代码,就先写这么多js呢?接下来我们就需要写一个加载出来的页面html代码了,我就起名为index.html示例如下:


index.html

这里面就是一个简单的html基本结构没有什么特殊当然了有可能会有一点让读者有点迷惑就是这里面的有一个bundle.js这里面放的是入口文件输出配置没有什么大惊小怪。接下来就是最重要的部分项目入口的配置代码了,在这里面我们会处理一下简单的路由方面的逻辑处理:


react.js

大家有可能发现在里面我用到了一个依赖以外的js文件这里我们用到了leisinodejs的模块化,还有就是我们将会在这个js代码中只进行react组件化得东西然后,这样不会因为其他的代码进行混淆,我们在这里面写了一个简单的例子就是实现在页面中显示输出helloworld:


hello.js

这样的话基本上所有的文件以及内部代码也都弄完了,终于吧我最不擅长的弄完了,哎,以后我会根据我自己的学习不断进行修正以及解释一些现在读者不明白甚至我也不明白的地方进行一一的解释。

现在我们就可以使用强大的npm install进行项目搭建过程中的以来进行植入了。


npm install

在这个完成以后就我们就可以将我们的第一个demo跑起来了 npm start


npm start

这里是广大读者朋友很头疼的事因为我再装这个的时候也是反反复复装了好几次,一度想要放弃可是最后坚持了下来所以就成功出现了这个


主界面

这是再安装好后的demo的主界面很简单,但是这就意味着你从现在开始你要进入强大的react框架的学习之中。让我们一起加油然后跟着我的脚步一起熟悉掌握,操纵这个火热的框架。

我的目录结构大概是这样的:


文件目录

参考文献 :

阮一峰react入门实例教程

Webpack+React+ES6开发模式入门指南

ECMAScript 6 入门


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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,394评论 25 707
  • 又快到了本周的结束,最近公司很忙,只有周末才会有自己的一点时间,所以赶紧趁着短暂的私人时间把我的学习过程写下来。通...
    不冷的豆豆阅读 744评论 0 2
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,134评论 7 35
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 图案来自月饼盒的封面,丢盒子时觉得画美,便拍下照片,加以临摹。 简单的笔触,轻柔的涂抹,就成了这幅花鸟图。 嘻嘻,...
    叶听雨阅读 298评论 2 4