介紹:
React 是一個用于構建用戶界面的 JavaScript 庫，是用 JavaScript 構建「快速回應」的大型 Web 應用程式的首選方式，
由于 React 的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單，所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具，
在 React 中，可以將頁面中每個部分分成每一個獨立的小模塊，每個小模塊就是組建，這些組件可以互相組合和嵌套，就組成每一個頁面，相比傳統操作 DOM 的前端開發方式，我們「主要要關心的是應用中資料的變化」 ，React 會幫我們將 UI 渲染完成，
流程:
在學習react時,和我們學習vue一樣 也要先了解它的使用方式.
那么首先呢是
第一種使用方式 - 直接在index中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
React.createElement("h1",null,"我是子元素"),
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
</body>
</html>
第二種-React創建視圖
<script>
let h1 = React.createElement("h1",null,"我是標題")
let p = React.createElement("h1",null,"我是一個短路標簽")
let el = React.createElement(
"header",
{id:"header"},
h1,
p
)
ReactDOM.render(
el,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
可以看到我們這種先定義后再使用的方式也是可以的
第三種-JSX
注意:
JSX 是一個基于 JavaScript + XML 的一個擴展語法
- 它可以作為值使用
- 它并不是字串
- 它也不是HTML
- 它可以配合JavaScript 運算式一起使用
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<h1>hello react</h1>
<p>JSX的渲染</p>
</header>,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
</body>
//還要引入這個
<script src="js/babel.min.js"></script>
JSX是直接把我們的標簽放到了需要渲染的位置了,方便很多,但是格式不美觀
第四種-插值運算式
<div id="root"></div>
<script type="text/babel">
// let str = "天氣不錯"
// let str = 1
// let str = false 不輸出
// let str = false
// let str = ["哈哈","狠狠","呼呼"]
let str = {
name:"唐悠悠",
age:18,
sex:"女"}
ReactDOM.render(
<header>
<h1>{str.name}</h1>
<p>JSX的渲染</p>
</header>,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
</body>
<script src="js/babel.min.js"></script>
這個插值則是定義一個變數,然后和JSX方式一樣,直接在標簽內使用,不過它是把值賦值給變數后,再呼叫變數.
第五種-條件輸出
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<h1>{false ? "成立":"不成立"}</h1>
<p>{true ||"利用JSX渲染"}</p>
<div>{true&&"正確"}</div>
</header>,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
<script src="js/babel.min.js"></script>
這里是進行了我們常用的條件判斷三元運算子來使用,本質依然是JSX
第六種-串列回圈
<div id="root"></div>
<!-- <ul></ul> -->
<script type="text/babel">
let data = [
"內容1",
"內容2",
"內容3",
"內容4"
]
// function toData(){
// let arr =[];
// data.forEach(item=>{
// arr.push(<li>{item}</li>)
// })
// return arr
// }
ReactDOM.render(
// <header>
// {toData()}
// </header>,
<ul>
{
data.map(item=>{
return<li>{item}</li>
})
}
</ul>,
document.querySelector("#root"),
()=>{
console.log("渲染成功")
}
)
</script>
<script src="js/babel.min.js"></script>
這里則是有兩種方式進行云環渲染,一種是直接JSX格式,回圈完后呼叫變數,另一種則是再要渲染的內容出進行回圈代碼.
第七種-JSX注意事項
JSX 使用注意事項
必須有,且只有一個頂層的包含元素 - React.Fragment
JSX 不是html，很多屬性在撰寫時不一樣
className
style
串列渲染時，必須有 key 值
在 jsx 所有標簽必須閉合
組件的首字母一定大寫，標簽一定要小寫
好了,這里呢,基礎就到這里了,下面是我們安裝和使用React
安裝React
npm
npm i -g create-react-app
yarn
yarn global add create-react-app
使用
安裝完成以后，即可使用 create-react-app 命令
create-react-app <專案名稱>
或者通過 npx 的方式
npx
npx create-react-app <專案名稱>
運行命令以后，就會在運行命令所在目錄下面創建一個以專案名稱為名的目錄
然后我們進入創建的專案
cd <專案名>
npm start
如果在啟動專案時出現錯誤,那多半是 eject 沒安裝上,我們需要在 命令列上輸入
npm run eject
然后選擇yes,重新跑下專案就可以了.
總結:
React的使用是多樣的有一下很多種使用方式
第一種使用方式 - 直接在index中使用
第二種-React創建視圖
第三種-JSX
第四種-插值運算式
第五種-條件輸出
第六種-串列回圈
第七種-JSX注意事項
然后就是我們的安裝了,這個可以往上看,如果覺得不詳細的可以搜索一下
哦吼,然后就是我個人在安裝時遇到的一些問題了
我在安裝React時,在全域安裝后,創建專案時,使用了大寫字母,不行!,常見專案時只能使用小寫字母,
然后就是啟動專案時報的錯誤,報的是專案沒有獲取到,后來我仔細檢測發現是package.json檔案里的script中的eject屬性沒有安裝上,因此在命令列上使用npm run eject后選擇yes,也就是把檔案暴露出來,這樣就能獲取到了,然后再重新啟動下專案就可以啦.
喜歡的話可以點贊關注收藏三連
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290670.html
標籤：其他
上一篇：前端框架Vue學習