react 接触入门––ant design

相信点进来的同学大都开始接触并在努力学习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 
      
Hello, {name}!
    })
  }
,
  document.getElementById('example')
);

打开始我是不怎么看得惯的，语法是语法，标签是标签，两者混在一起多难看。当适应了几天后，我只好默认了它方便的写法和不错的可读性。对于我来说，越简洁越方便的语法一直是我的追求。

注意：因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel"

ReactDOM.render

在上方代码最后一段中有ReactDOM.render这几个词。render的意思是渲染，那么上面那几句代码的意思就是:请帮我把ReactDOM内的

内容渲染到标签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 入门实例教程