React: Difference between revisions

From Han Wiki
Jump to navigation Jump to search
kangax
javascript
Line 1: Line 1:
= Installation =
<source lang="console">
<source lang="console">
// initialize a nodejs project (creates package.json)
// initialize a nodejs project (creates package.json)
Line 10: Line 12:
$ yarn remove packagename
$ yarn remove packagename
</source>
</source>
= JavaScript =


[http://kangax.github.io/compat-table/esnext/ Kangax compatibility table]
[http://kangax.github.io/compat-table/esnext/ Kangax compatibility table]
Three ways to declare variables are
# const
# var
# let
Template string
<source lang="js">
console.log(`${lastName}, ${firstName} ${middleName}`);
document.body.innerHTML = `
<section>
  <header>
      <h1>The React Blog</h1>
  </header>
  <article>
      <h2>${article.title}</h2>
      ${article.body}
  </article>
  <footer>
      <p>copyright ${new Date().getYear()} | The React Blog</p>
  </footer>
</section>
`;
</source>
Function declaration vs function expression: declarations are hoisted
<source lang="js">
const f = function() {
};
</source>
Arrow functions
<source lang="js">
const lordify = function(firstName) {
  return `${firstName} of Canterbury`;
};
// equals
const lordify = firstName => `${firstName} of Canterbury`;
</source>

Revision as of 19:23, 30 September 2019

Installation

// initialize a nodejs project (creates package.json)
$ npm init -y

// package manager 
$ npm install yarn

$ yarn install packagename

$ yarn remove packagename

JavaScript

Kangax compatibility table


Three ways to declare variables are

  1. const
  2. var
  3. let


Template string

console.log(`${lastName}, ${firstName} ${middleName}`);

document.body.innerHTML = `
<section>
  <header>
      <h1>The React Blog</h1>
  </header>
  <article>
      <h2>${article.title}</h2>
      ${article.body}
  </article>
  <footer>
      <p>copyright ${new Date().getYear()} | The React Blog</p>
  </footer>
</section>
`;


Function declaration vs function expression: declarations are hoisted

const f = function() {
};

Arrow functions

const lordify = function(firstName) {
  return `${firstName} of Canterbury`;
};

// equals

const lordify = firstName => `${firstName} of Canterbury`;