【第一篇】零基礎學習 React.js之——Hello World

時間  2019-11-26
標籤 第一篇 零基礎 學習 react.js react hello world 欄目 React 简体版
原文   原文鏈接

前言

若是你沒有接觸過 React.js，那麼機會來了，我將從零開始教你如何開始 React.js，話很少說，上車吧！本篇介紹如何用 React.js 輸出 Hello world。javascript

簡紹

什麼是 React.js

「A JavaScript library for building user interfaces」，這是 React 官網給本身一句話的歸納。簡單來講，React 就是一個使用 JavaScript 構建可組合的用戶界面引擎。它的主要做用在於構建 UI ，雖然有人說其屬於 MVC 的 V（視圖）層，但在 React 官方博客中闡明 React 不是一個 MVC 框架，而是一個用於構建組件化 UI 庫，是一個前端界面開發工具。css

關鍵詞：可組合、組件化html

React 的來源

React 源於 Facebook 內部 PHP 框架 XHP 的一個分支，在每次有請求進入時會渲染整個頁面。而 React 的出現就是爲了把這種從新渲染整個頁面的 PHP 式工做流帶入到客戶端應用。 在使用 React 構建用戶界面時，只需定義一次，就能將其複用在其餘多個地方。狀態改變，無需做出任何操做，它會自動高效地更新界面。今後只須要關心維護應用內的狀態，而再也不須要不斷關注 DOM 節點。從複雜的 DOM 操做中解脫出來，讓工做重心迴歸狀態自己。前端

遵循傳統，在學習 React 開始前先帶領你們簡單學會幾種方式輸出 Hello World。java

【第一種】不涉及工程化的 Hello World

一個不涉及工程化的 Hello World 是這樣的node

jsfiddle.net/allan91/2h1…react

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello World</h1>, //JSX格式
        document.getElementById("root")
      );
    </script>
</body>

</html>
複製代碼

上面代碼很簡單，直接引用 CDN (Content Delivery Network) 上的 react.min.js、react-dom.min.js 和 babel.min.js 這三個腳本便可直接使用。惟一須要注意的就是 script 的 type 屬性須要寫爲 「text/babel」。瀏覽器打開這個 html 便可展現 Hello World。webpack

注1：CDN (Content Delivery Network) 是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。git

注2：react.main.js 是 React 的核心代碼包；react-dom.min.js 是與 DOM 相關的包，主要用於把虛擬 DOM 渲染到文檔變爲真實 DOM，固然還有其它一些方法；babel.min.js是用來編譯還不被瀏覽器支持的代碼的編譯工具。其中 min 表示這是被壓縮過的 JS 庫。 或者將 JS 代碼寫在外面，好比根目錄新建 main.js：github

ReactDOM.render(
        <h1>Hello World</h1>, //JSX格式
        document.getElementById("root")
);
複製代碼

而後在html文件內引入：

<script type=「text/babel」 src=「./main.js」></script>
複製代碼

【第二種】基於 Webpack 的 Hello World

首先要確保讀者的開發設備上已經安裝過 NodeJs，新建一個項目：

mkdir react-hello-world
cd react-hello-world
npm init -y
複製代碼

項目中使用的是 webpack 4.x，不一樣於 webpack 3.x，webapck-cli 在 4 中被分離了，因此須要同時安裝它們兩個庫，在項目根目錄執行：

npm i webpack webpack-cli -D
複製代碼

注：上面命令代碼中 npm install module_name —D 即 npm intsll module_name —save-dev。表示寫入 package.json 的 devDependencies，devDependencies 裏面的插件用於開發環境，不用於生產環境。npm install module_name —S 即 npm intsll module_name —save。dependencies 是須要發佈到生產環境的。 安裝完 webpack，須要有一個配置文件讓 webpack 知道要作什麼事，這個文件取名爲 webpack.config.js。

touch webpack.config.js
複製代碼

而後配置內容以下

// ./webpack.config.js 
var webpack = require('webpack');
var path = require('path');

var APP_DIR = path.resolve(__dirname, 'src');
var BUILD_DIR = path.resolve(__dirname, 'build');

var config = {
  entry: APP_DIR + '/index.jsx',	// 入口
  output: {
    path: BUILD_DIR,		// 出口
    filename: 'bundle.js'	// 出口文件名
  }
};

module.exports = config;
複製代碼

這是 webpack 使用中最簡單的配置，只包含了打包的入口和出口。 APP_DIR 表示當前項目的入口路徑，BUILD_DIR表示當前項目打包後的輸出路徑。入口須要新建一個應用的入口文件 index.jsx，先直接在文件中用 JS 打印一下：

console.log('Hello World’); 複製代碼

用終端在根目錄執行：

./node_modules/.bin/webpack -d
複製代碼

上面的命令在開發環境運行以後會在根目錄生成一個新的文件 build 文件夾，裏面包含了 webpack 打包的 bundle.js 文件。 接下來建立 index.html，用於在瀏覽器執行 bundle.js：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
</head>

<body>
    <div id=「app」></div>

    //  bundle.js 是 webpack 打包後生成的文件
    <script src="build/bundle.js" type="text/javascript"></script>
</body>

</html>
複製代碼

如今讀者能夠在瀏覽器打開 index.html 文件，在控制檯能看到 ./src/index.jsx 打印的內容：Hello World 。

爲了提升效率和使用最新的 ES 語法，一般使用 JSX 和 ES6 來進行開發。但 JSX 和 ES6 語法在瀏覽器中還不被支持，因此須要在 webpack 中配置相應的 loader 模塊來編譯它們。只有這樣，打包出來的 bundle.js 文件才能被瀏覽器識別和運行。

接下來安裝 babel:

npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-react
複製代碼

上面安裝的包分別是：

  • babel-core 是用於調用 Babel 的 API 進行轉碼的包；
  • babel-loader 是執行轉義的核心包；
  • babel-preset-env 是一個新的 preset，能夠根據配置的目標運行環境自動啓用須要的babel插件；
  • babel-preset-react 用於轉義 React 的 JSX 語法。

在 webpack.config.js 中配置 loader：

var webpack = require("webpack");
var path = require("path");

var BUILD_DIR = path.resolve(__dirname, "build");	// 構建路徑
var APP_DIR = path.resolve(__dirname, "src");	// 項目路徑

var config = {
  entry: APP_DIR + "/index.jsx",	// 項目入口
  output: {	
    path: BUILD_DIR,	// 輸出路由
    filename: "bundle.js"	// 輸出文件命名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,	// 編譯後綴爲js和jsx格式文件
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"	// 使用babel-loader這個loader庫
        }
      }
    ]
  }
};

module.exports = config;
複製代碼

建立 .babelrc 文件：

touch .babelrc
複製代碼

配置相應內容來告訴 babel-loader 去使用 ES6 和 JSX 插件：

{
  "presets" : ["env", "react"]
}
複製代碼

至此爲止，已經配置完開發該項目基礎工做。下面來正式開始使用 React 來編寫前端代碼。

npm 安裝 react 和 react-dom：

npm install react react-dom -S 
複製代碼

用下面代碼替換 ./src/index.jsx 中的 console：

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React</p>;
  }
}

render(<App/>, document.getElementById(‘app'));
複製代碼

根目錄執行：

./node_modules/.bin/webpack -d
複製代碼

如今瀏覽器打開 index.html 將會在頁面展現 Hello World。固然真實開發中不能每次一修改前端代碼就去執行一次 webpack 編譯打包，能夠執行以下命令來監聽文件變化：

./node_modules/.bin/webpack -d —-watch
複製代碼

終端將會顯示：

myfirstapp Jack$ ./node_modules/.bin/webpack -d --watch

webpack is watching the files…

Hash: 6dbf97954b511aa86515
Version: webpack 4.22.0
Time: 839ms
Built at: 2018-10-23 19:05:01
    Asset      Size  Chunks             Chunk Names
bundle.js  1.87 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.jsx] 2.22 KiB {main} [built]
    + 11 hidden modules
複製代碼

這就是 webpack 的監聽模式，一旦項目中的文件有改動，就會自動執行 webpack 編譯命令。不過瀏覽器上展現的 html 文件不會主動刷新，須要讀者手動刷新瀏覽器。若是想實現瀏覽器自動刷新，可使用 react-hot-loader （github.com/gaearon/rea…

真實項目開發中，通常使用 npm 命令來執行 ./node_modules/.bin/webpack -d —watch 這個命令來開發。這須要在 package.json 中配置：

{
  // ...
    "scripts": {
        "dev": "webpack -d --watch",
        "build": "webpack -p",
        "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
複製代碼

如今只須要在根目錄執行命令就能執行開發與構建：

npm run dev
npm run build
複製代碼

以上爲真實項目中一個較爲完整的項目結構，讀者能夠在此基礎上根據項目的須要自行拓展增長其它功能。源碼地址爲：github.com/khno/react-… 分支爲master。

項目完整的結構以下：

.
├── build
│     └── bundle.js
├── index.html
├── package-lock.json
├── package.json
├── src
│     └── index.jsx
├── .gitignore
├── .babelrc
└── webpack.config.js
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程