React（1）初識React框架

時間 2021-02-17

標籤 javascript html 前端 java react web 小程序微信小程序數組瀏覽器欄目 React 简体版

原文原文鏈接

前言

React框架在現代前端開發的項目中愈來愈經常使用，該框架的語法結構也深深的影響着其餘框架在設計時的思路和理念。本專欄從這篇文章開始，以零基礎出發，一步步總結和講解React框架的使用。javascript

1、搭建React工做環境

首先咱們先來將React工做環境搭建起來。要想讓React工做起來，須要用到下列三個庫：html

react.development.js：React核心庫。
react-dom.development.js：React操做DOM的庫。
babel.min.js：將JSX語法轉換爲JavaScript語法的庫。

上述三個庫你們能夠去React的官網進行下載。除此以外，咱們還須要建立一個用於書寫React代碼的js文件，能夠命名爲index.js。前端

接下來咱們要將上述js文件按照順序一個個的加載到HTML文檔中。由於本文暫時使用非工程化的方法運行React項目，因此暫時須要手動將js文件加載到HTML文檔中。java

HTML文檔的代碼以下所示。react

<html>
  <head>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel" src="js/index.js"></script>
  </head>
  <body></body>
</html>

上述代碼須要注意如下兩點：web

注意1：獨立的index.js文件須要在加載時將script標記對的type屬性取值爲「text/babel」，而不是「text/javascript」。
注意2：這樣的方式運行React項目，須要藉助WebStorm或VS Code這樣的編輯器，在編輯器自帶的內置服務器的幫助下才能正常啓動項目。小程序

2、第一個React程序

搭建好了React工做環境，咱們來實現第一個React程序，即在瀏覽器的頁面中顯示一個一級標題，標題內容爲「Hello,React!」微信小程序

一、首先，在HTML文檔中設置一個div標記對做爲React項目中DOM元素的總容器。會使用Vue.js的同窗能夠將這個div理解爲「掛載點」。同時還要爲這個div標記對設置一個id屬性或class屬性，以保證在index.js文件中能夠方便的引用該節點。數組

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

二、其次，在index.js文件中輸入下列代碼：瀏覽器

ReactDOM.render(
  <h1>Hello,React!</h1>,
  document.querySelector("#app")
)

ReactDOM.rander()方法是React的核心方法，該方法的格式以下所示。

ReactDOM.rander(JSX代碼,DOM節點)

上述代碼中的h1標記實現的內容實際上是JSX語法的代碼，而不是HTML語法的代碼，儘管它們暫時長得很像。第二個參數使用document.querySelector()方法指定了一個DOM節點，也就是body標記對內部的id屬性取值爲app的那個div。

ReactDOM.render()方法有如下兩個主要功能：

將JSX代碼轉換爲HTML格式的標記對。
將轉換的HTML格式的標記對插入到指定的DOM節點內部。

三、理解了上述代碼的概念，如今能夠在webStorm編輯器中執行該項目了。若是你們在編寫React代碼時發現webStorm編輯器頂部有一個細長條提示，以下圖所示。

這條細長的提示內容爲：Switch language version to React JSX，中文翻譯爲切換語言版本爲React JSX。右側有兩個選項：Switch表示切換，Dismiss表示不予理會。

這裏建議你們選擇「Switch」，不然編輯器因爲沒法正確的識別JSX語法格式而出現多處語法錯誤提示。

3、初步認識JSX語法：

React框架對於DOM節點的生成採用了JSX語法格式，這是一種專門用於React的DOM節點生成模式。從本質上說，能夠理解爲HTML標記對和JavaScript語言的這一種結合。

本節咱們對JSX語法進行一個初步的認識，下一篇文章會爲你們詳細的講解JSX語法的要求。

下面這個例子，咱們只作一個數組，利用JSX語法格式將數組中的元素在頁面中渲染爲一個無序列表。代碼以下所示。

let list=[‘張三’,‘李四’,……];
ReactDOM.render(
  <div>
    <ul>
      {
        list.map(item=>{
          return <li>{item}</li>
        })
      }
    </ul>
  </div>,
  document.querySelector("#app")
)

根據上述代碼，咱們能夠得出有關JSX語法的如下結論：

JSX語法中的HTML部分依然採用標記對書寫。
JSX語法中的JavaScript須要用{}進行包裹。
對數組的遍歷只能使用數組的方法（例如：map()），不能使用for循環。

總結

本文是React系列教程的第一篇文章，主要爲你們講解了React項目的搭建，認識了JSX語法的基本格式，學習了ReactDOM.render()方法的使用。明天會爲你們系統的講解JSX語法的書寫格式。

關於做者

小海前端，具備18年Web項目開發和先後臺培訓經驗，在前端領域著有較爲系統的培訓教材，對Vue.js、微信小程序開發、uniApp、React等全棧開發領域都有較爲深的造詣。入住Segmentfault，但願可以更多的結識Web開發領域的同仁，將Web開發大力的進行普及。同時也願意與你們進行深刻的技術研討和商業合做。