【注意】内容不再维护。
React 介绍 初识 React React 不是一个完整的 MVC、MVVM 框架,其只负责 View 层,MVC 已经不适用于某些场景的开发 React 跟 Web Components 不冲突 React 的特点就是“轻”,数据单向绑定,独立、小巧、快速、创新 组件化的开发思路,小组件构成大组件,高度可重用 React 应用场景 复杂场景下的高性能 重用组件库,组件组合 “懒”,少做无用功 你总是这样轻言放弃的话,无论过多久都只会原地踏步。 —— 多啦 a 梦
前置知识 JS CSS Sass Compass Yeoman Grunt Webpack CommonJS NodeJS Git GitHub To Be A Better Engineer 无论知识有多新、项目有多难,只要来了什么姿势都要上 没人疼、没人爱,团队中没人可以帮上忙,要学会借助外力,视频、Google、开源项目 积极要求进步 React 的 JSX 与 Style 官网:React - A JavaScript library for building user interfaces
罐头是 1810 发明出来的,可是开罐器呢,却在 1858 年才发明出来。有时就是这样,重要的东西可能迟来一步,但却一定会到。生活和爱情,都是如此。程序,当然也不例外。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Hello World</title> <script src="https://unpkg.com/react@latest/dist/react.js"></script> <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <style> .fontcolor { color: blue !important; } </style> </head> <body> <div id="root"></div> <script type="text/babel"> var Hello = React.createClass({ render: function () { return <div className="fontcolor">Hello {this.props.name}!</div>; }, }); class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } ReactDOM.render( <div> <Hello name="World" /> <Welcome name="World" /> </div>, document.getElementById("root") ); </script> </body> </html> 添加组件属性,有一个地方需要注意:class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。然后,属性名都是驼峰命名法。
...