React從入門到精通系列之(1)安裝React

張亞濤發表於2016-12-13
React

一、安裝React

React是靈活的，可以在各種型別的專案中使用。 你可以使用它建立一個全新的應用程式，也可以逐步將其引入現有的專案中，而不需要重寫整個專案。

建立一個單頁面應用

Create React App是開始構建新的React單頁應用程式的最佳方式。 它可以幫助您快速整合您的開發環境，以便您可以使用最新的JavaScript功能，它提供了一個很好的開發體驗，並可以有效優化您的應用程式,提升開發效率。

$ npm install -g create-react-app
$ create-react-app hello-world
$ cd hello-world
$ npm run start

上面只是建立了一個React應用，不需要關心也需要不處理後端邏輯或資料庫;
它只是一個React的前端環境整合工具,負責建立前端的開發環境，所以你可以使用它與你想要的任何後端進行互動。 它內部使用了webpack，Babel和ESLint，你可以單獨配置它們，來達到定製化的效果。

在已經開發的專案中使用React

您不需要重新編寫應用程式即可開始使用React。
我們建議將React新增到應用程式的一小部分，例如單個小部件，以便您可以看到它是否適合您的用例。
雖然React可以在沒有構建工具的情況下使用，但我們建議使用並設定它，以便提高生產力。 現代構建工具通常包括：

  • 一個包管理器，例如npm

  • 一個打包工具，例如webpack

  • 一個編譯工具，例如Babel

安裝React

我們建議使用Yarn或npm來管理React前端模組的依賴。

通過Yarn安裝：

yarn add react react-dom

通過npm安卓：

npm install --save react react-dom

使用ES6和JSX

我們建議您使用Babel中的React配置讓您在JavaScript程式碼中可以使用ES6和JSX。 ES6是一組現代JavaScript特性，使開發更容易，JSX是對React非常有效的JavaScript語言的擴充套件。

具體請百度Babel如何在許多不同的構建環境中配置Babel。首先 確保你安裝了babel-preset-react和babel-preset-es2015，並已經在.babelrc配置中啟用它們。

使用ES6和JSX寫一個HelloWorld的例子

我們建議使用像webpack或Browserify這樣的打包工具，以便您可以編寫模組化程式碼，它們可以將不同的程式碼模組打包捆綁到一起，用來優化的程式碼載入時間。

一個簡單的React示例如下所示：

這裡我使用的是bower來安裝react和react-dom。

mkdir hello-world & cd hello-world
bower install react babel --save
touch index.html

然後在index.html中寫入以下內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="bower_components/babel/browser.js"></script>
    <script type="text/babel">
        var doc = document;
        ReactDOM.render(
                <h1>你好，react</h1>,
                doc.getElementById(`app`)
        )
    </script>
    <title>ReactDOM.render</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

最後在瀏覽器中開啟這個頁面，就可以看到最終效果。

相關文章