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.pswp.cn/news/247924.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247924.shtml
英文地址，請注明出處：http://en.pswp.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