Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Essential JavaScript for working with React

Essential JavaScript for working with React

It's commonly said that React is "just JavaScript". This means that for those with a solid knowledge of JavaScript, understanding React should be easy.

This talk covers things you absolutely have to know about JavaScript in order to work with React.

Carlos Souza

July 11, 2018
Tweet

More Decks by Carlos Souza

Other Decks in Technology

Transcript

  1. Who is this talk for ? • Beginner JavaScript developers

    • Tech-leads, managers and recruiters
  2. 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
  3. 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
  4. #2 - The class syntax class Message { } sayHello()

    { ...
 } let message = new Message() Defining a class Creating an object message.sayHello() Calling methods on the object
  5. #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
  6. #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
  7. #5 - this (1/2) class HelloMessage extends React.Component { }

    ...
 
 someHandler() {
 this.setState(...)
 
 }
 this refers to the "enclosing object" the object which someHandler() belongs to
  8. #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
  9. 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
  10. #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" =>
  11. #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
  12. #8 - npm (node package manager) • manages packages (aka

    libraries), like React! • helps with development and deployment $ npm install react $ npm start $ npm test
  13. 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 ( } } );
  14. #9 - imports (1/2) export default HelloMessage; File: hello.js The

    Component class HelloMessage extends React.Component { render() { return ( ); ... import React from 'react'; } }
  15. #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
  16. #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, 
 uglifies, minifies, etc.
  17. 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