for working with React
JavaScript
Essential
Carlos Souza
carlos@csouza.me
@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
#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
carlos@csouza.me
@caike
Thank you!