React: Difference between revisions
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 20: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
Three ways to declare variables are
- const
- var
- 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`;