这是我参与「第五届青训营」伴学笔记创作活动的第 6 天，今天学习的内容是响应式系统与React,React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。将今天的内容记录下来，以便时时回顾学习。

JSX

JSX 是 react 中允许 js 和 html 混写的语法格式，需要依赖 babel 编译。例如：

const heading = <h1>Mozilla Developer Network</h1>;

浏览器是无法读取直接解析 JSX 的。我们的 header 表达式经过（[Babel]或 [Parcel]之类的工具）编译之后是这样的：

const header = React.createElement("header", null,
React.createElement("h1", null, "Mozilla Developer Network")
);

JSX是在JavaScript内部实现的，是用来声明React当中的元素，React DOM可以确保浏览器DOM的数据内容与React元素保持一致。使用JSX有以下几点好处：

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

组件

React 给我们提供了更好的管理我的代码——组件。组件声明了状态和UI的映射，组件有Props/State两种状态，组件可由其他组件拼装而成。这里我们还是首先我们先了解一下自定义标签：

const element = <Welcome name="yeye" />

封装一个输出hello,yeye的组件。

function HelloMessage(props) { return <h1>Hello yeye!</h1>; } 
const element = <HelloMessage />;
ReactDOM.render( element, document.getElementById('example') );

React 事件处理

<button onClick={activateLasers}>
  激活按钮
</button>

在 React 中不能使用返回 false 的方式阻止默认行为，你必须明确使用 preventDefault。

function ActionLink() { 
   function handleClick(e) { 
      e.preventDefault();
      console.log('链接被点击'); 
      } 
      return ( <a href="#" onClick={handleClick}> 点我 </a> ); 
      }

React的应用级框架

NEXT.js:稳定，开发体验好
MODERN.js:内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。
Blitz:无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑。

因为前端刚入门，之前也没有了解过React框架，老师的课堂目前也是一知半解，所以见解不是很多，等好好学习过后再来补充！

响应式系统与 React| 青训营笔记

JSX

组件

React 事件处理

React的应用级框架