Coder Social home page Coder Social logo
reactjs101

kdchang / reactjs101 Goto Github PK

View Code? Open in Web Editor NEW
4.1K 234.0 925.0 7.54 MB

從零開始學 ReactJS(ReactJS 101)是一本希望讓初學者一看就懂的 React 中文入門教學書,由淺入深學習 ReactJS 生態系 (Flux, Redux, React Router, ImmutableJS, React Native, Relay/GraphQL etc.)。

Home Page: https://www.gitbook.com/book/kdchang/react101/details

License: Other

JavaScript 66.45% HTML 5.56% CSS 0.05% Python 6.31% Java 4.81% Objective-C 16.82%
react immutablejs react-tutorial redux graphql react-native javascript flux ecosystem relay es2015 es6 es2017 ecmascript ecmascript2015 front-end mobile andriod ios reactjs

reactjs101's Introduction

從零開始學 ReactJS(ReactJS 101)

一本給初學者的 React 中文入門教學書,由淺入深學習 ReactJS 生態系 (Flux, Redux, React Router, ImmutableJS, React Native, Relay/GraphQL etc.),打造跨平台應用程式。

從零開始學 ReactJS(ReactJS 101)

相關連結(Links)

  1. 從零開始學 ReactJS(ReactJS 101)粉絲頁

  2. 繁體中文範例程式碼和書籍內容連載位置

  3. 勘誤、許願、建議或提問

翻譯版本(Translate)

  1. 简体中文版本 by @carlleton
  2. 前端圈简体中文版本 by @blueflylin 特別感謝前端圈小夥伴!

若需翻譯成其他語言版本,請先 fork 一份 repo 到自己的 GitHub 並另外開新的 branch。最後將翻譯版本連結更新在 master 分支中 README.md相關連結(Links) 後發送 Pull Request,謝謝您。

目錄(Table of Contents)

先備知識(Prior Knowledge)

本書針對已具備基本 HTML、CSS 和 JavaScript 和 DOM 操作知識的讀者設計,但若讀者對上述的技術仍不熟悉的話,建議可以先行參考:MDNCodecademyW3C SchoolJavaScript核心 或是參考筆者 之前的教學講義 進行學習。另外,本書全書範例都將以 ES6+ 撰寫,若需參考 ES5 用法,請參考附錄一的 React ES5、ES6+ 常見用法對照表

關於作者(Author)

@kdchang 文藝型開發者,夢想是做出人們想用的產品和辦一所心目中理想的學校,目前專注在 Mobile 和 IoT 應用開發。A Starter & Maker. JavaScript, Python & Arduino/Android lover.:)

版權許可(License)

本書採用創用CC授權4.0 "姓名標示─非商業性─相同方式分享(BY-NC-SA)" 授權。

從零開始學 ReactJS(ReactJS 101)

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。若使用者修改該著作時,僅得依本授權條款或與本授權條款類似者來散布該衍生作品。使用時必須按照著作人指定的方式表彰其姓名。

詳細資訊請參考 CC BY-NC-SA 4.0

關鍵字(Keywords)

React, React Native, React Router, Flux, Redux, Node, Express, ImmutableJS, NPM, Babel, Browserify, Webpack, Gulp, Grunt, Pure Functions, PropTypes, Stateless Functional Components, Presentational Components, ES6, ES5, JSX, Jest, Unit Test, Component, Relay, GraphQL, Universal/Isomorphic, React Tutorial React教程, React教學, 學React, React Tutorial, Tutorial, Ecosystem, Front-End

reactjs101's People

Contributors

kdchang avatar Chocobo1 avatar ArvinH avatar houjunchen avatar appleboy avatar CodinCat avatar yehjames avatar blue119 avatar lolikung avatar chentsulin avatar cyhsutw avatar colloquet avatar HsiehMinChien avatar b12031106 avatar LySnake avatar NoobTW avatar AshrafChu avatar yalibian avatar qingmingsang avatar TroyCode avatar jxiangji avatar walesyu avatar

Stargazers

 avatar  avatar Yizzy avatar  avatar  avatar Dee Li avatar  avatar xiaonaonao avatar  avatar vuu avatar SYLin avatar 包桂锋 avatar 空白咯 avatar xixi avatar  avatar yang avatar Ashish Padalkar avatar LuYee6813 avatar  avatar ming avatar  avatar  avatar  avatar  avatar  avatar wuchiwo avatar Anita-Sun avatar  avatar  avatar  avatar  avatar 枯荷听雨 avatar williesmithchen avatar bao-ah avatar 大大怪将军 avatar  avatar Ching Wen Yang avatar  avatar yyeng avatar  avatar  avatar Tan Yi Cheng avatar  avatar Coder CWX avatar  avatar lalacute avatar  avatar  avatar Aldrin Marz7! avatar  avatar Andrea F avatar  avatar 郵差 avatar Lonely Yeezhi Chicken avatar Sihle Huang avatar Ray avatar Chu Ren Fu avatar  avatar  avatar 十七 avatar TonyTsai avatar  avatar Patrik avatar  avatar Chingwen Hu avatar Yun-Fang Li avatar  avatar Doris Lee avatar  avatar Jack avatar  avatar  avatar SSW avatar Kao wei avatar BlackT.W avatar henry5720 avatar Kevin Lee avatar Ying-ru,Liu avatar Jinyang Liu avatar Hassan avatar  avatar Bella avatar  avatar  avatar  avatar Ascii avatar Myos avatar  avatar Leo Chang avatar James Project avatar xukaixuan avatar  avatar mophia mole Qolla avatar Cherry Zhao Yue avatar Huang Hua avatar  avatar  avatar  avatar Eva Chang avatar YellowOrange_Huang avatar

Watchers

Stone Gao avatar  avatar Kaito avatar Lance He avatar Andy Chiang avatar 情封 avatar CCF avatar  avatar James Cloos avatar Terry K. avatar  avatar  avatar Williams avatar  avatar Noctis Hsu avatar KD Chang avatar Sean Lin avatar Hongbo Zhen avatar sha avatar  avatar (◕ᴥ◕) avatar kenychen avatar Peixiong Gao avatar funjoke avatar  avatar JustinC avatar Ted avatar qiao avatar Edward Zhou avatar Ryan chien avatar Kim Kao avatar  avatar renzhiqiang avatar billxu avatar Go7hic avatar dlsyaim avatar 大番茄 avatar  avatar bubu avatar Martín Montes avatar Sean Chang avatar Xuguang Li avatar  avatar 周昌权 avatar Dylan Lyu avatar 张江平 avatar Wes Davies avatar  avatar Rz Chen avatar Rodmen avatar Anthony Hsu avatar Jethro avatar RayLin avatar daming-lu avatar Chien An Chen avatar  avatar  avatar fred avatar Vic Huang avatar Jeremy Yang avatar  avatar  avatar Tony Ng avatar whitglint avatar Quack~ avatar  avatar Scott Yen avatar  avatar Martin Yeh avatar  avatar Yuting Hsu avatar  avatar elevensky avatar  avatar tanxin avatar jieniu avatar  avatar Rukeith avatar Ching-Feng Lin avatar Rei Lin avatar  avatar Rex avatar  avatar  avatar  avatar Bill Chen avatar  avatar seven avatar 姜林毅 avatar francis.su avatar Yong avatar Edward Lai avatar carlleton avatar  avatar ibcLee avatar Jill Li avatar Kate avatar Even Lo avatar  avatar Batur avatar

reactjs101's Issues

Two small errors.

At page CH7.

  1. Code in "src/actions/todoActions.js".
    "CREATE_TODO , DELETE_TODO, CHANGE_TEXT" are used as string.
export const createTodo = createAction('CREATE_TODO');
export const deleteTodo = createAction('DELETE_TODO');
export const changeText = createAction('CHANGE_TEXT');
  1. Link "上一章:Redux 基礎概念".
    It has error url.

Typo

Ch07 - flux

路徑錯誤

在這個範例中我們繼承了 Facebook 提供的 Dispatcher API(主要是繼承了 dispatch、register 和 subscribe 的方法),打造自己的 DispatcherClass,當使用者觸發 handleAction() 會 dispatch 出事件。以下是 src/dispatch/AppDispatcher.js:

src/dispatch/AppDispatcher.js 應為 src/dispatcher/AppDispatcher.js

error

ch3.
ReactDOM.render(, document.getElmentById('app'));
應該是
ReactDOM.render(, document.getElementById('app'));

謝謝您提供這麼好的教學文件.

CH10,在react-redux-server-rendering中运行项目,然后修改组件的代码,刷新页面出现client与server不一致的错误

错误代码如下
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) - react-text: 5 --> 123<!-- /react-text (server) - react-text: 5 --> <!-- /react-text -->
应该是client更新了,但是server端没有更新,请问怎么解决这个错误

redux-logger

src/store/configurationStore.js
import createLogger from 'redux-logger';
=>
import { createLogger } from 'redux-logger';
for redux-logger v3.0.0

Props、State、Refs 与表单处理

Props、State、Refs 与表单处理-章节,最后一个markdown例子本地运行出错,浏览器不能解析,除非引入

<script src="./build/browser.min.js"></script>
<script type="text/babel" src="./app.js"></script>}

才能正常运行解析

Ch03 ReactJS 與 Component 設計入門介紹 typo

中間介紹 Functional Component 寫法的範例:

2. 使用 Funtional Component 寫法(單純地 render UI 的 stateless components....

以及程式碼中的註解部分

// 使用 arror function 來設計 Funtional Component 讓 UI 設計更單純...

中的 arror 是否應該為 arrow ? Funtional 是否應該為 Functional ?

感謝您的無私分享,這份教學非常詳盡實用!

#Ch09


以下是 src/components/ResultPage/ResultPage.js,將 userId 當作 props 傳給 :

import React from 'react';
# import GithubBox from '../../components/GithubBox';

...
*# GithubBox data={props.data} userId={props.location.query.userId} *
...

在code裏面,
1.import GithubBox from '../../components/GithubBox'; 應改成上述加粗部分內容
2.GithubBox data={props.data} userId={props.location.query.userId} 應改成應改成上述加粗部分內容

最後,非常感謝您提供的這份教學書,給予了我很大的幫助!!!

CH10 美食分享範例Code無法順利執行( bcrypt 0.8.7 在win10上的問題 )

  您好,首先感謝您編輯了這麼一本好書,著實獲益良多。以下是我的問題:

  我在執行ch10美食分享範例時,由於win10環境下執行npm install指令會有其中一項bcrypt 0.8.7無法安裝,即使照著nodejs/node-gyp的操作,依然無法解決問題。

On Windows:
Option 2:
--Install Visual Studio 2015 (or modify an existing installation) and select Common Tools for Visual C++ during setup. This also works with the free Community and Express for Desktop editions.
  💡 [Windows Vista / 7 only] requires .NET Framework 4.5.1

--Install Python 2.7 (v3.x.x is not supported), and run npm config set python python2.7 (or see below for further instructions on specifying the proper Python version and path.)

--Launch cmd, npm config set msvs_version 2015

  由於一直無法解決bcrypt 0.8.7安裝問題索性尋找bcryptjs作為替代方案,在package.json刪除bcrypt 0.8.7並手動npm install bcryptjs後直接npm start,一樣沒解決問題,顯示訊息與bcrypt 0.8.7沒安裝完成時執行npm start的情況一模一樣。
  
  請問我是不是漏了什麼步驟,亦或是我沒有找到對的解決方法,以至於導致範例code無法順利運行的情況呢?

==> �  Listening on port 3000. Open up http://localhost:3000/ in your browser.

C:\Users\user\Documents\ReactJS\react-router-redux-node-isomorphic-open-cook\node_modules\mongodb\lib\server.js:261
        process.nextTick(function() { throw err; })
                                      ^
MongoError: failed to connect to server [localhost:27017] on first connect
    at Pool.<anonymous> (C:\Users\user\Documents\ReactJS\react-router-redux-node-isomorphic-open-cook\node_modules\mongodb-core\lib\topologies\server.js:313:35)
    at emitOne (events.js:96:13)
    at Pool.emit (events.js:188:7)
    at Connection.<anonymous> (C:\Users\user\Documents\ReactJS\react-router-redux-node-isomorphic-open-cook\node_modules\mongodb-core\lib\connection\pool.js:260:12)
    at Connection.g (events.js:291:16)
    at emitTwo (events.js:106:13)
    at Connection.emit (events.js:191:7)
    at Socket.<anonymous> (C:\Users\user\Documents\ReactJS\react-router-redux-node-isomorphic-open-cook\node_modules\mongodb-core\lib\connection\connection.js:162:49)
    at Socket.g (events.js:291:16)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at emitErrorNT (net.js:1271:8)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
[nodemon] app crashed - waiting for file changes before starting...

Ch04 Refs 與表單處理

"Refs 與表單處理"章節中提到的ref用法,在react官網上https://facebook.github.io/react/docs/refs-and-the-dom.html 已經不建議使用了,節錄如下:

If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you're currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

windows下运行错误

如下

logger: undefined && undefined.console || window && window.console,
^

ReferenceError: window is not defined

有無加上constructor的差異

hi 2個問題想請問一下
(1)
在Ch03/reactjs-introduction.md這邊有提到
ES6 Class component中render是唯一必須的方法

在Ch04/props-state-introduction.md
使用 ES6 Class Component 寫法這邊
有用到constructor

是否如果沒有用到state的話,可以不用寫constructor?

(2)
Ch04/react-component-life-cycle.md
Component 生命週期展示那段code中
this.handleClick = this.handleClick.bind(this);
可以稍微說明一下為什麼需要這行呢?
謝謝

React Router 入門實戰教學 範例無法執行

凱迪老師你好
我是你在hahow上的學生
看到你的從零開始學React的教學,剛好對React有些興趣
所以就跟著你的教學文件學習
最近學習到Ch05 React Router 入門實戰教學碰到一些問題
在執行到npm start時,一直執行失敗,無法啟動web server
我是直接將github上面的資料下載(放到我mac的Documents資料夾)
依序按照範例安裝npm套件
但是最終執行卻失敗了(重複安裝執行五六次...)
不曉得原因為何?
有空的時候可以麻煩你指點迷津
謝謝~

資料夾截圖:
2016-11-11 9 05 45
command line錯誤訊息:
group
chrome錯誤訊息:
2016-11-11 9 13 39

#勘误#CH10_react-router-redux-node-isomorphic-open-cook

项目中的的AppBarContainer代码有误

dispatch(setRecipe({ key: 'recipeId', value: '' }));
//改成
dispatch(setRecipe({ keyPath: ['recipe', 'id'], value: '' }));

另外,我很奇怪,为嘛WebAPI的action,dispatch后,使用路由跳转,为啥要页面重新加载一次。。。

window.location.reload(); 
browserHistory.push('/'); 

这样不就失去单页应用的意义了?而且项目操作起来很不顺畅。。感觉不是这样用的

typo?

「以上就是讀者 React 在生態系遊走時會出現各種關主」

-->

「以上就是讀者 React 在生態系遊走時會出現各種關卡」

#勘誤# CH09 > react-router-redux-github-finder.md > 第397行小错误

Author 你好,我在阅读CH09教程中发现了一个小错误,望修正以便于他人查阅。

react-router-redux-github-finder.md 原文中第397行:

以下是 src/components/ResultPage/ResultPage.js

因为下文中代码为HomePage.js内容,所以这行内容应相应改成:

以下是 src/components/HomePage/HomePage.js

babel-standalone 直接轉 jsx 有沒有辦法在裡面直接寫 import?

您好,我最近開始學 React,使用上遇到一個問題

我直接使用 babel-standalone 在 jsx 裡面寫 import 會出現需要 require.js 的錯誤
Uncaught ReferenceError: require is not defined
然後我把 require.js 放到 script 去之後再的話會出現類似這樣的錯誤
Module name "..." has not been loaded yet for context: _. Use require([])

然後我就試了一些方法
包含在 jsx 前面先用 require.config 去設定也沒用
想請問這兩個搭在一起有沒有辦法直接使用?

謝謝!

CH07 錯字

前言錯字: tyoe

以下這張圖表示了整個 React Redux App 的資料流程圖(使用者與 View 互動 => dispatch 出 Action => Reducers 依據 action tyoe 分配到對應處理方式,回傳新的 state => 透過 React Redux 傳送給 React,React 重新繪製 View):

請教eslitrc設置

你好 非常謝謝你寫的React教學!讓我受益良多
目前我是使用sublime開發環境,
從一開始章節的內容開始我設置.eslintrc都是設置
http://eddychang.me/blog/javascript/51-sublime-text-3-react.html
但是讀到實戰教學:用 React + Router + Redux + ImmutableJS 寫一個 Github 查詢應用時,
依照source code的.eslintrc設置或是教學文的.eslintrc設置皆會有不正常的紅字出現在環境中,
直到我把檔案更新如下,才稍微正常一些,想請教是我的開發環境出了一些問題嗎?謝謝

{
  // use babel-eslint for parsing!
  "parser": "babel-eslint",
  "env": {
    // for browser
    "browser": true,
    // in CommonJS
    "node": true
  },
  // some rule options:
  "rules": {
    "quotes": [2, "single"],
    "eol-last": [0],
    "no-mixed-requires": [0],
    "no-underscore-dangle": [0]
  }
}

关于一些API

您好,在redux一课中,我想问您一下 关于set() get() merge()...这些API是哪里来的?

CH07/08 - Is the combine reducer missing the 'todo' key for todoReducer?

Im new to javascript, but I can only make it work after changing it to

const rootReducer = combineReducers({ 'todo': todoReducer });

I believe mapStateToProps(state) in TodoHeaderContainers is trying to query such key
function mapStateToProps(state){ return { todo: state.getIn(['todo', 'todo']) } }

Dynamic property names & template strings 举例不恰当

ES5可以写成:
var Todo = React.createClass({
onChange: function(inputName, e){
this.setState({
[iputName + 'Value']:e.target.value,
})
}
})
ES6可以写成:
class Todo extends React.Component({
onChange(inputName, e){
this.setState({
[${inputName}Value]: e.targe.value,
})
}
})

这样区别不大

CH09编译出错

在编译ch09的代码时出现以下错误。能帮忙解决一下吗?
ERROR in .//react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in D:\reactjs101-master\Ch09\react-router-redux-github-finder\node_modules\react-tap-event-plugin\src
@ ./
/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37

ERROR in .//react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in D:\reactjs101-master\Ch09\react-router-redux-github-finder\node_modules\react-tap-event-plugin\src
@ ./
/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56

ERROR in .//react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in D:\reactjs101-master\Ch09\react-router-redux-github-finder\node_modules\react-tap-event-plugin\src
@ ./
/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60

ERROR in .//react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in D:\reactjs101-master\Ch09\react-router-redux-github-finder\node_modules\react-tap-event-plugin\src
@ ./
/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60

ERROR in .//react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in D:\reactjs101-master\Ch09\react-router-redux-github-finder\node_modules\react-tap-event-plugin\src
@ ./
/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60

ERROR in .//react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in D:\reactjs101-master\Ch09\react-router-redux-github-finder\node_modules\react-tap-event-plugin\src
@ ./
/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58

Appendix02範例無法顯示條目

附錄二、用 React Native + Firebase 開發跨平台行動應用程式
自行解決了redux-logger的版本問題 及TextInput無法顯示的問題後

頁面還是無法顯示submit進去的mottolist
但資料確認有進入firebase
能否確認程式是否能正確運行? 謝謝QQ
img_0035 1

preLoaders 造成webpack無法執行?

嗨, 您好
在學習CH05的時候,遇到一個問題
發現在 webpack.config.js 裡面的 module: { preLoaders: [ { ... } ],
似乎造成webpack錯誤 無法執行

如下terminal截圖
image

稍微查了一下,解決方法是用 [email protected] 版本
我目前是 "webpack": "^2.2.0", 應該也是latest的吧....

可以請問一下您目前有遇到這個問題嗎~~?
是可以有其他解法或 還是就使用stable版本的webpack呢

Ch03 "Component PropType 防呆機制"

針對Ch03有兩個建議:

  1. 建議可在初步介紹prop之後,再介紹PropType防呆機制
  2. 防呆機制的程式範例中,MyComponent最好能真的使用到todo與name這兩個prop

PS. 教學寫得很棒,看得很過癮

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.