Essential JavaScript for working with React

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

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

twitter.com/bphogan/status/1016724526267293697

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

#1 - Browser is the runtime Here!

class HelloMessage extends React.Component { render() { return ( <div>
Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, mountNode ); the class   syntax inheritance this keyword

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

#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

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

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

#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

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

#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

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

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

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

ReactDOM.render( <HelloMessage name="Taylor" />, mountNode ); index.js hello.js the component
the renderer <div> Hello {this.props.name} </div> class HelloMessage extends React.Component { render() { return ( } } );

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

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

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

#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... <body> <script src="your-app-min.js"></script> </body> Resolves imports, transpiles code,   ugliﬁes, miniﬁes, etc.

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

Essential JavaScript for working with React

Essential JavaScript for working with React

Carlos Souza

More Decks by Carlos Souza

Other Decks in Technology

Featured

Transcript

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

Who is this talk for ? • Beginner JavaScript developers

twitter.com/bphogan/status/1016724526267293697

1. runtime 2. class 3. functions AFCC 4. inheritance 5.

#1 - Browser is the runtime Here!

class HelloMessage extends React.Component { render() { return ( <div>

#2 - The class syntax class Message { } sayHello()

#3 - functions as first class citizens Can be passed

#4 - inheritance class HelloMessage extends React.Component { } ...

#5 - this (1/2) class HelloMessage extends React.Component { }

#5 - this (2/2) class Timer extends React.Component { tick()

1. runtime 2. class 3. functions AFCC 4. inheritance 5.

#6 - The constructor method (1/3) class Message { }

#6 - The constructor method (2/3) class Timer extends React.Component

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

#7 - buildtime runtime runs for the user buildtime runs

#8 - npm (node package manager) • manages packages (aka

ReactDOM.render( <HelloMessage name="Taylor" />, mountNode ); index.js hello.js the component

#9 - imports (1/2) export default HelloMessage; File: hello.js The

#9 - imports (2/2) File: index.js import React from 'react';

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

#10 - the build process File: your-app-min.js File: hello.js File:

1. runtime 2. class 3. functions AFCC 4. inheritance 5.

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