React从零开始(1)

  下午准备下班的时候，看到有人给我发了私信，是因为我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(
    
Hello World
, 
    document.getElementById('root')
);

JSX

const element = 
Hello World
;

这个有意思的标签语法，既不是字符串，也不是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 =(
    

    Hello {formatName(user)}
    
);

ReactDOM.render(
    element,
    document.getElementById('root')
);