my introduction to ReactJS

How I got to learn a little bit of ReactJS and where I am going with it

Transcript

1. (my) Introduction to (my) Introduction to React React as a java dev
2. Keynote: Keynote: Thank you for your time Questions and comments at the end, if it can't wait I will note them down for discussion later My intention is to learn as much as to share Please be mindful of others' time Let's aim for a 30 minutes presentation: 10-15 gist of react 10-15 technical discussion discussion (if needed)
3. What is it? What is it? JS library by Facebook the View in the MVC pattern allows rapid development of single page applications
4. Why React? Why React? very active community great development ecosystem: for testing for optimizing bundles redux for state management JSX for syntax simplification good development practices: declarative functional programming runs anywhere (React Native)
5. Alternatives Alternatives Angular Vue http://www.npmtrends.com/angular-vs-react-vs-vue-vs-@angular/core
6. React React flexibility (library) lightweight freedom to choose stack UI templates and js logic together (JSX) Angular Angular less flexibility (framework) bulky more rigidity less arguments about choice Backed up by big names (FB vs Google) both use cli tools for rapid development https://www.madewithangular.com/categories/angular https://github.com/facebook/react/wiki/sites-using-react https://react.rocks https://learngitbranching.js.org/?demo
7. How does React work How does React work Virtual Dom: https://reactjs.org/docs/faq-internals.html The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called . reconciliation
8. ...How does React work ...How does React work The solution to managing the DOM is declarativeness . Instead of low-level techniques like traversing the DOM tree manually, you simple declare how a component should look like. ReactElement Stateless Immutable Live in the Virtual DOM ReactComponent Stateful (can be) re-rendered when state changes class or function converted to
9. Core concepts Core concepts JSX Components Props State Lifecycle hook methods
10. JSX: Syntactic sugar JSX: Syntactic sugar <MyButton color="blue" shadowSize={2}> Click Me </MyButton> React.createElement( MyButton, { color: 'blue', shadowSize: 2 }, 'Click Me' ) Becomes https://facebook.github.io/jsx/
11. Components Components Stateless (function with only the render method) Stateful (class with the lot: constructor, lifecycle methods, state) Props Passed from parent to child via attributes Read only (they break if you try to change) State Part of the class Immutable, not changed but regenerated data down, actions up
12. ...Components ...Components Composable Should be as small as needed (SRP) Components should not depend on their parents for their internal behaviour, other than receiving props All React components must act like pure functions with respect to their props.
13. State State Do not modify state directly use setState() Data Flows down, pass down as prop only if needed State Updates are Merged Shallow rendering when setState is called
14. Lifecycle hooks Lifecycle hooks Mounting componentWillMount() render() componentDidMount() Updating componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() Unmounting componentWillUnmount() https://reactjs.org/docs/react-component.html#the-component-lifecycle https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9
15. Code Code my take on the TicTacToe tutorial: weather app: http://localhost:3000/ http://localhost:8080/webpack-dev-server/
16. Next steps Next steps Install the create-react-app and run it Use Typescript with React apps: Understand Redux basics https://github.com/facebook/create-react-app https://reactjs.org/docs/static-type-checking.html#typescript https://egghead.io/courses/getting-started-with-redux
17. Further resources Further resources React TicTacToe tutorial: Udemy course by Stephen Grider: https://reactjs.org/docs https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison- c5c52d620176 https://reactjs.org/tutorial/tutorial.html https://www.udemy.com/react-redux/learn/v4/overview http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/