react demo2 (JSX入门)
2017-05-06 11:42
344 查看
react dome 2
JSX入门
需求:渲染一行标题,显示“Hello, world!”
JSX入门
需求:渲染一行标题,显示“Hello, world!”
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <script src="./build/react-dom.js"></script> <script src="./build/browser.min.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> // 需求:JSX入门 // 渲染一行标题,显示“Hello, world!” //1.JSX必须借助react环境运行 /* 2.JSX标签其实就是html标签,只不过我们在javascript中书写这些标签的时候,不用使用“”括起来,可以像xml一样书写 ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('container') ); */ /* 3.转换:JSX语法能够让我们更加直观的看到dom结构,不能直接在浏览器上运行,最终会转换成javascript代码 var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var child3 = React.createElement('li', null, 'Third Text Content'); var root = React.createElement('ul', { className: 'my-list' }, [child1, child2, child3]); ReactDOM.render( root, document.getElementById('container') ); */ /* 4.在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中 var text = "啊哈哈"; ReactDOM.render( <h1>{text}</h1>, document.getElementById('container') ); */ </script> </body> </html>
相关文章推荐
- React入门笔记(一) — 深入理解JSX
- React入门:关于JSX语法
- React入门教程(一)——JSX学习篇
- React 入门-JSX
- 【原创】React实例入门教程(1)基础API,JSX语法--hello world
- React 入门,5个常用DEMO展示
- Dva0.7.9 React 入门 Demo 篇章 1
- React 入门,5个常用DEMO展示
- React-Native入门指南(六)——JSX在React-Native中的应用
- React-Router入门Demo
- React Native入门学习笔记三(JSX语法)
- React实例入门教程(1)基础API,JSX语法--hello world
- React入门系列二(React-JSX)
- react 入门-JSX
- Dva React 入门 Demo 篇章 2
- React入门:关于JSX语法
- JavaScript的React框架中的JSX语法学习入门教程
- SPA:React + React-router 入门demo
- React入门以及JSX语法理解
- React入门笔记(一) — 深入理解JSX