[譯]React安裝：在現有項目上使用React

時間 2019-11-07

標籤 react 安裝現有項目使用欄目 React 简体版

原文原文鏈接

原文連接：reactjs.org/docs/add-re…html

簡單介紹

react是但願被大衆逐步接受爲初衷所設計的框架，所以你能夠在項目中按照需求來使用react，即便知識添加一些零星的交互也是可行的。react

大部分的網站項目都不是一個單一頁面的應用，你能夠在項目中經過幾行代碼使用react來擴展你的項目或者製做一些可動態使用的組件。web

即添即用

在本節中將會展現如何在一個已有html頁面中使用react組件，你能夠在你的web頁面中或者新建立一個html文件來嘗試。npm

1.在html中添加DOM容器

首先，打開你想要編輯的html頁面，添加一個空<div>標籤做爲你想要以react來展現的標籤，以下所示瀏覽器

<body>
    <!--已有的HTML-->
    <div id="button_container"></div>
    <!--已有的HTML-->
</body>
複製代碼

此處使用id=「button_container」來標記該<div>以便以後再js代碼中找到該<div>並在其中展現react組件。babel

提示：你能夠在<body>標籤內的任何地方放置DOM容器。你也能夠在一個頁面中放置多個DOM容器，固然這些容器一般須要爲空，由於react在渲染時會把容器內的內容所有替換掉。app

2.添加script標籤

接下來，添加如下三個script標籤到<body>標籤底部框架

<!-- 前兩個script用來加載react所須要的資源 -->
<!-- 注意：當你須要部署項目時,須要將開發環境換成生產環境， 將 "development.js" 替換成 "production.min.js"便可 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <!-- 此標籤用來加載編寫好的react組件 -->
 <script src="button.js"></script>
複製代碼

3.建立react組件

建立一個名爲button.js的文件在你的html文件目錄下。複製如下代碼dom

'use strict';

const e = React.createElement;

class ReactButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'React Button';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      '點我'
    );
  }
}

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(ReactButton), domContainer);
複製代碼

這兩行代碼的做用是找到咱們在第一步中添加的DOM容器並在其中展現咱們已經編寫好的react組件ReactButton。工具

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(ReactButton), domContainer);
複製代碼

提示：代碼看不懂沒有關係，咱們將會在以後的章節講解代碼中各部分的概念，如今，只要把它展現在頁面上就好了。

4.搞定了

你已經在你得項目中添加了第一個react組件了，運行你的項目看看吧。

提示：部署須知 處於開發環境下的js代碼會嚴重下降頁面運行速度，給用戶帶來不良的用戶體驗。所以在部署項目以前須要將以前添加的react資源文件替換成如下資源

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
複製代碼

使用JSX

1.簡單地使用JSX

在上面的例子中，咱們使用的是JavaScript代碼來通知react展現咱們編寫好的組件。

const e = React.createElement;
return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      '點我'
    );
複製代碼

固然，react提供了另一種選擇來代替JavaScript代碼，那就是JSX，上例代碼能夠用JSX替換，以下

return (
      <button onClick={() => this.setState({ liked: true })}>
        點我
      </button>
    );
複製代碼

以上兩例代碼是等價的，你能夠自由地選擇使用JavaScript代碼或者JSX來進行代碼編寫。

若是使用JSX的話，須要引入babel.js講JSX轉換成瀏覽器能夠識別的JavaScript代碼才能正常編譯。接下來說述如何在現有網頁中使用JSX。

要在網頁中使用JSX很簡單，只須要引入以下資源文件便可

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
複製代碼

接下來你只要在包含有type="text/babel"的script標籤中使用JSX就好了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

</script>
  </body>
</html>
複製代碼

以後只要在html中引入編寫好的js文件便可

<!-- 此標籤用來加載編寫好的react組件 -->
 <script src="button.js"></script>
複製代碼

這是一個學習react和編寫簡單的demo的很是好的途徑。可是請注意，使用babel會下降瀏覽器的編譯速度，所以不推薦把包含有babel的網頁做爲產品發佈部署。

當你須要發佈部署你的網站時，請記得刪除刪除帶有type="text/babel"的script標籤及他的內容，在下一節，咱們將講述如何安裝JSX預處理器來自動編譯你寫好的JSX代碼。

2.在項目中使用JSX

在項目中使用JSX不須要向打包器或者開發者工具等複雜的工具。實際上，添加JSX預處理器就像添加CSS預處理器同樣簡單。惟一的要求就是須要在你的電腦上安裝Node.js。

如今在你的項目目錄下打開終端，並輸入如下命令：

1.	npm init -y
2.	npm install babel-cli@6 babel-preset-react-app@3
複製代碼

提示：咱們只使用npm來安裝JSX預處理器，以後你將不會用到再使用到它。react代碼和你的項目代碼無需改動，只須要保持原樣便可。

3.運行JSX預處理器

建立一個src文件夾並把你編寫好的js文件放在這個文件夾下。在終端運行如下命令

npx babel --watch src --out-dir . --presets react-app/prod 
複製代碼

你能夠看到，src文件夾下你編寫好的代碼已經被自動處理好了而且建立了一個新的button.js文件，對比以二者你能夠看到新出現的js文件是以Javascript代碼編寫的。

就像簡單使用JSX中同樣，在html中引入預處理好的js文件便可。

你不用等待這個命令結束，它設立了一個對JSX代碼的監聽器，只要你在src目錄現編寫了JSX代碼，監聽器就會自動處理你編寫的文件。

以上，就是全部的在現有項目中使用react的操做。

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。