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

時間 2019-11-06

標籤 react 入門精通系列安裝欄目 React 简体版

原文原文鏈接

1、安裝React

React是靈活的，能夠在各類類型的項目中使用。你可使用它建立一個全新的應用程序，也能夠逐步將其引入現有的項目中，而不須要重寫整個項目。html

建立一個單頁面應用

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添加到應用程序的一小部分，例如單個小部件，以便您能夠看到它是否適合您的用例。
雖然React能夠在沒有構建工具的狀況下使用，但咱們建議使用並設置它，以便提升生產力。現代構建工具一般包括：webpack

一個包管理器，例如npmweb
一個打包工具，例如webpack數據庫
一個編譯工具，例如Babelnpm

安裝React

咱們建議使用Yarn或npm來管理React前端模塊的依賴。後端

經過Yarn安裝：瀏覽器

yarn add react react-dom

經過npm安卓：bash

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>

最後在瀏覽器中打開這個頁面，就能夠看到最終效果。

相關標籤/搜索

每日一句

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