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

news2024/11/24 9:25:43

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

从这一课开始真正进入到React框架的基础语法学习,之前的前五课做个了解即可。

1 React框架的基本项目结构

├── README.md 使用方法的文档

├── node_modules 所有的依赖安装的目录

├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。

├── package.json ├── public 静态公共目录

└── src 开发用的源代码目录

2 编写第一个react应用程序

react开发需要引入多个依赖文件:react.js、react-dom.js,分别又有开发版本和生产版本,createreact-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空,然后在 里面重新创建一个index.js. 写入以下代码:

目录结构一

 

目录结构二

 

第1个程序,hello world。

 

<!DOCTYPE html>
<html lang="en">
  <style>
    *{
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      font-size: 30px;
    }
  </style>
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <h1 style="text-align: center;">Helloworld</h1>
    
    <div id="root"></div>
   
  </body>
</html>
// 从 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。

ReactDOM.render(
    // <div>
    <b><h1>ReactDOM里有一个render方法,功能就是把组件渲染并且构造 DOM 树,然后插入到页面上某个特定的元素上</h1></b>
    // </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
     */

运行结果

 3 JSX语法

JSX 将 HTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换到纯 JavaScript 后由浏览器执行。 在实际开发中,JSX 在产品打包阶段都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码 更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。

 

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
     */

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/481044.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[架构之路-181]-《软考-系统分析师》-19- 系统可靠性分析与设计 - 2-容错性: 软件容错技术

目录 前言&#xff1a; 1 9 . 4 软件容错技术 19.4.1 N 版本程序设计 1 . 与 通 常 软 件 开 发 过 程 的 区 别 2 . 其 他 需 要 注 意 的 问 题 19.4.2 恢复块方法 19.4.3 防卫式程序设计&#xff08;预防性设计&#xff09;》广泛使用 1 . 错误检测 2 . 破坏估计 …

【C++初阶】类与对象:6个默认成员函数-----构造函数和析构函数

我们在写代码的时候经常会忘记初始化和销毁&#xff0c;C的构造函数和析构函数就能避免这个问题。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会生成的成员函数称为默认成员函数。 一.构造函数 A.概念 1.构造函数是一个特殊的成员函数&#xff1b; 2.名字与…

React框架的第八课 语法基础课《第二课React框架中的事件》

React框架的第八课 语法基础课《第二课React框架中的事件》 React中的事件是指通过React建立的应用程序中处理用户交互的响应。React事件处理程序只是在组件上调用的JavaScript函数&#xff0c;以响应某些类型的操作或事件&#xff0c;例如点击、触摸、滚动等。 React组件可以使…

【P3】HTTP 接口设计

一、简答 HTTP 接口设计 HTTP请求默认值&#xff1a; 配置 http 请求的默认值&#xff0c;比如协议、主机、端口 HTTP信息头管理器&#xff1a; 配置 http 请求的头部参数 HTTP请求&#xff1a; 用于和业务交互 查看结果树&#xff1a; 用于结果展示 二、准备工作 慕慕生…

希尔排序详解(Shell Sort)

本文已收录于专栏 《算法合集》 一、简单释义 1、算法概念 希尔排序是插入排序的一种又称“缩小增量排序”&#xff0c;是直接插入排序算法的一种更高效的改进版本。希尔排序是把记录按下标的一定增量分组&#xff0c;对每组使用直接插入排序算法排序&#xff1b;随着增量逐渐…

【复杂网络建模】——Pytmnet进行多层网络分析与可视化

目录 一、Pymnet介绍 二、安装步骤 三、多层网络的构建 1、单层网络的构建 2、双层随机网络的构建和可视化 3、多路复用网络图的可视化 四、总结 一、Pymnet介绍 官网&#xff1a; Pymnet是一个用于网络分析和建模的Python库。它提供了各种网络分析工具&#xff0c;例…

shell的基础学习一

文章目录 一、shell的简介二、 Shell 变量三、Shell 传递参数总结 一、shell的简介 Shell 是一个用 C 语言编写的程序&#xff0c;它是用户使用 Linux 的桥梁。Shell 既是一种命令语言&#xff0c;又是一种程序设计语言。 Shell 是指一种应用程序&#xff0c;这个应用程序提供…

百胜中国:未来将实现强劲增长

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 收入分析与未来展望 在过去的三年里&#xff0c;百胜中国&#xff08;YUMC&#xff09;的收入一直受到疫情导致的旅行限制和封锁的影响。为了应对疫情造成的业务中断&#xff0c;该公司开始专注于外卖业务&#xff0c;并将…

中通快递财报预测:中通快递2023年收入和利润将大幅下降

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 市场对中通快递2023年的预测 卖方虽然预测中通快递&#xff08;ZTO&#xff09;在2023年的表现会很不错&#xff0c;但他们也预计中通快递今年的财务业绩将不会像去年那样好。 根据S&P Capital IQ的数据&#xff0c;卖…

【软考备战·希赛网每日一练】2023年5月1日

文章目录 一、今日成绩二、错题总结第一题第二题 三、知识查缺 题目及解析来源&#xff1a;2023年05月01日软件设计师每日一练 一、今日成绩 二、错题总结 第一题 解析&#xff1a; 了解即可。 第二题 解析&#xff1a; 在序列基本有序时&#xff0c;快速排序基准元素起不到分…

第16章 变更管理

文章目录 16.1.2 项目变更的分类 50416.1.3 项目变更产生的原因 50516.2 变更管理的基本原则 50516.3 变更管理角色职责与工作程序 50616.3.1 角色职责 50716.3.2 工作程序 50716.4.1 变更管理操作要点 511 16.1 项目变更的基本概念 504 项目变更是指在信息系统项目的实施过程中…

【蓝桥杯】Python基础:经济基础决定上层建筑!

前言&#xff1a;今年4月第一次参加蓝桥杯比赛&#xff0c;选择的Python 研究生组赛道。在备赛过程中&#xff0c;发现经常会用到一些编程小技巧&#xff0c;因此笔者整理了一些蓝桥杯Python组编程基础常用的内容&#xff0c;以便日后备用。如果有小伙伴也觉得实用&#xff0c;…

1 对数器,二分查找,

文章目录 对数器二分查找**1. 有序序列二分查找****2. 在一个有序数组中&#xff0c;找<某个数最右侧的位置****3. 在一个有序数组中&#xff0c;找>某个数最左侧的位置****4. 无序序列二分查找 &#xff0c;求局部最小值** 对数器 对数器用于在自己的本地平台验证算法正…

百度、谷歌等搜索引擎高效搜索方法 —— 更快速搜索到你想要内容

一、常用搜索方法 1、限定标题 intitle 又被称为去广告搜索法&#xff0c;intitle命令&#xff0c;即in title&#xff08;在标题里&#xff09;返回的的结果是网页的标题包含该关键词。一般情况下搜索的关键词都会在标题里出现&#xff0c;使用intitle命令一般是在特殊需求下…

极乐迪斯科(风格) | Disco Elysium – Style LoRA

目录 What is this ❓How to use / 使用方法 &#x1f4dd;其他信息与参数: 模型演示&#xff08;多图预警&#xff09; 正面tag 负面tag What is this LoRA版本的极乐迪斯科风格模型, 使用共计15张图片, 分辨率为1024*1024, 用Anything v4.5训练. 其他模型没有经过测试,…

Linux之【多线程】生产者与消费者模型BlockQueue(阻塞队列)

生产者与消费者模型 一、了解生产者消费者模型二、生产者与消费者模型的几种关系及特点三、BlockQueue&#xff08;阻塞队列&#xff09;3.1 基础版阻塞队列3.2 基于任务版的阻塞队列3.3 进阶版生产消费模型--生产、消费、保存 四、小结 一、了解生产者消费者模型 举个例子&am…

计算机组成原理第五章(3)DMA处理

三种控制方式&#xff1a;程序查询程序中断DMA方式 回顾一下 之前的中断控制方式&#xff0c;如果是输入命令&#xff0c;先启动命令&#xff0c;通过地址总线选择相应的接口&#xff0c;通过地址译码之后的到选择电路&#xff0c;这个接口准备开始工作。 启动外部设备&#…

网络编程总结一:

一、网络基础&#xff1a; 概念&#xff1a;1> 网络编程的本质就是进程间的通信&#xff0c;只不过进程分布在不同的主机上 2>在跨主机传输过程中&#xff0c;需要确定通信协议后&#xff0c;才可以通信 1. OSI体系结构&#xff08;重点&#xff09; 定义7层模型&…

类和对象(上篇)【C++】

C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事拆分成不同的对象&#xff0c;靠对象之间的交互完成。 目录 一、类的定义 二、访问限定符…

【小样本分割 2020 TPAMI 】PFENet

文章目录 【小样本分割 2020 TPAMI 】PFENet1. 简介1.1 问题1) 高级特征误用造成的泛化损失2) 查询样本和空间样本之间的空间不一致 1.2 方法 2. 网络2.1 整体架构2.2 先验掩膜生成2.3 FEM模块 3. 代码 【小样本分割 2020 TPAMI 】PFENet 论文题目&#xff1a;Prior Guided Fea…