Meet React JS

Small presentation that tries to introduce react js in a pratical and structured way. You can see the code in the examples on: https://github.com/xavierbarbosa/reactjs-presentation

Transcript

1. Meet ReactJS Madeira Tech Meetup #4
2. Hi, my name is Xavier.
5. So what about it? • It’s a javascript library for building web interfaces • Component based. • You then combine these components to create a complete ui.
6. Simple react component
9. React <3 JSX • It’s the recommended and most common way to describe your ui. • Looks like a template language. • Babel is used to compile JSX down to React.createElement() calls. • After compilation, JSX expressions become regular JavaScript objects. • This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions
10. Babel for ECMAScript 2015 / ES6 • Its javascript compiler. • You write modern javascript and its compiled down to a version compatible with most browsers. • In this presentation we will be seeing some ECMAScript 2015 which is an ECMAScript standard that was considered official in June 2015. • Its browser support is well under development. • Don’t worry we will quickly go over the features you need to know.
11. ES2015 • Arrow functions ◦ a => a * a (var multiply = function (a) { return a *a; }) ◦ (a, b) => { const sum = a + b; return sum; } • Template literals ◦ `string text ${expression} string text` (these ` are back ticks) • Block-scoped binding constructs, let is the new var and const is used to define constants. • Classes • Modules • Learn more on: http://babeljs.io/learn-es2015/
12. Classes
13. Modules
14. So how all this comes together?
15. Hey…. You sure this talk is about react?
16. Yes! Back to react with Create React App Lets us jump start into react development by configuring everything for us: 1. npm install -g create-react-app 2. create-react-app my-app 3. cd my-app 4. npm start
17. Component classes • Accept input via the property props • Return a react elements • Can be used on other components • Extracting logic into smaller components is encouraged • PropTypes can be defined for type checking which data is accepted. • PropTypes are read only
18. Components state • State is similar to props but it’s private and only controller by the component. • Components can only manage and know their own state. • Used to define implementation details of that component. • State should not be altered directly. Use this.setState setter.
19. Dom diffing and component life cycle • Each time the state or the parent props changes it will cause the component to re-render. • When this changes occur react uses dom diffing to decide which part of the dom is to be modified. • You can control some aspects of this during the component life cycle.
20. More on component life cycle • Mounting: ◦ componentWillMount() ◦ componentDidMount() • Updating ◦ componentWillReceiveProps() ◦ shouldComponentUpdate() ◦ componentWillUpdate() ◦ componentDidUpdate() • Unmounting ◦ componentWillUnmount()
21. Demo time !!!
22. Conclusion
23. Questions
24. References • https://facebook.github.io/react/ • https://babeljs.io/ • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference • https://github.com/facebookincubator/create-react-app