Corso su ReactJS
-
Upload
linkme-srl -
Category
Technology
-
view
307 -
download
1
Transcript of Corso su ReactJS
![Page 1: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/1.jpg)
A React JourneyA tour of the latest trends in the React ecosystem
![Page 2: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/2.jpg)
JS Frontend Developer at LinkMe Srl
Twitter: @_denb
In love with React and Javascript in general.I’m a 7-month-old dad
Daniele Bertella
![Page 3: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/3.jpg)
JS Frontend Jr Developer at LinkMe Srl
Twitter: @paolorovella
In love with React and sushi, i’m an incurable tv shows binge watcher
Paolo Rovella
![Page 4: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/4.jpg)
ReactReact is a JavaScript library for creating user interfaces
https://facebook.github.io/react
![Page 5: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/5.jpg)
ReactMain concepts
Just the UI
React is only concerned about rendering UI
Virtual DOM
React uses a Virtual DOM Diff implementation for ultra-high performance
Data Flow
React introduces one-way reactive data flow
![Page 6: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/6.jpg)
Components
![Page 7: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/7.jpg)
ReactA basic component
![Page 8: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/8.jpg)
ReactJSX
JSX is a XML-like syntax extension to ECMAScript
https://facebook.github.io/jsx/
![Page 9: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/9.jpg)
ReactComponent Specs
getInitialState()Invoked once before the component is
mounted. The return value will be used as the initial value of this.state.
getDefaultProps()Invoked once, before any instances are created. The return value will be used
as the initial value of this.props.
propTypesThe propTypes object allows you to validate props being
passed to your components
![Page 10: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/10.jpg)
ReactProps
Input data that is passed into the component and can be accessed
via this.props
The propTypes object allows you to validate props being passed to
your components
PropTypes validation providedhttps://facebook.github.io/react/docs/reusable-components.html#prop-validation
![Page 11: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/11.jpg)
ReactState
Internal state dataA component can maintain internal state data (accessed via this.state)
Re-render on state changesWhen a component's state data
changes, the rendered markup will be updated by re-invoking render()
![Page 12: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/12.jpg)
ReactComponent Lifecycles
Various methods are executed at specific points in a component's
lifecycle.
https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods
![Page 13: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/13.jpg)
ReactMixins
Share common functionality
Break repetitive tasks out into standalone pieces optionally included within one or more
components.
![Page 14: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/14.jpg)
ReactECMAScript 6 (ES6) is the upcoming sixth major release of
the ECMAScript language specification.
ES6 support is different among browsers(https://kangax.github.io/compat-table/es6/)
You can use ES6 today thanks to transpilers like Babel
ECMAScript 6 (ES6)
![Page 15: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/15.jpg)
BabelJavascript compiler
Transpile ES6/ES7 in ES5
(Classes / Destructuring / Arrow functions / Spread operator ...)
http://babeljs.io
![Page 16: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/16.jpg)
BabelLearn ES6
http://babeljs.io/docs/learn-es2015/
![Page 17: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/17.jpg)
ReactES5 to ES6 ClassesECMAScript 6 equivalents in ES5 by @addyosmani
https://github.com/addyosmani/es6-equivalents-in-es5
![Page 18: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/18.jpg)
ReactES6 Destructuring
ES6 Arrow function
Expression that make it possible to extract data from arrays or object into dinstinct variables
Shorter syntax compared to function expressions and binds the “this” value (not its own this). They are always anonymous
![Page 19: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/19.jpg)
ReactES6 Object Spread operator
ES6 Decorators
Copy properties from one object to another. The specification order is important
Syntactic sugar which lets you annotate and modify classes at design time
![Page 20: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/20.jpg)
ReactStateless Functional Components
Kill boilerplate code
Dumb and predictable component
No state, no component lifecycles
![Page 21: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/21.jpg)
ReactHigh Order Components
Reuse other components functionalities
Reduce duplication of code
Mixins Are Dead. Long Live Composition
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
![Page 22: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/22.jpg)
ReactHigh Order Components
Thanks @cef62 (Matteo Ronchi)https://speakerdeck.com/cef62/higher-order-
components-in-react-at-voxxed-days-ticino-2016
![Page 23: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/23.jpg)
ReactRouting (react-router) https://github.com/reactjs/react-router
![Page 24: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/24.jpg)
State management
![Page 25: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/25.jpg)
ReduxBy Dan Abramov (@dan_abramov)
https://github.com/reactjs/redux
Predictable state container for JavaScript apps.
Three principles
- Single source of truth- State is read only- Changes are made with pure functions
![Page 26: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/26.jpg)
ReduxApp state
App state described as a plain object
This object is like a “model” except that there are no setters
![Page 27: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/27.jpg)
ReduxActions
The only way to mutate the state is to emit an action, an object describing what happened
![Page 28: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/28.jpg)
ReduxReducers
A function that takes previous state and action as arguments, and
returns the next state of the app
Split reducers in smaller functions managing parts of the state
![Page 29: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/29.jpg)
ReduxReducers
A reducer that manage the complete statecan call other small reducers
![Page 30: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/30.jpg)
ReduxAPI
combineReducers Combine different
reducers in one
createStoreTwo arguments, combined
reducers and persisted state (optional)
![Page 31: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/31.jpg)
Reduxsubscribe
Adds a change listener. Called any time an action is dispatched, and some part of the state
tree may potentially have changed
getStateReturns an object with the current state tree
of your application
dispatch Dispatches an action. This is the only way to
trigger a state change
Store
![Page 32: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/32.jpg)
Reduxreact-reduxPresentational and Container Components
![Page 33: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/33.jpg)
Provider
makes the store available to all container components in the app
only need to use it once when you render the root component
Reduxreact-redux
![Page 34: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/34.jpg)
Reduxreact-redux
connect(params)(Component)
connects a React component to a Redux store.
returns a new, connected component class
![Page 35: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/35.jpg)
Reduxreact-redux
mapStateToProps
a function that tell how to transform the current Redux store state into the props
you want to pass.
mapDispatchToProps
a function that receives dispatch() method and returns a callback props.
![Page 36: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/36.jpg)
ReduxMiddlewares
Suggested way to extend Redux with custom functionality
They are called after an action is dispatched and before it reaches the
reducer
Multiple middlewares can be combined together
![Page 37: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/37.jpg)
Redux Saga middleware let you create Sagas, which are generators responsible for orchestrating complex/asynchronous operations, to gather all your side effects logic in a central place
Reduxredux-thunkhttps://github.com/gaearon/redux-thunk
Middlewares
Redux Thunk middleware allows you to write action creators that return a function instead of an action
The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met
redux-sagahttps://github.com/yelouafi/redux-saga
![Page 38: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/38.jpg)
MobXBy Michel Weststrate (@mweststrate)
https://github.com/mobxjs/mobx
MobX is a library that makes state management simple and scalable by transparently applying functional reactive programming
![Page 39: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/39.jpg)
Functional reactive programming
Functional reactive programming is programming with asynchronous data streams which you can listen to and react accordingly
The introduction to Reactive Programming you've been missing
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
![Page 40: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/40.jpg)
MobXStore (observable/computed)
@observable stateobservable capabilities to objects, arrays and class instances annotating properties
with the @observable decorator
@computedvalues that will be derived automatically
when relevant data is modified
![Page 41: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/41.jpg)
@actionaction is anything that modify
the state and is always triggered by some event (DOM events,
websockets etc)
MobXStore (action)
![Page 42: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/42.jpg)
MobX@observer
observer function / decorator is used to turn ReactJS components into
reactive components.
In this component store can be passed as a prop
mobx-react
![Page 43: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/43.jpg)
MobXFlow
API overview
https://mobxjs.github.io/mobx/refguide/api.html
In-depth explanation of MobX
https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-
explanation-of-mobservable-55995262a254
![Page 44: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/44.jpg)
Testing
![Page 45: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/45.jpg)
EnzymeBy Airbnb (@airbnb)
https://github.com/airbnb/enzyme
Enzyme is a JavaScript testing utility for React.
React components are easy to test because they simply return a description for what UI of the component should look like.
This “description” is the “Virtual DOM” and is a tree-like data structure
![Page 46: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/46.jpg)
Enzyme
Shallow is the recommended mode to start with since it does a better job of isolating your
tests to just a single component
Shallow rendering
Enzyme exports three different “modes” to render and test components: shallow, mount, and render.
![Page 47: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/47.jpg)
EnzymeEnzyme Selectors can find nodes by 4 categories:
CSS selectors
React component constructor
React component display name
Object properties
Enzyme selectors
![Page 48: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/48.jpg)
EnzymeConcise and elegant way of simulating user events, one of the trickier aspects
of UI testing.
Just pass the name of the event you want to simulate, along with any
required data
Event simulations
![Page 49: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/49.jpg)
WebpackModule bundler
Loaders
Plugins
http://webpack.github.io
![Page 50: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/50.jpg)
WebpackModule bundler
![Page 51: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/51.jpg)
WebpackLoaders
TestA regular expression that matches the file extensions that
should run through this loader (required)
Include / ExcludeSet which folders and files the loader should add or ignore
LoaderThe name of the loader (required)
Query
Used to pass Additional options to the loader
![Page 52: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/52.jpg)
WebpackPlugins
Tutorial
http://www.pro-react.com/materials/appendixA
Plugins have the ability to inject themselves into the build process to
introduce custom behaviors.
They do not operate like loaders on individual source files: they influence
the build process as a whole.
![Page 53: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/53.jpg)
CSS in JShttps://github.com/MicheleBertoli/css-in-js
React: CSS in JS techniques comparison
![Page 54: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/54.jpg)
CSS ModulesConcept of using a module bundler, such
as webpack, to load CSS scoped to a particular document
https://github.com/css-modules/css-modules
![Page 55: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/55.jpg)
CSS ModulesWebpack configurationhttps://github.com/css-modules/webpack-demo
![Page 56: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/56.jpg)
CSS ModulesHow to use
![Page 57: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/57.jpg)
CSS ModulesCompositionhttps://github.com/css-modules/webpack-
demo/tree/master/src/components/3-ClassComposition
![Page 58: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/58.jpg)
CSS ModulesComposition
![Page 59: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/59.jpg)
Atomic CSS Moduleshttps://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27
https://speakerdeck.com/michelebertoli/css-in-js
![Page 60: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/60.jpg)
One more thing...
![Page 61: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/61.jpg)
https://speakerdeck.com/paolorovella/react-native
![Page 62: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/62.jpg)
![Page 63: Corso su ReactJS](https://reader030.fdocument.pub/reader030/viewer/2022020108/5871aad21a28abda6a8b56f1/html5/thumbnails/63.jpg)