或者官网下载：React官网

React的设定

自定义语法JSX

//js: 
let a = "<div>Hello React!</div>"
//jsx: 
let a = <div>Hello React!</div>

书写格式

//一个标签的书写格式
let a = <div>Hello React!</div>
//多个标签的书写格式**外面必须包一层根元素**
let a = <div><h1>Hello React!</h1></div>

可以自由缩进

let a = <div>
            <h1>aaa</h1>
            <span>bbb</span>
        </div>

可以加括号

let a = (<div>
            <h1>aaa</h1>
            <span>bbb</span>
        </div>)

单标签规则-必须闭合

<br />
<input />
<img />

class-className

<div className = 'aaa'></div>

jsx中使用js代码

var a = 'hello react!'
var b = <div>{a}</div>

React开发模式

  1. 直接引入 - 简单（比较适合开始学习简单的用法）

引入三个文件：
react.js - 核心js
react-dom.js - 虚拟dom
babel - jsx

  1. 脚手架 react-cli

安装

bower - js所有的框架包管理器
bower依赖于node

安装Node

https://nodejs.org/zh-cn/

安装bower

npm install bower -g

bower 简单使用

//查询版本信息
bower info [框架名]
bower install [框架名] //默认下载最高版本
bower install [框架名]#[版本号] //指定某个版本

开始使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        ReactDOM.render(
            <div>初次使用React</div>,
            app
        )
    </script>
</body>
</html>

React基础使用方法

ReactDOM.render(
    组件（内容，元素）,
    放在什么位置    
)；

注：以下代码只展示<script>表标签中的内容

这里有几点注意事项：

  1. <script type="text/babel">要注意，这里值是text/babel
  2. 列表项目

其它的写法

let a = <h1>其他写法1</h1>
ReactDOM.render(a,app)