做网站设计用什么软件,贵州网站建设,深圳建设局网和住房网,wordpress用哪个国外空间定义
react#xff1a;用于构建用户界面的 JavaScript 库 #xff08;仅负责View层渲染、应在视图上体现交互逻辑#xff09;vue#xff1a;渐进式JavaScript 框架#xff08;MVVM#xff09;
使用
引入CDN脚本添加根容器 div #app创建React组件
ReactDOM.render
Re…定义
react用于构建用户界面的 JavaScript 库 仅负责View层渲染、应在视图上体现交互逻辑vue渐进式JavaScript 框架MVVM
使用
引入CDN脚本添加根容器 div #app创建React组件
ReactDOM.render
ReactDOM → render → 虚拟DOM → 真实DOM放入容器
React.create
创建React元素 → 虚拟节点 → 真实节点
const oSpan React.createElement(span, {className: text
}, 子节点span)
ReactDOM.render(React.createElement(h1, {// 属性data-tag: h1}, [oSpan]),// 容器document.getElementById(app)
)React组件
React.Component渲染视图必须放入render函数且return视图
// 继承 使用React提供的关于组件的api
class MyButton extends React.Component {constructor(props) {super(props)this.state {openStatus: false}}// 渲染视图必须放入render函数且return视图render() {return 视图}
}class MyButton extends React.Component {constructor(props) {super(props)this.state {openStatus: false}}render() {// 渲染视图必须放入render函数且return视图const oP React.createElement(p, {key: 2}, this.state.openStatus ? open状态 : close状态)const oBtn React.createElement(button, {key: 1,onClick: () {this.setState({openStatus: !this.state.openStatus})}}, this.state.openStatus ? 关闭 : 打开)const wrapper React.createElement(div, {}, [oP, oBtn])return wrapper}
}工程化
npx create-react-app my-first-react-app
// npxnpm5.2 的包运行工具
create-react-app
// 脚手架工具内部的工程化 → babel/webpack
cd my-first-react-app
yarn start/npm start初始化目录
不必要的可以删除
App.js
function App() {return (div classNameApp/div);
}export default App;import { Component } from react
class App extends Component {render() {return (div classNameApp 11111/div);}
}export default App;
