reactjs教程-react 入門教程

2023-10-21 21:40:35

React.js很快成為當時最流行的JS框架之一。在本系列中，我們將學習如何創建一個React應用程序。讓我們開始吧！

粉碎盒鼓勵我們找到更好的方法來提供高質量的產品。我們做這件事的方法之一就是學習和嘗試新技術。過去幾個月，Smashing Boxes的開發人員開始嘗試REACT.JS。這是我們感到興奮的技術之一。有了React，我們找到了一種工具，可以輕松編寫簡單，可測試和快速的代碼。

我們看到使用它的很多好處。因為React本身就是模塊化的，學習和理解其他代碼很簡單。這已經讓我們的代碼審查更快。我們也希望它能夠加速新開發人員的入隊。從那以后，一旦我們把應用程序交給我們的客戶，系統應該更容易拾取和維護。

React代碼通常比替代方法更容易測試。測試對我們來說是巨大的。任何提高質量的東西都意味著客戶可以更快地獲得更好的產品。

React是構建Web應用程序前端的越來越受歡迎的解決方案，我們非常喜歡使用它。如果你愿意寫JavaScript并渴望開始學習這個庫，那么這篇文章就是為你準備的。

在本教程中，我將介紹如何在OS X上設置項目。設置完成后，我們將在React中創建一個Hello World。從那里我會談談下一步學習更多。

React是Facebook制作的一個庫，用于在JavaScript中創建組件。現在，您可以使用它來構建網站和本機iOS和Android應用程序。圖書館的兩大吸引力在于它的表現和簡單性。

它通過使用虛擬DOM管理頁面來實現高性能。你寫的內容描述了頁面的結構。當狀態改變時，React將舊的與新的區別開來，并進行到達新頁面所需的最小更改。避免不必要的DOM更新是高性能應用程序的關鍵之一。

React的另一個好處是它比其他流行的庫更簡單。這是因為React只是視圖層。您可以使用它，而無需引入整個框架。事實上，許多對與React完全成熟的框架，如Angular，Ember和Backbone。

如果您在Mac上開發，使用Homebrew可以輕松安裝和管理工具。我假設你已經安裝了它，但是如果你不這樣做，請考慮按照上面鏈接中的說明進行操作。要開始，我建議獲取節點版本管理器。

安裝完畢后，繼續安裝當前穩定版本的Node.js.

$ nvm install stable

我們將使用 Webpack，這是React項目的熱門選擇。下面我會詳細說明我們為什么使用它。目前，讓我們使用以下命令安裝它和它的dev服務器。

此外，我們將在全球范圍內安裝它，以便我們輕松訪問其命令行工具。

現在讓我們創建我們的項目！

并在此初始化一個新項目：

輸入啟動項目所需的數據，然后添加React依賴關系：

我們現在需要配置Webpack。在項目的根文件夾中，創建一個名為webpack.config.js的文件并將其設置為以下內容：

module.exports = {

entry: {

app: ['./app/main.js']

output: {

path: './app',

filename: 'bundle.js'

}

};

這將配置Webpack從app / main.js開始構建我們的客戶端文件。Webpack將抓取我們需要的所有依賴關系并將其編譯到一個文件中。這個文件是app / bundle.js，我們將把它包含在我們的HTML中。

那里！這就是我們設置項目所需的全部內容，并且我們準備開始為它編寫一些代碼。不像設置Rails項目那么容易，但也不是太糟糕。

Webpack是一個模塊加載器。與大多數其他語言不同，JavaScript不包含其中一種。這導致了許多旨在解決這個問題的獨立項目。Webpack類似于像Browserify 或RequireJS這樣的庫，但它實際上可以做更多。它最終取代了你在Gulp或Grunt中所做的一些好事 - 主要用于編寫構建任務的流行工具。有了它，我們可以使用AMD，CommonJS甚至ES2015風格的模塊。為了展示他們之間的差異：

AMD

require(['react'], function (React) {});

CommonJS

var React = require('react');

ES2015

import React from 'react';

在我們的代碼中，我們使用CommonJS風格，最初由Node.js推廣。

實現Hello World

在我們的項目中，我們來創建應用程序/文件夾。這將是我們編寫代碼的地方。

$ mkdir app

現在在app / index.html添加一個文件。讓我們把下面的代碼放在里面：

<!doctype html>

Hello World

在這里你可以看到上面提到的bundle.js文件。我們還有一個id為react-mount的元素，我們將使用它作為應用的根。這個div內的任何內容都由React管理。因此，不要修改組件外的任何后代元素！

我們將添加的最終文件是app / main.js，它將包含我們的HelloWorld React組件。

var React = require('react');

var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({ render: function () {

return React.createElement('div', null, 'Hello World');

}});

ReactDOM.render(React.createElement(HelloWorld), document.querySelector('#react-mount'));

這里我們使用Webpack提供的CommonJS模塊加載樣式來引入React。我們使用名為HelloWorld的React.createClass定義一個新組件。它有一個渲染功能，在它里面，我們創建了一個沒有屬性的新div，并在其中包含文本“Hello World”。它看起來像這樣（React添加一個屬性來幫助維護對節點的引用，但對于我們的目的來說忽略它是安全的）：

<div>Hello World</div>

React.createElement的第一個參數可以是任何HTML元素（div，span，header，footer等）的字符串。第二個參數是這個元素的一個屬性對象。例如，如果我們想要創建一個鏈接到我工作的地方，那么我們會做以下事情，粉碎箱子。

React.createElement('a', { href: 'http://smashingboxes.com' }, 'Smashing Boxes');

//<a >Smashing Boxes</a>

值得注意的是，除了兩種特殊情況外，您可以使用任何常規的HTML屬性：for和class。這些是JavaScript中的保留字，因此React作者選擇提供htmlFor和className作為這些屬性的關鍵字。

第三個參數和它之后的所有參數都是我們正在創建的元素的子元素。這些可以是使用React.createElement或字符串創建的其他元素。如果我們將一些標記從Bootstrap例子轉換為使用React元素，請看看它可能是什么樣子。

React.createElement('div', { className: 'form-group' },

React.createElement('label', { htmlFor: 'exampleInputEmail1' }, 'Email address'), React.createElement('input', { type: 'email', className: 'form-control', id: 'exampleInputEmail1', placeholder: 'Email' }));

<div class="form-group">// <label for="exampleInputEmail1">Email address</label>

// <input id="exampleInputEmail1" class="form-control" type="email" placeholder="Email" />

//</div>

渲染是我們遇到的第一個組件生命周期方法。每個組件都必須有一個組件，并且這是組件唯一需要的生命周期方法。React調用它來創建虛擬DOM元素，然后將結果添加到頁面中。

在文件的最后一行是我們使用id react-mount將此組件呈現給元素的位置。注意我們再次使用React.createElement。這次我們不使用字符串，而是使用我們上面定義的類。

我們在React中完成了Hello World！非常簡單，沒有其他要求。使用以下命令啟動服務器：

$ webpack-dev-server --content-base app/

并在您最喜愛的瀏覽器中打開http：// localhost：8080 /。

做完這些之后，您現在知道如何引導React項目并創建簡單的組件。你可以在這里找到完整的代碼。

在本系列的下一部分，我們將討論組件生命周期的更多部分，以及在構建小型應用程序時如何創建更復雜的組件。這些高級組件將接受用戶輸入并保持狀態。

我們也會將該項目升級為使用ES2015。許多人開始使用它的新項目，所以我們也會采用它。我們還會對構建系統進行其他升級，這將有助于保持我們的工作流程的順暢。

最后，我們會將其轉換為使用JSX。JSX是允許在代碼中使用XML的JavaScript版本。下一次，我們會看到它的行動，我認為你會同意它使代碼更具可讀性。