React 技术栈
React 是目前最热门的前端框架。
Facebook 公司2013年推出
现在最好的社区支持和生态圈
大量的第三方工具
React 的优点
组件模式:代码复用和团队分工
虚拟 DOM:性能优势
移动端支持:跨终端
React 的缺点
学习曲线较陡峭
全新的一套概念,与其他所有框架截然不同
只有采用它的整个技术栈,才能发挥最大威力
因为React许可协议, 可能不适用于某些公司的使用场景
总结:React 非常先进和强大,但是学习和实现成本都不低
Facebook 公司2013年推出
现在最好的社区支持和生态圈
大量的第三方工具
React 的优点
组件模式:代码复用和团队分工
虚拟 DOM:性能优势
移动端支持:跨终端
React 的缺点
学习曲线较陡峭
全新的一套概念,与其他所有框架截然不同
只有采用它的整个技术栈,才能发挥最大威力
因为React许可协议, 可能不适用于某些公司的使用场景
总结:React 非常先进和强大,但是学习和实现成本都不低
JSX 语法
React 使用 JSX 语法,JavaScript 代码中可以写 HTML 代码。
letmyTitle=<h1>Hello, world!</h1>;
letmyTitle=<h1>Hello, world!</h1>;
JSX 语法解释
(1)JSX 语法的最外层,只能有一个节点。
//错误letmyTitle=<p>Hello</p><p>World</p>;
//错误letmyTitle=<p>Hello</p><p>World</p>;
(2)JSX 语法中可以插入 JavaScript 代码,使用大括号。
letmyTitle=<p>{'Hello'+'World'}</p>
letmyTitle=<p>{'Hello'+'World'}</p>
Babel 转码器
JavaScript 引擎(包括浏览器和 Node)都不认识 JSX,需要首先使用 Babel 转码,然后才能运行。
<scriptsrc="react.js"></script>
<scriptsrc="react.js"></script>
<scriptsrc="react-dom.js"></script>
<scriptsrc="babel.min.js"></script>
<scripttype="text/babel">//** Our code goes here! **</script>
React 需要加载两个库:React 和 React-DOM,前者是 React 的核心库,后者是 React 的 DOM 适配库。Babel 用来在浏览器转换 JSX 语法,如果服务器已经转好了,浏览器就不需要加载这个库。