React学习笔记之一(开篇)

React介绍

参考Facebook官网:点击这里访问

①React仅仅是针对UI,相当于MVC里面的V,并不是一个MVC的框架。  ②虚拟DOM,React对DOM进行了抽象,使之有了更高的性能  ③单向数据流,数据绑定更容易。从Reactjs Conf 2016 上可以了解,Reactjs不仅仅是一个js库,要做成一个生态来推进web和mobile的开发。有图说明:

img_573003a7ca344

这个React的学习笔记主要以React官网的资源为主来学习,欢迎大家留言交流。

Why React

React不是一个MVC框架,它是一个javascript库,用来创建可重用的,更灵活的应对数据变化的用户界面。React没有使用模板,而是以组件的方式来构建用户界面,用户界面会被划分为多个不同的组件来呈现,能够灵活的创建复杂的用户界面。为了代码的简洁和可读,React创建了一种新的JSX语法,像编写XML的方式来编写元素。当然这个需要编译器进行编译成最终的js代码。JSX在React里面不是必须的。不使用JSX,同样可以使用React。

 

为什么我要学习Reactjs

我觉得学习优秀的一些库,框架能够提高自己对开发的认识,对相关技术的理解深度。就像我学习阅读jQuery源码一样。其次,对于一些使用广泛的框架和库,结合自己所在团队的情况,有选择的引入。能够解放我们的生产力,更加快速和灵活的应对来自产品或业务需求变化。不是盲目的跟从,而是结合实际情况,选择适合自己团队的。当然我也吐槽下,有人上来就问什么工程化,模块化,MV*等等。其实,我想说。各种框架层出不穷,学习框架也重要,但是各种基础才是根本,基础的牢固需要时间的积累。有了稳固的基础,其它一切都可以学习,而且学习的很快,要不然只是一个花瓶。

 

Hello World

这里先给一个React的Hello World的例子,这里面没有去用JSX,后面的学习会使用JSX写,因为这样代码的可读性和开发效率会高一些。我自己觉得实际过程可以先试用JSX编写,上线之前进行编译,把JSX转化为普通的js,不建议在客户端去编译。在线编译的网站:http://babeljs.io/repl/,可以用来学习。

运行结果如下:

React调试工具展示如下:

HTML代码如下:

 

这里用到了React的两个方法分别给予解释:

ReactDOM.render(ReactElement element,DOMElement container,[function callback]):把React元素呈现到指定的DOM容器中。

React.createElement(string/ReactClass type,[object props],[children …]):

第一个参数是元素类型(div或React的元素类型),

第二个参数是元素的属性,后面表示包含的子元素(可以是文本元素,也可以再创建新的React元素)

 

React学习的开篇就写到这里, 欢迎大家留言教练。

本文参考原文:https://facebook.github.io/react/docs/getting-started.html

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1284
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注