翻译React官网文档—— 入门创建一个Hello World

React的初衷是一个用于构建View层（界面）的javascript类库。后来规模越来越多又有了ReactNative。

不赘述如何搭建react了，由于是学习我们直接用CodePen(可能需要FQ，可以自行下载免费的Lantern)，Codepen中我们可以自由的修改代码

通常学习任何语言都要写一个Hello World。Tack is cheep 直接上代码 Go!

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘root‘)
);

已经学过React可以直接跳过本章，新手先看代码结构 大脑中留个印象即可稍后会讲为什么这么写

提到React就不得不提到JSX了（React自己弄出的一套javascript的拓展，本质还是javascript），那么什么是JSX？还是先看例子

如果没学过新版javascript(es6)  代码中的const姑且当成var ,以下代码就是JSX的几种用法，在看代码中脑子里自然有模糊的印象

const element = <h1>Hello, world!</h1>;

function formatName(user) {
  return user.firstName + ‘ ‘ + user.lastName;
}

const user = {
  firstName: ‘Harper‘,
  lastName: ‘Perez‘
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;

const element = <div tabIndex="0"></div>;

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

看完代码你会发现JSX好像有点像HTML 又有点像javascript