下午准备下班的时候，看到有人给我发了私信，是因为我5月份写了一篇ant design后台模板-1.前端环境搭建,这位同学也在使用React和ant design，想让我推荐一些资料。
说实话，我对React的学习并不深，可以说只是因为兴趣爱好，当初学习了几天，后来团队要做一个新的项目，说句吹牛的话，若论前端技术水平，我在团队里算是最有发言权的，所以我里用周末的时间，使用Anguar、Vue、React各写了一个增删改查的demo，然后整个团队的技术人员开会讨论，最后讨论评估后，决定使用Vue，而我的React的学习，也就在这里暂停了。今天看到这个私信，我决定，重新捡起React，并进行深入的学习。
创建项目
在目前的前端开发中，Node是必不可少的，全世界的技术大牛和爱好者们开发出了各种各样的构建工具、脚手架，为我们这些菜鸟程序员们提供了非常便利的工具，我们可以在github上找到很多的功能组件用于我们的日常项目开发中。而学习React开发，首先就是要使用一款脚手架工具，能够快速的创建出我们所需要的开发环境。
npm install -g create-react-app
create-react-app react-study-01
这样我们就创建出了一个文件夹名称为react-study-01的react工程，命令行中进入这个文件夹，执行npm start，在浏览器中就能看到运行效果。
从这个目录结构来看，如果是一个从来没有接触过React的新手来使用，一下子会有点摸不着头脑，所以对这个项目进行一些改造，删掉其中的一些东西，让其成为一个干干净净的react的项目，我们就可以安装官方文档中的示例代码进行一步一步的学习了。
修改index.js中的代码
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
JSX
const element = <h1>Hello World</h1>;
这个有意思的标签语法，既不是字符串，也不是html，我们称呼其为JSX，它是JavaScript的语法糖。
我们可以在JSX语法中使用JavaScript的函数和表达式
import React from 'react';
import ReactDOM from 'react-dom';
function formatName(user){
return user.firstName + ' '+ user.lastName;
}
const user = {
firstName:'Jim',
lastName:'Green'
}
const element =(
<h1>
Hello {formatName(user)}
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
