4.Class组件
ES6的加入让JavaScript直接支持使用class来定义一个类,react创建组件的方式就是使用的类的继承,
ES6 class 是目前官方推荐的使用方式,它使用了ES6标准语法来构建,看以下代码:
import React from "react"; // Class组件的创建 class App extends React.Component{ // render固定的 render(){ return( <div>第1个class组件react组件。 <ul> <li>1111111</li> <li>2111111</li> <li>3111111</li> <li>4111111</li> <li>5111111</li> </ul> </div> ) } } export default App
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有 //一种语法叫JSX,稍后会讲到JSX,要写JSX,就必须引入React // import App from './App'; import React from'react' // ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用了。它是从 react-dom 中 //引入的,而不是从 react 引入。 import ReactDOM from 'react-dom' // ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上 // 这里就比较奇怪了,它并不是一个字符串,看起来像是纯 HTML 代码写在 JavaScript 代码里面。语 //法错误吗?这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。 import App from'./01-base/01-class组件' ReactDOM.render( // <div> // <b><h1>ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上</h1></b> // <h2>JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面</h2> // </div> // React.createElement("div",{ // id:"aaaa", // class:"bbbbb" // },"我是第二种方案") // <div>11111</div> <App></App> , document.getElementById("root") ) //JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面 /** * jsx=js+xml */
5. 函数式组件
function App(){ return( <div>function函数组件内容</div> ) } export default App
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有 //一种语法叫JSX,稍后会讲到JSX,要写JSX,就必须引入React // import App from './App'; import React from'react' // ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用了。它是从 react-dom 中 //引入的,而不是从 react 引入。 import ReactDOM from 'react-dom' // ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上 // 这里就比较奇怪了,它并不是一个字符串,看起来像是纯 HTML 代码写在 JavaScript 代码里面。语 //法错误吗?这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。 // import App from'./01-base/01-class组件' import App from'./01-base/02-函数式组件' // import App from './01-base/07Ref' // import App from './01-base/08state' // import App from './01-base/09数组循环' ReactDOM.render( // <div> // <b><h1>ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上</h1></b> // <h2>JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面</h2> // </div> // React.createElement("div",{ // id:"aaaa", // class:"bbbbb" // },"我是第二种方案") // <div>11111</div> <App></App> , document.getElementById("root") ) //JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面 /** * jsx=js+xml */
6 组件套娃
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有 //一种语法叫JSX,稍后会讲到JSX,要写JSX,就必须引入React // import App from './App'; import React from'react' // ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用了。它是从 react-dom 中 //引入的,而不是从 react 引入。 import ReactDOM from 'react-dom' // ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上 // 这里就比较奇怪了,它并不是一个字符串,看起来像是纯 HTML 代码写在 JavaScript 代码里面。语 //法错误吗?这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。 // import App from'./01-base/01-class组件' // import App from'./01-base/02-函数式组件' import App from'./01-base/03组件套娃' // import App from './01-base/07Ref' // import App from './01-base/08state' // import App from './01-base/09数组循环' ReactDOM.render( // <div> // <b><h1>ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上</h1></b> // <h2>JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面</h2> // </div> // React.createElement("div",{ // id:"aaaa", // class:"bbbbb" // },"我是第二种方案") // <div>11111</div> <App></App> , document.getElementById("root") ) //JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面 /** * jsx=js+xml */
import React, { Component } from 'react' class Navbar extends Component{ render(){ return(<div>Navbar <Child></Child> <Child2></Child2> </div>) } } class Child extends Navbar{ render(){ return(<div>Child <SON></SON> </div>) } } class Child2 extends Navbar{ render(){ return(<div>Child2</div>) } } function SON(){ return (<div>SON</div>) } function Swiper(){ return (<div>Swiper</div>) } const Tabber=()=>(<div>Tabber</div>) export default class APP extends Component { render() { return ( <div> <Navbar></Navbar> <Swiper></Swiper> <Tabber></Tabber> </div> ) } }
7 组件的样式
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有 //一种语法叫JSX,稍后会讲到JSX,要写JSX,就必须引入React // import App from './App'; import React from'react' // ReactDOM 可以帮助我们把 React 组件渲染到页面上去,没有其它的作用了。它是从 react-dom 中 //引入的,而不是从 react 引入。 import ReactDOM from 'react-dom' // ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上 // 这里就比较奇怪了,它并不是一个字符串,看起来像是纯 HTML 代码写在 JavaScript 代码里面。语 //法错误吗?这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。 // import App from'./01-base/01-class组件' // import App from'./01-base/02-函数式组件' // import App from'./01-base/03组件套娃' import App from'./01-base/04-组件的样试' // import App from './01-base/07Ref' // import App from './01-base/08state' // import App from './01-base/09数组循环' ReactDOM.render( // <div> // <b><h1>ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上</h1></b> // <h2>JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面</h2> // </div> // React.createElement("div",{ // id:"aaaa", // class:"bbbbb" // },"我是第二种方案") // <div>11111</div> <App></App> , document.getElementById("root") ) //JSX —使用react构造组件,bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面 /** * jsx=js+xml */
import React, { Component } from 'react' import '../css/01-index.css' export default class APP extends Component { render() { var objs = { color: 'red', fontSize: '20px', borderBlockColor: 'red', backgroundColor: 'yellow', textAlign: 'center', padding: '20px', width:'600px' } return ( <div> {10 + 20 + 34 + 56 + 77}<br></br> {'mynam'}<br></br> {10 > 20 ? 'aaaa' : 'bbbb'}<br></br> { /* 行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现: React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体 */ } <div style= { { color: 'back', fontSize: '20px', borderBlockColor: 'red', backgroundColor: 'pink', textAlign: 'center', padding: '20px', width:'600px' } }>样式内容</div> <div style={objs}>222222</div> <div className="active">3333333</div> <label for="username">用户名</label> <input type="text" id='username'/> </div> ) } }