初識React

這裏寫圖片描述

React的核心思想:封裝組件,再由組件構成複雜頁面,同時各個組件維護自己的狀態和UI,當狀態發生變化,自動重新渲染整個組件。

React 是一個用於構建用戶界面的JavaScript庫,它起源於 Facebook 的內部項目,用來架設 Instagram 的網站,並於 2013 年 5 月開源。

React主要用於構建UI,而且性能出衆,代碼邏輯簡單,所以我打算好好研究一下,既滿足了自己的好奇心,也提高一下自己的技術水平。

在學習的過程中我參考了阮大大的React教程React 官方文檔

React特點

  1. 聲明式設計 : 以聲明式編寫UI,可以讓你的代碼更加可靠,且方便調試
  2. 高效 : React通過對DOM的模擬,最大限度的減少與DOM的交互
  3. 靈活 : 提供了可以調用其他第三方框架或庫的接口
  4. JSX : JSX是JavaScript語法的擴展,建議開發過程中使用它
  5. 組件 : 通過React構建擁有各自狀態的組件,再由組件構成更加複雜的界面,代碼更加容易得到複用
  6. 單向響應的數據流 : React實現了單向響應的數據流,減少了重複代碼

創建新應用

1.React可以直接下載使用,下載包中提供了很多學習的實例,可以去官網下載最新版

2.使用create-react-app構建React開發環境(需要安裝node.js,另一系列文章中會提到node的安裝,大家也可自行搜索安裝方法)

create-react-app 是來自於 Facebook,通過該命令我們無需配置就能快速構建 React 開發環境
create-react-app 自動創建的項目是基於 Webpack + ES6

執行以下命令創建新項目:


npm install -g create-react-app

create-react-app my-app

cd my-app
npm start

在瀏覽器中打開 http://localhost:3000/ ,結果如下圖所示:
這裏寫圖片描述

項目的目錄結構如下所示 :
這裏寫圖片描述

嘗試修改src/App.js文件裏的代碼 :
這裏寫圖片描述

修改之後再打開 http://localhost:3000/ (一般會自動刷新), 會發現輸出結果已經改變:
這裏寫圖片描述

當你準備好將其部署到生產環境中時,運行 npm run build 將會在 build 文件夾中創建一個優化好的應用

該文章同步在 :
簡書 : https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io

發佈了59 篇原創文章 · 獲贊 29 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章