原创 安裝配置nodejs

直接在html頁面中通過script標籤引入react的方式只能供學習使用,更廣泛的使用react的方式是在node環境下。下面我們就來安裝配置nodejs: 安裝node 下載地址:https://nodejs.org/en/d

原创 ES5和ES6實現每隔一秒打印一個數字

要求隔一秒打印出一個1,再隔一秒打印出個2,再隔1秒打印出個3… 廢話不多說,直接上代碼: ES6 for(let i = 1; i <= 10; i++){ setTimeout(function () {

原创 移動App-什麼是原生開發和混合開發

原生開發(NativeApp) 指的是使用IOS、Android官方提供的工具、開發平臺、配套語言進行手機App開發的方式。 混合開發(HybirdApp) 指的是使用前端已有的技術(HTML+CSS+JS),然後再搭配一些相關的

原创 移動App-什麼是前端混合移動App

什麼是混合移動App開發 蘋果上的軟件是如何開發出來的? 使用的是OC或者Swift語言 安卓平臺上的軟件是如何開發出來的? 使用安卓相關的語言開發的:Java,安卓的控件 蘋果和安卓平臺上共有的軟件是如何開發出來的? 企業招兩

原创 實現AntDesign組件的按需導入

昨天我們演示瞭如何爲React項目啓用AntDesign組件,現在回顧一下,引入方法爲: import {DatePicker} from "antd"; import "antd/dist/antd.css" 雖然我們只用到了

原创 爲React項目啓用AntDesign組件

AntDesign是螞蟻金服開發的一個UI框架,爲開發人員提供了豐富易用的各種組件。下面我們演示在React中使用AntDesign渲染一個時間選擇器組件: 首先裝包:npm i antd -S 按需導入組件:import {Da

原创 React中匹配路由參數的方式

模糊匹配 默認情況下,路由中的規則是模糊匹配的,如果路由可以部分匹配成功,就會展示這個路由對應的組件。看下面的例子: <Link to="/movie/top250/10">電影</Link> <Route path="/movi

原创 react-router-dom路由的基本使用

在react中啓用路由模塊,首先要裝包:npm i react-router-dom -S,裝完之後在根組件中導入:import {HashRouter, Route, Link} from "react-router-dom"。

原创 實現js中的new

在實現new方法之前首先我們需要知道在使用new操作符創建對象時發生了什麼: 創建一個空對象 將空對象的隱式原型指向構造函數的顯式原型 改變構造函數中的this指向並執行構造函數 返回這個新對象 上面這個過程是針對一般情況的,

原创 實現js中的instanceof

js中的instanceof操作符用來判斷某個對象是否是某個構造函數的實例,使用方法爲obj instanceof fun,左側是一個對象,右側是一個構造函數,如果該對象是構造函數的實例(含繼承),則返回true,否則返回fals

原创 在項目中爲scss或less文件啓用模塊化

在項目當中我們會用到很多第三方樣式表,比如bootstrap,可以發現大多數第三方樣式表都是.css文件。而之前我們爲.css文件啓用了模塊化,這就導致我們在使用第三方樣式表的時候非常不方便。我們希望不爲第三方樣式表啓用模塊化,只

原创 通過local和global設置類名是否被模塊化

使用:local()和:global() :local()包裹的類名,是被模塊化的類名,只能通過className={cssobj.類名}來使用;同時,:local()默認可以不寫,在樣式表中定義的類名,都是被模塊化的類名。 :

原创 使用localIdentName來自定義模塊化的類名

從本質上理解CSS模塊化 怎麼來理解CSS模塊化?是爲CSS添加了作用域嗎?不是的!你可以這麼理解CSS模塊化:CSS模塊化其實就是將類名變成鍵,通過隨機生成的值作爲真正的類名,從而避免CSS作用域衝突的問題。如果你將系統隨機生成

原创 爲普通樣式表通過modules參數啓用模塊化

CSS樣式表作用域衝突問題 由於CSS沒有作用域的概念,因此昨天那種在組件中引入樣式表的方法會使得該樣式表在整個項目中都生效。如果我們想只讓導入的樣式表在當前作用域內有效,需要爲其啓用模塊化。 CSS啓用模塊化 在webpack.

原创 使用css樣式表美化組件

在React中,雖然能夠將樣式寫成js的形式,但這種方法不太方便,寫樣式最好的方法還是使用css樣式表。 安裝配置css-loader 安裝 cnpm i style-loader css-loader -D 配置 在webpac