相信点进来的同学大都开始接触并在努力学习react中,下面我会结合ant design––基于react实现的一套组件,
开发和服务于企业级后台产品
和大家分享一下我的学习历程。
react篇
首先,关于react是什么,我相信大家都有了解过,我不再赘言。还有构建react的开发环境有许多种,看个人选择,npm是网速较快的,yarn的启动速度很快。具体构建方法可以去react官网查看。
(ps:英语能力不太好的同学建议用谷歌浏览器自带的翻译去打开官网)
我分三点简单描述一下react入门知识。
react基本语法
react语法是用jsx语法写构而成的,我们都知道js语法,而这jsx语法则融合了html文本语言和JavaScript语法构造出的一种新的语法:
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
{
names.map(function (name) {
return
<div>Hello, {name}!</div>
})
}
,
document.getElementById('example')
);
打开始我是不怎么看得惯的,语法是语法,标签是标签,两者混在一起多难看。当适应了几天后,我只好默认了它方便的写法和不错的可读性。对于我来说,越简洁越方便的语法一直是我的追求。
注意:因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel"
ReactDOM.render
在上方代码最后一段中有ReactDOM.render这几个词。render的意思是渲染,那么上面那几句代码的意思就是:请帮我把ReactDOM内的<div>内容渲染到标签ID为"example"上。这样就可以把数据传输到html里的真实DOM上面。
ReactDOM.render是react里面最重要的基础。
组件(component)
组件化是react的一个重要特性, 它允许你把写好的代码封装成一个个代码块,然后在主体index.js内调用,像标签一样插入html内使用,最后组成你最终想要的web效果。
一般来说私用的组件想要变成通用的组件难度不是一般的小。不过ant design开源的组件都是通用的,对于初学者来说,一个现成的框架能使学习的效率快很多,因为框架会告诉你如何构建整个应用。
新人学习react建议用ant design开刀,因为它有非常丰富的组件实例,可以让大家慢慢去熟悉调用组件的方法。若想更清楚react调用过程,可以去ant design官网直接看源码来学习。不过难度不小。
添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
还有就是,在编写自己的组件的时候,组件的名字开头一定大写,不然编译环境会报错,而且比较难查找出原因。
新人学习使用ant design需要这么几个流程:调用组件–>拼装组件–>改写组件,最后一步需要深入学习react后才能自由改写他人使用的组件。
以上,是我学习react一周以来个人的总结。上方部分例子用的是阮一峰的React 入门实例教程