狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

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

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

什么是 react

?

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

簡單來說，React 是一個 JavaScript 庫。

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

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

react 的特點

說一千，道一萬，選擇 react 主要是因為以下原因：

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

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

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

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

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

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

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

因為 react 實際上就是 JavaScript 類庫，只要引用了這個類庫，就可以使用它。

在實際操作中，有兩種方式可選：

• 通過 npm 創(chuàng)建 react 項目：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)建第一個 react 項目

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

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

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

安裝 create-react-app

先安裝這個工具。

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

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

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

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

創(chuàng)建項目

create-react-app?react-01?

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

比如說，它建議：

cd?react-01?npm?start?

我們試一下。

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

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

使用 VS Code 打開查看項目目錄，如下：

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

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

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

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

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

嘗試修改 react 項目

找到 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;?

之后回到瀏覽器，會看到頁面自動更新成了如下：

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

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

總結(jié)

• ?? react 是一個 JavaScript 庫。

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

• ?? react 項目的源代碼主要放在 src 目錄下。