企业官方网站建设的作用,网站改自适应 做自适应,北恩uc3客户管理软件,巢湖网站建设公司看了下react官方的hello world教程, 感觉对新手很不友好.codepen虽然好用, 但是封装太多东西, 看起来 太抽象. 还是喜欢像学习jQuery那样, 直接在单文件中引入必要的js文件, 然后直接运行的那种感觉. 如果使用VS Code, 建议安装Sublime Babel, 来提供对react语法的代码高亮. 基…看了下react官方的hello world教程, 感觉对新手很不友好.codepen虽然好用, 但是封装太多东西, 看起来 太抽象. 还是喜欢像学习jQuery那样, 直接在单文件中引入必要的js文件, 然后直接运行的那种感觉. 如果使用VS Code, 建议安装Sublime Babel, 来提供对react语法的代码高亮. 基础hello-world 直接复制以下代码, 粘贴自己的编辑器里, 打开即可运行. !DOCTYPE html html headmeta charsetUTF-8titleHello World/titlescript srchttps://unpkg.com/react15.6.1/dist/react.min.js/scriptscript srchttps://unpkg.com/react-dom15.6.1/dist/react-dom.min.js/script!-- 上面2个是引入react必要的js --script srchttps://unpkg.com/babel-standalone6.26.0/babel.min.js/script!-- babel是1个JavaScript预编译器, 由于新版react使用了很多ES6新语法, 故很多浏览器不支持直接运行, 我试了下, 去掉这个babel预编译器, 使用chrome 60.0依旧无法正常运行.babel说白了就是把ES6语法翻译成向后兼容的ES5/3语法, 从而能够在绝大部分浏览器中运行. --!-- 上述3个js文件的大小:react.min.js 23.04KBreact-dom.min.js 130.29 KBbabel.min.js 791.24KB -- /headbody div idroot/div script typetext/babel // 注意这里 text/babel 不可省ReactDOM.render(h1Hello, world!/h1, // 这是JSX语法document.getElementById(root) // 获取到root元素);/script /body /html 利用组件带参数输出hello-world react中1个class定义1个组件, 每个组件都有1个render()方法来渲染页面. !DOCTYPE html html headmeta charsetUTF-8title利用组件输出hello-world/titlescript srchttps://unpkg.com/react15.6.1/dist/react.min.js/scriptscript srchttps://unpkg.com/react-dom15.6.1/dist/react-dom.min.js/scriptscript srchttps://unpkg.com/babel-standalone6.26.0/babel.min.js/script /headbody div idroot/div script typetext/babelclass HelloMessage extends React.Component {render() {return divHello {this.props.name}/div;} }ReactDOM.render(HelloMessage nameminecraft /, document.getElementById(root) );/script /body /html 转载于:https://www.cnblogs.com/asheng2016/p/7481987.html