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 入门


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容