1 of 33

ReactJS + Redux

Tutorial

https://github.com/atahani/reactjs-tutorial

​

slide

2 of 33

نکته: به دلیل اینکه بیشترلغات استفاده شده به انگلیسی می‌باشد، اسلایدها کلاً به انگلیسی تهیه شده است !

3 of 33

Ahmad Tahani

Developer

My Blog >> atahani.com

Follow me at @atahani

Follow me at GitHub

Contact me me@atahani.com

4 of 33

Single

Page

Application

( SPA )

5 of 33

https://facebook.github.io/react/

6 of 33

Build with React

7 of 33

8 of 33

Prerequirement

9 of 33

http://marksheet.io/

http://cssdeck.com/

http://learn.shayhowe.com/html-css/

10 of 33

http://javascript.info/

​

https://www.w3schools.com/js/

11 of 33

  • ECMAScript: A language standardized by ECMA International and overseen by the TC39 committee. This term is usually used to refer to the standard itself.
  • JavaScript: The commonly used name for implementations of the ECMAScript standard. This term isn’t tied to a particular version of the ECMAScript standard, and may be used to refer to implementations that implement all or part of any particular ECMASCript edition.
  • ECMAScript 5 (ES5): The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers
  • ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers. To see the state of implementation by different browsers and tools, check out these compatibility tables.
  • ECMAScript 2016: The expected 7th edition of ECMAScript. This is scheduled to be released next summer. The details of what the spec will contain have not been finalized yet
  • ECMAScript Proposals: Proposed features or syntax that are being considered for future versions of the ECMAScript standard. These move through a process of five stages: Strawman, Proposal, Draft, Candidate and Finished.

​

source

What is ES2015

12 of 33

http://es6-features.org/

https://github.com/lukehoban/es6features

13 of 33

Babel

Learn ES2015

14 of 33

Requirement Tools

15 of 33

https://nodejs.org/en/

​

https://www.npmjs.com/

16 of 33

https://yarnpkg.com/en/

https://yarnpkg.com/lang/en/docs/migrating-from-npm/

https://medium.freecodecamp.com/npm-vs-yarn-benchmark-9b456de4aa96#.pxmdntdb8

​

17 of 33

https://code.visualstudio.com/

https://code.visualstudio.com/Docs/languages/javascript

VSCode

18 of 33

https://webpack.js.org

19 of 33

See Samples

20 of 33

http://eslint.org/

http://eslint.org/docs/rules/

https://github.com/airbnb/javascript/tree/master/react

ESLint

21 of 33

Hello World component

22 of 33

Stateful vs Stateless Components

23 of 33

Hot Module Replacement

24 of 33

State in Components

25 of 33

props in Components

26 of 33

Events

27 of 33

Component

Life

Cycle

Link

28 of 33

Style in React

29 of 33

React Router

30 of 33

External Components

http://www.material-ui.com/

​

https://github.com/brillout/awesome-react-components

31 of 33

Redux

32 of 33

React Redux

33 of 33

Final

https://facebook.github.io/react/

​

http://redux.js.org/

​

https://github.com/redux-saga/redux-saga

​

https://medium.com/tag/reactjs

​

https://www.google.com