初识 React

React is an engine for building composable user interfaces using JavaScript and (optionally) Vitual DOMXML. 一、 JSX 1. JSX 不是必须的 JSX 编译器把类似 HTML 的写法转换成原生的 JavaScript 方法，并且会将传入的属性转化为对应的对象。
React is an engine for building composable user interfaces using JavaScript and (optionally) Vitual DOM
XML. 一、 JSX 1. JSX 不是必须的

JSX 编译器把类似 HTML 的写法转换成原生的 JavaScript 方法，并且会将传入的属性转化为对应的对象。它类似与一种语法糖，把标签类型的写法转换成 React 提供的一个用来创建 ReactElement 的方法。

const MyComponent;

// input JSX，在 JS 中直接写成类似 HTML 的内容，其实它返回的是一个 ReactElement

let app = h1 title="my title" this is my title /h1 

// JSX 转换后的结果

let app = React.createElement("h1", {title: "my title"}, "this is my title");

2. HTML 标签与 React 组件

React 可以直接渲染 HTML 类型的标签，也可以渲染 React 组件。
JSX 语法使用第一个字母大小写来区分是一个普通的 HTML 标签还是一个 React 组件。
HTML 类型的标签第一个字母用小写来表示

import React from "react";

// 当一个标签里面为空的时候，可以直接使用自闭和标签。

// class 是 JavaScript 保留关键字，所以如果要写 class 应该替换成 className

let divElement = div className = "foo"/ 

// 等同于

let divElement = React.createElement("div", {className: "foo"});

React 组件标签第一个字母用大写来表示

import React from "react";

class Headline extends React.Component {

 render() {

 // 直接 return JSX 语法

 return h1 Hello React /h1 

let headline = Headline / 

// 等同于

let headline = React.createElement(Headline);

3. JavaScript 表达式

在给组件传入属性的时候，有一大部分的情况是要传入一个 JavaScript 对象的，规则是当遇到{}这个表达式，就把里面的代码当作 JavaScript 代码处理。

属性表达式：

 const MyComponent;

 let isLoggedIn = true;

 let app = MyComponent name = {isLoggedIn ? "viking" : "please login" } / 

子组件表达式：

const MyComponent, LoginForm, Nav;

let isLoggedIn = true;

let app = MyComponent {isLoggedIn ? Nav / : LoginForm / } /MyComponent 

布尔类型属性如下：
当省略一个属性的值的时候，JSX 会自动把它的值认为是 true;

let myBuntton = input type="button" disabled / 

// 等同于

let myButton = input type="button" disabled="true" / 

4. 注释

在 JSX 中使用注释，沿用 JavaScript 的方法，**需要注意的是，在子组件位置需要用{}括起来。

let component = (

 div 

 {/* 这是一个注释 */}

 Headline / 

 /div 

);

5. JSX 展开属性

一个组件有很多属性

const Profile;

let name = "viking", age = 10, gender = "male";

let component = Profile name = {name} age = {age} gender = {gender} / 

属性过多时不好管理，这是可以使用展开属性

const Profile;

let props = {

 name : "viking", 

 age : 10, 

 gender : "male"

let component = Profile {...props} / 

// 也可以混合使用

let component = Profile {...props} name="viking2" / 

console.log(component.props.name);

// viking2 --后面的属性会覆盖前面的属性

React 的 what，why 和 how React 是一个用于构建用户界面的JavaScript 库。 用户界面：HTML 页面（前端） React 主要用来写 HTML 页面，或构建 Web 应用。 如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。
REACT 这是一个 React 文档及相关资源的概览页面。 React 是一个用于构建用户界面的 JavaScript 库。你可以在首页或教程中学习什么是 React。