Time of Update: 2016-07-24
標籤:1.react作為backbone的視圖2.backone和react和通訊,backbone的view 渲染react組件, react組件使用backbone的collection資料<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <script src="http://static.runoob.
Time of Update: 2016-07-17
標籤:這周做的demo3和demo4、5
Time of Update: 2016-07-14
標籤:通過webpack可以把整個React項目整合成一個單頁面的網站,此時可以通過react-router來處理路由。首先安裝:npm install react-router --save 由於react-router使用了history,要在webpack.config.js中進行相應的配置: devServer: { historyApiFallback: true}否則,類似localhost:8080/foo的URL會返回404。之後為了將整個項目做成一個單頁面,
Time of Update: 2016-07-10
標籤: React是現在主流的高效的前端架構,其官方文檔 http://reactjs.cn/react/docs/getting-started.html 在介紹組件間通訊時只給出了父子組件間通訊的方法,而沒有給出獨立組件間通訊的解決方案。這裡我介紹一種不錯的實現方式——signals.
Time of Update: 2016-07-04
標籤:React最初來自Facebook內部的廣告系統項目,項目實施過程中前端開發遇到了巨大挑戰,代碼變得越來越臃腫且混亂不堪,難以維護。於是痛定思痛,他們決定拋開很多所謂的“最佳實務”,重新思考前端介面的構建方式,於是就有了React。React帶來了很多開創性的思路來構建前端介面,雖然選擇React的最重要原因之一是效能,但是相關技術背後的設計思想更值得我們去思考。之前我也曾寫過一篇React的入門文章,並提供了範例程式碼,大家可以結合參考。 上個月Reac
Time of Update: 2016-07-04
標籤:最近搞一個pc端的活動,搞了一個多月,甚煩,因為相比於pc端,更喜歡移動端多一點。因為移動端又能搞我的react了. 今天主要總結一下react當中tab切換的幾種方式,因為tab切換基本上都會用到。當然,你也可以在react當中用jquery或者zepto來實現,不過既然都用react了,能不能用jq,就盡量不用jq。不過不得不吐槽一下,在jquery很簡單的東西,在react中稍微複雜化了一點。 目前我用到的tab切換隻有兩種方式,所以暫時總結這兩種,以後有遇到其他的再總結
Time of Update: 2016-06-25
標籤: Nodejs 一度將前端JS 推到了伺服器端,而15年FB的React-Native RN再一次將JS 推到了移動端的開發浪潮中。RN的優勢這裡不再重複,它是我們這些習慣了服務端、web端開發,而又不想去花太多時間掌握Android、IOS移動端原生開發的人員的福音,可以說是我們通向全棧工程師的快速捷徑!於是乎最近開始學習React-Native,並將學習中的一些點滴記錄下來。 網上關於RN的資料不少了,首先是環境配置,不一定非得Mac
Time of Update: 2016-06-25
標籤:1,React的開發背景2,React的特點3,React的開發環境搭建3.1 下載FaceBook官方的基礎代碼 :facebook.github.io/react/index.html3.2 文字編輯器Sublime Text3安裝 3.2.1 下載sublime Text3下載 地址:http://www.sublimetext.com/3
Time of Update: 2016-06-19
標籤:React 便於使用 inline-style,而 semantic-ui 和一些特殊情況不得不使用樣式檔案。另外,瀏覽器安全色性問題也需要解決。解決方案:同時使用 post-css + autoprefixer 和 inline-style-prefixer。注意:semantic-ui 官網建議在 meteor 中使用 less-autoprefixer 來進行編譯。為了統籌大局,我們還是繼續使用 less 包,另外加持 post-css + autoprefixer
Time of Update: 2016-06-18
標籤:semantic-ui 的 fixed menu 和 sidebar 放在 body 中啟動並執行很好(這是 sui 的預設設計),但是在 react 應用中,組件體系都是放在比較深的地方,很難直接放在body中,這時,問題很多。基本思路:建立一個 sidebar 組件,以此作為 sidebar 的 context,並將內容全部放到 pusher 部分中。如此構建,會發現很多問題:navbar 和 sidebar 不再是
Time of Update: 2016-06-16
標籤:遇到的問題目前模板是自己任意定義的,樣式不好控制
Time of Update: 2016-06-15
標籤:React的屬性和狀態React資料使用兩種事物進行傳遞:1.屬性(props):在組件外部傳入,組件內部通過this.props獲得(與生俱來,不容易被改變的)2.狀態(state):在組件內部設定或更改,組件內部通過this.state獲得(狀態是後天獲得的,經常會發生改變的)屬性專一,狀態多情 React屬性(Props)屬性是在一個組件被聲明的時候就被(父組件)賦予的,並且不可被修改屬性被傳遞的方式一般在組件被調用時候被傳入屬性可以使字串、數組、對象...直接把Objec
Time of Update: 2016-06-15
標籤:React設計出來就是單向資料流(從伺服器流向用戶端),不存在頁面資料和服務端資料進行綁定 通過組件化(component)去管理不同的資料流,用React開發、建立任何一個應用都是一個組件 前端組件定義:HTML+CSS+JS+IMG的組合體 在實際開發中,可以根據頁面的布局,對頁面進行拆分和組件化 特點和優勢:1.虛擬DOM(開發時不需要在頁面中寫任何DOM元素)架構底層的一套DOM實現2.JSX文法(使用JavaScript XML格式的文法)
Time of Update: 2016-06-15
標籤:學習react也有一段時間了,使用react後首頁渲染的速度與seo一直不理想。打算研究一下react神奇服務端渲染。react服務端渲染只能使用nodejs做服務端語言實現前後端同構,在後台對react組件進行解析並產生html字串後返回視圖頁面。後台為什麼可以解析react組件?因為Node.js是一個Javascript運行環境,nodejs與javascript文法基本是相同的,所以nodejs可以正常解析react組件。一、準備動作 1、安裝nodejs與安裝expre
Time of Update: 2016-06-13
標籤:moles-packermoles-packer 是由攜程架構團隊研發的,與攜程moles架構配套使用的React Native 打包和拆包工具,同時支援原生的 React Native 項目。github地址npm地址安裝#從npm倉庫中安裝。npm install -g moles-packer擷取協助資訊moles-packer --help使用#在React Native項目根目錄下執行命令moles-packer --input /path/to/project --entry
Time of Update: 2016-06-06
標籤:We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time. Now when we click the filter, the url changes, but the todos list doesn‘t change. So continue with that.
Time of Update: 2016-06-04
標籤:We will learn how to add React Router to a Redux project and make it render our root component. Install: npm install --save react-router import React from ‘react‘;import {Provider} from ‘react-redux‘;import {Router, Route} from
Time of Update: 2016-06-02
標籤:明後兩天,ReactEurope 2016大會在巴黎舉行,本次大會演講主題有:React Native(動畫及運行效能最佳化)Flux-like 資料架構(GraphQL 最佳實務與展望、Redux 發展方向、Falcor 介紹、Flux 架構 debug)工具(Flow、Exponent IDE、Recompose)大會網址:https://www.react-europe.org上線了 CTO
Time of Update: 2016-06-01
標籤:React的使用與JSX的轉換前置技能:Chrome瀏覽器 一.拿糖:React的使用React v0.14 RC 發布,主要更新項目: 兩個包: React 和 React DOM DOM node refs 無狀態的功能組件 棄用 react-tools 編譯器最佳化 吃糖:開門見山,上代碼。<!DOCTYPE html><html><head>
Time of Update: 2016-05-28
標籤:一 開發條件1. HomebrewHomebrew, in order to install the required NodeJS, in addition to some recommended installs./usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2.Node使用Homebrew去安裝Node.brew