React入門例項

2022-08-03 09:18:10 字數 869 閱讀 3866

react 的核心思想是:封裝元件,各個元件維護自己的狀態和ui,當狀態變更,自動重新渲染整個元件。

理解:react首先值得拍手稱讚的是它所有的開發都基於乙個元件(component),元件和元件之間傳遞方法,而且每個元件都有乙個狀態(state),當方法改變了這個狀態值時,整個元件就會重繪,從而達到重新整理,另外,說到重繪就要提到虛擬dom了,就是用js模擬dom結構,等整個元件的dom更新完畢,才渲染到頁面,簡單來說只更新了相比之前改變了的部分,而不是全部重新整理,所以效率很高。

大家先新建乙個專案資料夾,在裡面建乙個專案資訊的檔案package.json:

,

"author": "張三",

"license": "isc",

"dependencies": ,

"devdependencies":

}

建好之後,執行命令:npm install安裝專案依賴的所有模組。

專案使用的技術方案是:webpack+react+es6。在專案資料夾下新建乙個webpack.config.js

'use strict';

module.exports = ,

// externals屬性是告訴webpack當遇到require('react')的時候,不去處理並且預設為全域性的react變數。

// 這樣子,我們就需要在index.html單獨用src去載入js。

externals: ,

module: ,,,

]}};

react 開發入門

三子棋遊戲 安裝react 建立本地伺服器 啟動執行 直接通過命令安裝 修改測試初始化 刪除src目錄下所有檔案 複製中的index.css和index.js檔案 啟動檢視npm start 增加互動 使用陣列將歷史資料儲存在最上層的game中,可以訪問歷史步驟,如下 import react fr...

react 基礎入門

環境搭建 1.電腦裡必須裝node.js 2.全域性npm命令安裝react環境 3.建立react專案demo 專案名 4.啟動react專案 npm start 目錄結構 json 專案配置 2.public裡面存放公共內容,主要是index.html入口檔案 3.src裡面存放專案元件,樣式,...

React 入門挖坑

新建乙個檔案,然後建立乙個index.html檔案,唉,看了react的官網教程,才知道什麼叫做操蛋,媽的,簡直就是東拉西扯,東拼西湊啊,根本不知道他在扯什麼犢子。官網教程hello world,跟著寫,根本不知道寫出個什麼玩意兒,只能找資料看 引入 建立完成之後,就需要在html檔案裡面引入rea...