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

相关文章
|
3月前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
42 4
|
2天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
17 8
|
14天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
3月前
|
前端开发 JavaScript 算法
React框架有哪些特点?
【8月更文挑战第28天】React框架有哪些特点?
209 65
|
25天前
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用
|
25天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
2月前
|
前端开发 搜索推荐 API
【Prompt Engineering:ReAct 框架】
ReAct 框架由 Yao 等人(2022)提出,结合大语言模型(LLMs)生成推理轨迹与任务操作,交替进行推理与行动。此框架允许模型与外部环境(如知识库)互动,以动态更新操作计划并处理异常。ReAct 在语言和决策任务上表现优异,提升模型的人类可解释性和可信度。研究显示,ReAct 优于多个基准模型,尤其在结合链式思考时效果最佳。通过实例演示,ReAct 能有效整合内外部信息,优化推理过程。
【Prompt Engineering:ReAct 框架】
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
2月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
78 4
|
3月前
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
60 1