使用 React + jsx

学习React之前需要掌握的JavaScript知识

判断this的指向
class（类）
ES6语法规范
npm包管理器
原型、原型链
数组常用方法
模块化

使用方式

1. script标签引入
   • react.jsReact的核心库
   • react-dom.js提供与DOM相关的功能
   • browser.jsbabel针对浏览器环境的版本，可将jsx、ES6+等语法编译成浏览器支持的代码

在浏览器中使用 Babel 来编译 JSX 为实时编译， 效率是非常低的，一般只用于演示

2. 使用

   • 创建虚拟节点：React.createElement(type,props,children)
     • type: 节点名称
     • props: 节点属性
     • children: 节点内容
   • 渲染节点：ReactDOM.render(VNode,target)

     是 ReactDOM 的最基本方法，用于将内容渲染到指定节点中

     • VNode：虚拟节点或 React 组件
     • target：挂载点，必须为元素节点

    <script>
       ReactDOM.render(
          React.createElement("div", { className: "container" }, "创建虚拟节点"),
          document.getElementById("app")
       );
    </script>
   

JSX语法

一种特殊的 js 语法，是 ECMAScript 的扩展，可以让我们在 js 代码中使用 html 标签来编写结构，避免繁琐的React.createElement()操作

PS：JSX 是React.createElement()的语法糖，虽然看起来像 HTML，但严格意义上来说它还是 JS，这种特殊的 JS 浏览器无法识别，所以需要 babel 进行编辑，编辑后它最终会转化成 React.createElement()去创建 js 对象。

注意：使用jsx需要遵循以下规则

• 因为 Javascript 代码与 JSX 代码并不兼容，凡是使用 JSX 的script 标签都需要加上 type="text/babel"
• 在 jsx 代码中，同为 js 关键字的 html 属性不能直接使用
  • class -> className,
  • for -> htmlFor
• 属性使用驼峰
  • tabindex -> tabIndex
  • autofocus -> autoFocus
  • onkeydown -> onKeyDown
• 必须结束标签

<input type="text" />
<img src="logo.png" />

• style 属性的值接收一个对象，css 的属性必须为驼峰写法

 <div style={{backgroundColor:"#f60"}}

• 花括号{}内为 js 表达式，不允许出现 var,let,const 等关键字
• 使用 js 语法注释（如{/*注释内容*/}，//注释内容）