React 初始化项目及JSX语法简介

React 初始化项目

这里只写出完善环境下的初始化命令，具体的环境搭建可参考 React JSX | 菜鸟教程

使用终端命令快速构建项目：

cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

项目结构

my-app/
README.md - 自述文件
node_modules/ - node模块（存放npm install 的组件）
package.json - 包管理文件（管理npm的安装包）
.gitignore - git忽略文件
public/- 存放了项目的启动页面及依赖文件
favicon.ico - 网页标题logo
index.html - 网页首页
src/ - 页面各种资源
App.css - app页面css
App.js - App页面组件及js
App.test.js - 测试文件，删除没有影响（存疑）
index.css - 启动页样式
index.js - 启动页组件
logo.svg - Logo
registerServiceWorker.js - 用于在生产环境中为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度

---

React JSX文件

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

优点

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

JSX 语法介绍

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式，如：

var person = <Person name={
  window.isLoggedIn ? window.name : ''} />;

一般每个组件都定义了一组属性（props，properties的简写）接收输入参数，这些属性通过XML标记的属性来指定。大括号中的语法就是纯JavaScript表达式，返回值会赋予组件的对应属性，因此可以使用任何JavaScript变量或者函数调用。上述代码经过JSX编译后会得到：

var person = React.createElement(
  Person,
  {name: