React框架第七课 语法基础课《第一课React你好世界》(二)

简介: React框架第七课 语法基础课《第一课React你好世界》(二)

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>
        )
    }
}

相关文章
|
10天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
36 9
|
3月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
44 4
|
8天前
|
JavaScript 前端开发 容器
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
React零基础入门02--JSX语法基础
|
4天前
|
开发框架 前端开发 JavaScript
React 框架的优点和缺点是什么?
React框架作为当前主流的前端开发框架之一,具有诸多优点,同时也存在一些缺点
|
4天前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
4天前
|
移动开发 前端开发 JavaScript
React框架
React是一个用于构建用户界面的JavaScript库,由Facebook开发并于2013年开源,目前在前端开发领域得到了广泛的应用。
|
22天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
3月前
|
前端开发 JavaScript 算法
React框架有哪些特点?
【8月更文挑战第28天】React框架有哪些特点?
217 65
|
1月前
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用
|
1月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门