第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

引導語

眾所周知，學習一門技術最好的方法，就是實踐，大白話就是跟著我們一起敲代碼，我們學習 React 亦是如此。由于開發(fā) React 應用需要一個眾多開發(fā)工具組成的開發(fā)環(huán)境，因此在這之前，我們需了解其開發(fā)環(huán)境及開發(fā)工具，然后才能更好的開發(fā) React 應用。了解完這些基礎之后，我們會帶大家來創(chuàng)建你的第一個 React 應用，并介紹一些容易遇到的細節(jié)問題。

資源

create-react-app

開發(fā)環(huán)境

1. Node.js

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。React 應用并不依賴于 Node.js 運行，但是開發(fā)過程中的一些編譯過程（比如 npm，Webpack 等）都需要在 Node 環(huán)境下運行。因此，開發(fā) React 應用前，應確保已經安裝了 Node.js。

官方下載地址是 https://nodejs.org，穩(wěn)定版和最新版選擇一個版本下載即可（我們開發(fā)一般使用穩(wěn)定版）。

2. NPM

NPM 是 Node 的一個包管理工具，每個包都是一個模塊，能夠使你輕松下載、管理模塊依賴和版本。同樣的，在使用 React 開發(fā)應用時，會依賴很多模塊，這些模塊就可以通過 NPM 進行下載。由于 NPM 已集成到了 Node.js 中，因此不用單獨下載。

當然我們也可使用 yarn 模塊管理，本教程統(tǒng)一使用 npm 模塊管理。

開發(fā)工具

1. Webpack

Webpack 是一個前端資源加載和打包工具。Webpack 提供了模塊化的開發(fā)方式，將各種靜態(tài)資源視為模塊，如 JavaScript、CSS、圖片等，并通過 Webpack 生成優(yōu)化過的代碼。同樣在開發(fā) React 應用時也要用到 Webpack 來進行模塊打包。

Webpack 的安裝可以參考官網文檔。Webpack 的進一步學習可以打開官網，本小節(jié)不做詳細闡述。

2. Babel

Babel 是一個 JavaScript 編譯器，主要用于將 ECMAScript 2015+ 版本的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環(huán)境中。

由于我們在開發(fā) React 應用中，會用到很多 ES6 的語法，但目前瀏覽器并不完全支持，因此在 Webpack 編譯階段，利用 Babel 將 ES6 及其以后的語法編譯成 ES5 語法。

如何快速搭建 React 應用

Webpack、Babel 等工具是開發(fā) React 應用所必需的，但這些工具的使用、配置又比較繁瑣，需要大量學習才可以掌握。因此，本小冊借助官方提供的腳手架 Create React App 創(chuàng)建 React 應用。該腳手架已經將 Webpack、Babel 等工具的配置做了封裝，無需開發(fā)者做配置，提供了一個零配置的現代構建。

Create React App 對于開發(fā)環(huán)境版本有一定的要求，具體如下：
npm 版本 >= 5.6
node 版本 >= 8.10

快速搭建 React 應用需要四個步驟：

1. 安裝官方腳手架；
2. 創(chuàng)建 React 項目；
3. 啟動項目；
4. 暴露配置項。

下面大家跟著本文來一步一步進行操作。

1. 使用 npm 安裝官方腳手架

npm install -g create-react-app

安裝好之后，可以運行：create-react-app --version 查看版本號，如果版本號正常展示，證明安裝成功。

2. 創(chuàng)建 React 項目

create-react-app my-demo

這里項目名不能使用駝峰的形式(即不能包含大寫字母)，不然會有以下報錯：name can no longer contain capital letters。

3. 啟動項目

cd my-demo && npm start

此處也可使用 yarn 啟動項目：yarn start，建議 yarn 和 npm 不要混用。

4. 暴露配置項

npm run eject

當看到以下界面時，說明你的 React 應用就已經安裝好了。

文件結構

文件結構一覽

接下來，我們看下安裝好的 React 應用的文件結構。

├── README.md                   文檔 
├── package.json                npm 依賴
├── public                      靜態(tài)資源文件夾
│   ├── favicon.ico             網站icon圖標
│   ├── index.html              模版
│   ├── logo192.png             192*192大小的react logo
│   ├── logo512.png             512*512大小的react logo
│   ├── manifest.json           移動桌面快捷方式配置文件
│   └── robots.txt              網站與爬蟲間的協(xié)議
├── src                         源碼文件夾
│   ├── App.css
│   ├── App.js                  根組件
│   ├── App.test.js
│   ├── index.css               全局樣式
│   ├── index.js                入口文件
│   ├── logo.svg    
│   └── serviceWorker.js        PWA 支持
└── yarn.lock

創(chuàng)建你的 Hello World

為了快速了解 React，我們先改動一個文件看看效果，從動手嘗試中去學習。
打開 src/index.js 文件，可以看到 render 的模版是 App.js，代碼如下：

import React from 'react' // 使用JSX語法必須引入react
import ReactDOM from 'react-dom'
import App from './App.js'

ReactDOM.render(<App />, 
document.getElementById('root')) 

<App /> 是 JSX 語法（后面會講什么是 JSX 語法）。
root 是 index.html 模版里的元素，渲染出來的 App 組件放在此處。

我們來嘗試修改 App.js 文件：

// src/App.js
import React from 'react'
import './App.css'

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <p>
                  hello world
                </p>
            </header>
        </div>
    )
}

export default App

可以看到上面代碼中，我們將 header 中的內容換成了我們自己的，保存代碼，瀏覽器會自動幫我們刷新，接著我們就能看到頁面展示如下：

到此，我們已經完成了使用 React 的第一步。

樣式引入之 Sass

我們在開發(fā)過程中，通常不會使用原生的 CSS 直接開發(fā)，而是會選擇 CSS 預處理語言，比如 Sass，使用 Sass 會極大的提高我們書寫 CSS 的效率。

Sass 的安裝

1. 首先，讓我們一起來安裝 Sass，create-react-app 腳手架中已經添加了 sass-loader 的支持，只需要安裝 node-sass 插件即可, 使用如下命令即可直接安裝 Sass。

npm install node-sass --save-dev

在上面命令中，我們使用了 --save-dev 后綴，其代表將 Sass 安裝在了開發(fā)環(huán)境。

安裝好 Sass 之后，我們可以在項目中直接引入并使用 Sass 。

2. create-react-app 腳手架中已經添加了 sass-loader 的支持，想要查看配置，執(zhí)行 npm run eject ，隱藏的配置都會展示出來，打開 config/webpack.config.js 文件，會找到如下幾行代碼:

const sassRegex = /\.(scss|sass)$/; // 正則：以 .scss 或者 .sass 結尾
const sassModuleRegex = /\.module\.(scss|sass)$/; // 正則：以 .module.scss 或者 .module.sass 結尾
// ...
{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'sass-loader'
    ),
    sideEffects: true,
},
{
    test: sassModuleRegex,
    use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'sass-loader'
    ),
},

上面一段代碼中，第一、二行是兩個正則表達式，分別表示以 .scss 或者 .sass 結尾和以 .module.scss 或者 .module.sass 結尾。花括號中是 Webpack 配置 loader 的語法，我們一起來回憶下此部分。官網有提到，在 webpack 的配置中 loader 有兩個目標：

1. test 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。
2. use 屬性，表示進行轉換時，應該使用哪個 loader。

這就告訴 Webpack 編譯器（compiler）如下信息：

“嘿，webpack 編譯器，當你碰到以 .scss 或者 .sass 或者 .module.scss 或者 .module.sass 結尾的文件時，在你對它打包之前，先使用 sass-loader 轉換一下。”

npm run eject 此命令會將腳手架中隱藏的配置都展示出來，此過程不可逆。

樣式的引入

上面例子中 src/App.js 直接引入 App.scss，使用方式如下：

import React from 'react'
import './App.scss'

function App() {
  return (
    <div className="App">
      <header className="title">
        <p>
          hello world
        </p>
      </header>
    </div>
  )
}

export default App

假如此時如果在其他組件中引入另一個樣式文件，若其他樣式文件中有相同的 .title 類名，那么會造成樣式上的沖突。如果想實現樣式的模塊化，則需使用 [name].module.scss 方式命名，使用方式如下：

import styles from './index.module.scss'

export default function App() {
  return (
    <div className={styles.title}>hello world</div>
  )
}

這樣就不會和其他同類名的 .title 沖突了。

<div class="App_title__-GfWs">hello world</div>

提示：要添加 CSS Modules 樣式表，這里必須使用 [name].module.css 方式命名，不然會認為是個常規(guī)的 CSS。另外若使用 Sass、Less 等，只需將 [name].module.css 改為 [name].module.scss 即可。

小結

本節(jié)內容主要講解了如何使用 creat-react-app 腳手架快速搭建 React 開發(fā)環(huán)境，學習了日常開發(fā)所需要的工具，并寫出一個簡單的 hello world 組件。重點是安裝腳手架所需的環(huán)境，注意腳手架對于環(huán)境的版本要求。我們知道腳手架是基于 Webpack 工具構建的，想要更深入的學習 Webpack，可以詳細學習官網的知識點。 下一小節(jié)我們要學習 React 的一些基礎知識，為后續(xù)章節(jié)打基礎。

demo地址

https://github.com/XJFM/imooc-react/tree/master/01_01.helloworld

知識擴展閱讀

crete-react-app
webpack