React基础学习（第一天）

React

概述 :

  • React 是一个用于 构建用户界面 的 JavaScript 库
  • 因为框架是有一整套解决方案的，React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些。React和react-router, react-redux结合起来才叫框架，而React本身只是充当一个前端渲染的库而已
  • 如果从 MVC 的角度来看, React 仅仅是视图层( V ), 也就是只负责视图的渲染, 而非并提供了完整的 M 和 C 的功能
  • React 起源于 Fackbook 的内部项目, 后又用来架设 Ins 的网站, 并与 2013年 5 月开源

特点

  • 声明式

    • 你只需要描述UI (HTML) 看起来是什么样
    • React 负责渲染UI , 并在数据变化时更新 UI
      • <h1>Hello React! 动态变化数据：{count}</h1>
      • <Child></Child>

  • 基于组件

    • 组件是 React 最重要的内容
    • 组件表示页面中的部分内容
    • 组合、复用多个组件，可以实现完整的页面功能

  • 学习一次, 随处使用

    • 使用 React 可以开发 Web 应用
    • 使用 React 可以开发移动端混合应用（react-native）
    • 使用 React 可以开发 VR（虚拟现实）应用（react 360）
    我们现在做的是web页面 app应用 => 原生app + 混合app
- 原生app => ios(苹果)/Android(安卓)
- 混合app  =>  加一个壳子(开发一套前端代码生成的app )=> ios/Android壳子(前端代码)  ios/Android 开发的 => 原生应用app 
ios(web页面)  + Android(web页面)  ==> 混合app  + 借助 react-native

React 的基本使用

包管理器/工具 npm cnpm yarn

  1. npm 最火的 + 淘宝镜像

  2. cnpm 国内 (demo => ok 项目=> cnpm 不要弄)

  3. yarn : Facebook

    1. ​ 使用前必须安装 yarn 的运行模块 npm i yarn -g
    • yarn add xxx
    • yarn remove xxx
    • yarn --version

React 的安装

  • 命令 : yarn add react react-dom
  • react 包 : 是核心包, 提供 创建元素、组件等功能
  • react-dom包 : 渲染DOM功能

React 的基本使用

需求 :

我是h1

  • 1-引入 react 和 react-dom 两个js 文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  • 2-创建 React 元素
// 参数1 : 元素名称
// 参数2 : 属性 (对象)
// 参数3+ : 内容
const h1 = React.createElement('h1',
{title: '啊哈哈'
} ,
'我是h1' )
  • 3-渲染 React 元素
//3.1 准备一个容器<div id="root"></div>// 3.2 开始渲染
// 参数1 : 需要渲染的react元素/react组件
// 参数2 : 指定页面中的DOM容器
ReactDOM.render(h1, document.getElementById('root'))

createElement方法说明

// 参数1 : 元素名称 , 表示要创建的标签名称 (html标签)
// 参数2 : 属性 (对象), 如果有就传对象,没有就传null
// 参数3+ : 子节点  
//			1-文本节点  字符串 
//      2-元素节点  React.createElement() 创建)
const h1 = React.createElement('div',null,// spanReact.createElement('span', null, '我是span'),React.createElement('p', null, '我是p')
)

属性的特殊要求

  • 不推荐使用class, 而推荐使用 className :
    • class => className => 因为class关键字用在创建组件类用了
  • 不推荐使用for, 而推荐使用 htmlFor
    • for => htmlFor ==> 遍历使用了
  • 属性推荐使用 驼峰命名
// for 在 label 上的使用
<label for="app">姓名</label>
<input id="app" type="text" />

小练习 :

<ul id="list" class='red'><li>苹果</li><li>香蕉</li><li>橘子</li>
</ul>
  • 总结 : 使用createElement创建react元素非常的麻烦，推荐您后面使用 JSX
  • 因为 JSX 需要 通过 babel 转化,所以我们使用脚手架(集成babel插件)来初始化项目完成react 的开发工作

React 脚手架

使用脚手架的意义

  • 脚手架是开发 现代Web 应用的必备。
  • 充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。
  • 零配置，无需手动配置繁琐的工具即可使用。
  • 关注业务，而不是工具配置。

安装脚手架-初始化项目-01-npm

  • 安装脚手架 : npm i create-react-app -g
    • 查看版本号 : create-react-app -V
  • 初始化项目 : create-react-app demo1

安装脚手架-初始化项目- 02 - npx (官网推荐)

  • 命令 : npx create-react-app demo2

    • 格式 : npx 脚手架 项目名称

    • [官网] : npx 不是拼写错误 —— 它是npm 5.2+ 附带的 package 运行工具。

  • npx : 简化了工具包中命令的使用方法

    • 原来：1 先全局安装脚手架的包 2 再使用脚手架中提供的命令，来初始化项目
    • 现在：直接使用脚手架来初始化项目即可

  • npx 内部执行的操作：

    • 1 先临时安装脚手架 : npm i create-react-app
    • 2 使用脚手架的命令初始化项目 : create-creat-app demo
    • 3 使用完,删除临时安装的脚手架 : npm un create-react-app

我们推荐使用这一种, 因为以后实际上开发,不可能每天都要初始化一个项目, 而是从项目开始到结束只会初始化一个项目而已

  • 运行 : yarn start
  • 补充说明 :以后react和yarn都是 facebook 出来的,所以以后可以多使用yarn

React 脚手架中使用 react

  • 清理结构 :

    • src/ : 内部文件全部 删除 , 重新创建一个 index.js 入口文件
    • public/ : 内部 文件全部删除, 重新创建一个 index.html 入口页面 ,
      • 添加 容器

  • 简单演示 :

// 1 导入 react 和 reac-dom
import React from 'react'
import ReactDOM from 'react-dom'// 2 创建 react 元素
const h1 = React.createElement('h1', null, 'Hello React CLI')// 3 渲染 react 元素
ReactDOM.render(h1, document.getElementById('root'))
  • 回忆小练习 :
const ul = React.createElement('ul', {id : 'list',className : 'red'
},
React.createElement('li',null,'苹果'),
React.createElement('li',null,'香蕉'),
React.createElement('li',null,'橘子')
)
  • JSX 改造 小练习
const ul = <ul id="list" className='red'><li>苹果</li><li>香蕉</li><li>橘子</li></ul>

JSX

####JSX 的介绍

  • JSX 是 JavaScript XML 的简写, 是一个 JavaScript 的语法扩展。表示在 JS 中写 XML（HTML）格式的代码

    • xml :
    • html :
    • 注意 , 它既不是 xml, 也不是html, 它就是 JSX

  • 为什么要使用 JSX ？ : 爽

    • 1 简洁
    • 2 直观
    • 3 对开发人员友好
    • 4 几乎没有增加额外的学习成本

JSX 的基本使用和注意点

  • 使用
// 使用 JSX 创建 react 元素
const h1 = <h1 className="cls">Hello JSX!</h1>// 渲染 react 元素
ReactDOM.render(h1, document.getElementById('root'))
  • 注意点
    • 注意点1 : JSX 也只能由一个根节点 可以使用 div 或者 </> 包裹起来. (空标签)
    • 注意点2 : 如果 结构比较复杂, 建议使用 () 把代码块包裹起来
    • 注意点3 : JSX 其实底层还是转化成了 React.createElement() 运行的 , babel 中文网
const h1 =(<div><div className='cls'> 我是div</div><div className='cls'> 我是div</div></div>)

在 JSX 中嵌入表达式

  • 语法 : <div>{ js 表达式 }</div>

    • {} 中可以使用 任意j表达式

  • 可以使用表达式

    • 读取变量 : <div > { name }</div>
    • 运算 : <div> {1+2}</div>
    • 三元 : <div > { true ? '真' : '假' }</div>
    • 函数 : <div > { [1,4,7].join('-') }</div> `

  • 不能使用

    • 不能使用 语句 <div > { if(){} }</div> 报错

  • 注意点 : 属性内可以使用 {}

    • <div title={ name } ></div>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

问题一 开发过程中&#xff0c;经常会遇到动态计算行高的问题&#xff0c; - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingC…
阅读更多...
day24 01 初识继承

day24 01 初识继承

day24 01 初识继承 面向对象的三大特性&#xff1a;继承&#xff0c;多态&#xff0c;封装 一、继承的概念 继承&#xff1a;是一种创建新类的方式&#xff0c;新建的类可以继承一个或者多个父类&#xff0c;父类又可称基类或超类&#xff0c;新建的类称为派生类或者子类 class…
阅读更多...
React基础学习（第二天）

React基础学习（第二天）

虚拟DOM JSX 涉及到 虚拟DOM ,简单聊一下 定时器渲染问题 // 方法 function render() {//2. 创建react对象let el (<div><h3>时间更新</h3><p>{ new Date().toLocaleTimeString()}</p></div>)//3. 渲染ReactDOM.render(el, document.g…
阅读更多...
iOS 去除字符串中的空格或多余空格（适合英文单词）

iOS 去除字符串中的空格或多余空格（适合英文单词）

NSString -stringByTrimmingCharactersInSet: 是个你需要牢牢记住的方法。它经常会传入 NSCharacterSet whitespaceCharacterSet 或 whitespaceAndNewlineCharacterSet 来删除输入字符串的头尾的空白符号。 需要重点注意的是&#xff0c;这个方法 仅仅 去除了 开头 和 结尾 的…
阅读更多...
华为交换机在Telnet登录下自动显示接口信息

华为交换机在Telnet登录下自动显示接口信息

因为用console连接交换机&#xff0c;默认是自动显示接口信息的&#xff0c;比如down掉一个接口后&#xff0c;会自动弹出接口被down掉的信息&#xff0c;但是在telnet连接下&#xff0c;默认是不显示这些信息的&#xff0c;需要开启后才可显示。 1、首先开启info-center(默认是…
阅读更多...
React基础学习（第三天）

React基础学习（第三天）

条件渲染 1. if / else render () {if (this.state.isLoading) { // 正在加载中return <h1>Loading...</h1>}return <div>这就是我们想要的内容</div>} // 钩子函数 五秒钟之后 修改状态值componentDidMount () { setTimeout(() > {this.setState(…
阅读更多...
componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

componentsJoinedByString 和 componentsSeparatedByString 的方法的区别

将string字符串转换为array数组 NSArray *array [Str componentsSeparatedByString:","]; &#xff1d;&#xff1d;反向方法 将array数组转换为string字符串 NSString *tempString [mutableArray componentsJoinedByString:","];--,是分隔符 可不加分隔…
阅读更多...
java中的各种数据类型在内存中存储的方式

java中的各种数据类型在内存中存储的方式

转载别人的附上链接&#xff1a;https://blog.csdn.net/zj15527620802/article/details/80622314 1.java是如何管理内存的 java的内存管理就是对象的分配和释放问题。&#xff08;其中包括两部分&#xff09; 分配&#xff1a;内存的分配是由程序完成的&#xff0c;程序员需要通…
阅读更多...
vscode的 jsonp 配置文件

vscode的 jsonp 配置文件

{ // 工具-字体大小 “editor.fontSize”: 15, // 工具-tab缩进 “editor.tabSize”: 2, // 工具-在视区宽度换行 “editor.wordWrap”: “on”, // 工具-缩放 “window.zoomLevel”: 1, // 工具-编写tab识别语言格式 “emmet.includeLanguages”: { “vue-html”: “html”, “…
阅读更多...
NSString拼接字符串和NSPredicate详解

NSString拼接字符串和NSPredicate详解

NSString* string; // 结果字符串 02 NSString* string1, string2; //已存在的字符串&#xff0c;需要将string1和string2连接起来 03 04 //方法1. 05 string [[NSString alloc]initWithFormat:"%,%", string1, string2 ]; 06 07 //方法2. 08 string [string1 …
阅读更多...
线程模块

线程模块

信号量 from threading import Semaphore,Thread import timedef func(a,b):time.sleep(1)sem.acquire()print(ab)sem.release()sem Semaphore(4) for i in range(10):t Thread(targetfunc,args(i,i5))t.start() 信号量事件 # 事件被创建的时候&#xff0c;默认为False状态 #…
阅读更多...
React中级学习（第一天）

React中级学习（第一天）

Props深入 children 作用 : 获取组件标签的 子节点获取方式 : this.props.children <App>此处的内容&#xff0c;就是组件的 children&#xff0c;将来通过组件的 props.children 就可以获取到这些子节点了 </App>props 校验 作用&#xff1a;规定组件props的类…
阅读更多...
iOS 正则表达式判断纯数字以及匹配11位手机号码

iOS 正则表达式判断纯数字以及匹配11位手机号码

1用正则表达式 //是否是纯数字(BOOL)isNumText:(NSString *)str{NSString * regex "(/^[0-9]*$/)";NSPredicate * pred [NSPredicate predicateWithFormat:"SELF MATCHES %", regex];BOOL isMatch [pred evaluateWithObject:st…
阅读更多...
Elasticsearch集成ik分词器

Elasticsearch集成ik分词器

1、插件地址https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v7.0.0/elasticsearch-analysis-ik-7.0.0.zip 2、找到对应版本的插件通过 http://192.168.1.8:9200查看ES的版本&#xff0c;找到对应的IK分词插件 下载与之对应的版本https://github.com/me…
阅读更多...
React中级学习（第二天）

React中级学习（第二天）

JSX 语法的转化过程 (了解) 演示 : babel中文网试一试 let h1 JSX 仅仅是createElement() 方法的语法糖 (简化语法)JSX 语法 被 babel/preset-react 插件编译为 createElement() 方法React 元素&#xff1a;是一个对象&#xff0c;用来描述你希望在屏幕上看到的内容React 元素…
阅读更多...
【】MTCNN基于NCNN的测试过程

【】MTCNN基于NCNN的测试过程

前言 操作过程 NCNN: https://github.com/Tencent/ncnn/wiki/how-to-build#build-for-linux-x86; vector初始化&#xff1a;int num[4] { 1, 4, 3, 2 }; int numLength sizeof(num) / sizeof(num[0]); vector<int> nums(num, num numLength); //使用数组初始化向量 Q&…
阅读更多...
iOS NSTextAttachment - 图文混排

iOS NSTextAttachment - 图文混排

苹果在iOS7中推出了一个新的类NSTextAttachment&#xff0c;它是做图文混排的利器&#xff0c;本文就是用这个类&#xff0c;只用50行代码实现文字与表情混排&#xff0c;当然也可以实现段落中的图文混排。 首先说一下文字和表情的混排&#xff1a; 先来做点儿准备工作&#…
阅读更多...
vuex的结构有哪些参数？

vuex的结构有哪些参数？

查看参考地址&#xff1a; https://vuex.vuejs.org/zh/ vuex 状态管理模式&#xff0c;相当于数据的中间商 注意&#xff1a; 为相同 属性有&#xff1a; 1.State vue中的data —> 存放数据 2.Getter vue中的计算属性computed —>将已有的数据进行计算再次利用 3.…
阅读更多...
百炼OJ - 1004 - 财务管理

百炼OJ - 1004 - 财务管理

题目链接&#xff1a;http://bailian.openjudge.cn/practice/1004/ 思路 求和取平均。。。 #include <stdio.h>int main() {float sum0,a;for(int i0;i<12;i){scanf("%f",&a);sum a;}printf("$%.2f\n",sum/12);return 0; } 转载于:https://w…
阅读更多...
iOS 自定义Cell按钮的点击代理事件

iOS 自定义Cell按钮的点击代理事件

在实际开发工作中&#xff0c;我们经常会在自定义的Cell中布局一些按钮&#xff0c;并且很多时候我们会在点击这个按钮的时候使我们的UItableviewController跳转到下一界面&#xff0c;有的可能还要传值。那么如何使我们的控制器能够获知我们按下了cell的按钮呢&#xff1f;毫无…
阅读更多...
最新文章

Copyright @ 2022~2023