日韩欧美人妻无码精品白浆,夜夜嗨AV免费入口,国产欧美官网在线看,高校回应聋哑女生因长相完美被质疑

今天開始學(xué)習(xí) react。

如果對(duì) HTML，CSS 和 JavaScript 還不熟悉，請(qǐng)先學(xué)習(xí)完這三門基礎(chǔ)再來。

?? 如果還不了解 HTML 、?CSS和JS，可以參考：?HTML21 天入門教程、?CSS 21 天入門教程和JS21天入門教程。

什么是 react

?

上面是 react 的圖標(biāo)。

簡單來說，React 是一個(gè) JavaScript 庫。

它用于構(gòu)建用戶界面，也就是 UI 部分，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內(nèi)部項(xiàng)目，于 2013 年 5 月開源。

react 的特點(diǎn)

說一千，道一萬，選擇 react 主要是因?yàn)橐韵略颍?/p>

• 聲明式設(shè)計(jì)：輕松描述應(yīng)用。

• 高效：最大限度地減少與 DOM 的交互。

• 靈活：可以與已知的庫或框架很好地配合。

• JSX：融合 HTML 和 JavaScript 開發(fā)。React 開發(fā)不一定使用 JSX ，但我們建議使用它。

• 組件：構(gòu)建組件，使得代碼更容易復(fù)用。

• 單向響應(yīng)的數(shù)據(jù)流：減少了重復(fù)代碼，數(shù)據(jù)綁定更簡單。

react 開發(fā)環(huán)境搭建

因?yàn)?react 實(shí)際上就是 JavaScript 類庫，只要引用了這個(gè)類庫，就可以使用它。

在實(shí)際操作中，有兩種方式可選：

• 通過 npm 創(chuàng)建 react 項(xiàng)目：create-react-app

• 通過 CDN 引用 react 庫

本教程使用第一種方式。

準(zhǔn)備工作

確保安裝了 Node.js 和 npm，由于 Node.js 安裝包里自帶了 npm，所以就要安裝了 Node.js 就可以。參考npm 基礎(chǔ)入門安裝 Node.js。

安裝之后通過以下命令查看版本以確保安裝成功。

node?-v?npm?-v?

創(chuàng)建第一個(gè) react 項(xiàng)目

React 提供了官方工具 Create React App，用于快速搭建 React 項(xiàng)目。

通過該命令我們無需配置就能構(gòu)建 React 開發(fā)項(xiàng)目。

create-react-app?創(chuàng)建的項(xiàng)目是基于 Webpack + ES6 。

安裝 create-react-app

先安裝這個(gè)工具。

npm?install?-g?create-react-app?

如果下載速度很慢，使用 npm 國內(nèi)的鏡像。

在本地目錄下選擇一個(gè)目錄準(zhǔn)備放置 react 項(xiàng)目。

然后執(zhí)行以下命令創(chuàng)建第一個(gè) react 項(xiàng)目。

創(chuàng)建項(xiàng)目

create-react-app?react-01?

創(chuàng)建成功的提示信息里，有很多有用的指示。

比如說，它建議：

cd?react-01?npm?start?

我們?cè)囈幌隆?/p>

react 默認(rèn)使用 3000 端口作為本地開發(fā)環(huán)境，它自動(dòng)使用瀏覽器打開，就能看到如下界面：

項(xiàng)目結(jié)構(gòu)分析

使用 VS Code 打開查看項(xiàng)目目錄，如下：

• node_modules 存放所有項(xiàng)目的依賴包。一般不需要管它。

• public 存放靜態(tài)文件，Webpack 不會(huì)對(duì)這個(gè)目錄中的文件進(jìn)行處理。public 目錄下的文件會(huì)被直接復(fù)制到構(gòu)建目錄。

• src 存放應(yīng)用的源代碼。實(shí)際開發(fā)的工作基本都在此進(jìn)行。

• package.json 是項(xiàng)目的配置文件，包含項(xiàng)目信息、腳本、依賴項(xiàng)等。

• package-lock.json 是配置鎖定文件，記錄了確切的依賴版本，確保在不同環(huán)境中安裝的依賴一致。

嘗試修改 react 項(xiàng)目

找到 app.js 文件，修改其中的內(nèi)容如下：

import?logo?from?'./logo.svg';?import?'./App.css';??function?App()?{???return?(?????<div?className="App">???????<header?className="App-header">?????????<img?src={logo}?className="App-logo"?alt="logo"?/>?????????<h4>你好，世界！</h4>?????????<h5>這里是IT從業(yè)指北。</h5>?????????<a???????????className="App-link"??????????????????????target="_blank"???????????rel="noopener?noreferrer"?????????>???????????Learn?React?????????</a>???????</header>?????</div>???);?}??export?default?App;?

之后回到瀏覽器，會(huì)看到頁面自動(dòng)更新成了如下：

如果單開著命令行，那么在那邊能看到如下信息：

所以 webpack 在背后監(jiān)聽每一個(gè)修改，會(huì)自動(dòng)編譯并應(yīng)用到開發(fā)環(huán)境。這樣我們不需要任何操作就可以預(yù)覽修改。

總結(jié)

• ?? react 是一個(gè) JavaScript 庫。

• ?? 通過 npm install 安裝 create-react-app 后可以創(chuàng)建 react 項(xiàng)目。

• ?? react 項(xiàng)目的源代碼主要放在 src 目錄下。