Slide 1

Slide 1 text

for working with React JavaScript Essential Carlos Souza [email protected] @caike

Slide 2

Slide 2 text

Who is this talk for ? • Beginner JavaScript developers • Tech-leads, managers and recruiters

Slide 3

Slide 3 text

twitter.com/bphogan/status/1016724526267293697

Slide 4

Slide 4 text

1. runtime 2. class 3. functions AFCC 4. inheritance 5. this 10 things about the JS language and ecosystem 6. constructor 7. buildtime 8. npm 9. imports 10. build process

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

#1 - Browser is the runtime Here!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

class HelloMessage extends React.Component { render() { return (
Hello {this.props.name}
); } } ReactDOM.render( , mountNode ); the class 
 syntax inheritance this keyword

Slide 9

Slide 9 text

#2 - The class syntax class Message { } sayHello() { ...
 } let message = new Message() Defining a class Creating an object message.sayHello() Calling methods on the object

Slide 10

Slide 10 text

#3 - functions as first class citizens Can be passed as arguments someMethod( message.sayHello ); Can be stored in variables let sayHello = message.sayHello; a callback function

Slide 11

Slide 11 text

#4 - inheritance class HelloMessage extends React.Component { } ...
 
 someHandler() {
 this.setState(...)
 
 }
 inherits property and behavior from parents in the inheritance chain NOT defined in HelloMessage, but inherited from parent

Slide 12

Slide 12 text

#5 - this (1/2) class HelloMessage extends React.Component { } ...
 
 someHandler() {
 this.setState(...)
 
 }
 this refers to the "enclosing object" the object which someHandler() belongs to

Slide 13

Slide 13 text

#5 - this (2/2) class Timer extends React.Component { tick() { ... } componentDidMount() { this.interval = setInterval(() => this.tick(), 1000); } ... } arrow functions keep the value of this to
 the context of its enclosing function the object which componentDidMount() belongs to a callback function

Slide 14

Slide 14 text

1. runtime 2. class 3. functions AFCC 4. inheritance 5. this 10 things about the JS language and ecosystem 6. constructor 7. buildtime 8. npm 9. imports 10. build process

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

#6 - The constructor method (1/3) class Message { } let message = new Message() Defining a constructor Constructor called when object is created constructor() { console.log("Hello");
 } "Hello" =>

Slide 17

Slide 17 text

#6 - The constructor method (2/3) class Timer extends React.Component { constructor(props) { super(props); this.state = { seconds: 0 }; } tick() { this.setState(prevState => ({ seconds: prevState.seconds + 1 })); } ... } calling constructor from parent class

Slide 18

Slide 18 text

#6 - The constructor method (3/3) always call super() when overriding constructor()

Slide 19

Slide 19 text

#7 - buildtime runtime runs for the user buildtime runs for the developer

Slide 20

Slide 20 text

#8 - npm (node package manager) • manages packages (aka libraries), like React! • helps with development and deployment $ npm install react $ npm start $ npm test

Slide 21

Slide 21 text

ReactDOM.render( , mountNode ); index.js hello.js the component the renderer
Hello {this.props.name}
class HelloMessage extends React.Component { render() { return ( } } );

Slide 22

Slide 22 text

#9 - imports (1/2) export default HelloMessage; File: hello.js The Component class HelloMessage extends React.Component { render() { return ( ); ... import React from 'react'; } }

Slide 23

Slide 23 text

#9 - imports (2/2) File: index.js import React from 'react'; import ReactDOM from 'react-dom'; import HelloMessage from './Hello'; ReactDOM.render( , mountNode ); The Renderer npm modules local module

Slide 24

Slide 24 text

Code we write here (buildtime)... ...does NOT run here (runtime) unchanged.

Slide 25

Slide 25 text

#10 - the build process File: your-app-min.js File: hello.js File: index.js File: dashboard/index.js File: dashboard/avatar.js File: dashboard/form.js etc... Resolves imports, transpiles code, 
 uglifies, minifies, etc.

Slide 26

Slide 26 text

1. runtime 2. class 3. functions AFCC 4. inheritance 5. this 10 things about the JS language and ecosystem 6. constructor 7. buildtime 8. npm 9. imports 10. build process

Slide 27

Slide 27 text

for working with React JavaScript Essential Carlos Souza [email protected] @caike Thank you!