欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

今天開始學習 react。

如果對 HTML，CSS 和 JavaScript 還不熟悉，請先學習完這三門基礎再來。

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

什么是 react

?

上面是 react 的圖標。

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

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

React 起源于 Facebook 的內部項目，于 2013 年 5 月開源。

react 的特點

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

• 聲明式設計：輕松描述應用。

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

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

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

• 組件：構建組件，使得代碼更容易復用。

• 單向響應的數據流：減少了重復代碼，數據綁定更簡單。

react 開發環境搭建

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

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

• 通過 npm 創建 react 項目：create-react-app

• 通過 CDN 引用 react 庫

本教程使用第一種方式。

準備工作

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

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

node?-v?npm?-v?

創建第一個 react 項目

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

通過該命令我們無需配置就能構建 React 開發項目。

create-react-app?創建的項目是基于 Webpack + ES6 。

安裝 create-react-app

先安裝這個工具。

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

如果下載速度很慢，使用 npm 國內的鏡像。

在本地目錄下選擇一個目錄準備放置 react 項目。

然后執行以下命令創建第一個 react 項目。

創建項目

create-react-app?react-01?

創建成功的提示信息里，有很多有用的指示。

比如說，它建議：

cd?react-01?npm?start?

我們試一下。

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

項目結構分析

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

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

• public 存放靜態文件，Webpack 不會對這個目錄中的文件進行處理。public 目錄下的文件會被直接復制到構建目錄。

• src 存放應用的源代碼。實際開發的工作基本都在此進行。

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

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

嘗試修改 react 項目

找到 app.js 文件，修改其中的內容如下：

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從業指北。</h5>?????????<a???????????className="App-link"??????????????????????target="_blank"???????????rel="noopener?noreferrer"?????????>???????????Learn?React?????????</a>???????</header>?????</div>???);?}??export?default?App;?

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

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

所以 webpack 在背后監聽每一個修改，會自動編譯并應用到開發環境。這樣我們不需要任何操作就可以預覽修改。

總結

• ?? react 是一個 JavaScript 庫。

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

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