Buzzword soup explained

We're going to use some buzzwords in this course. Hell, we've used some already. Most will get a thorough explanation further on, but let me give you a quick rundown.

Babel, a JavaScript transpiler that makes your code work on all browsers.
ECMAScript2015,16,17,18, official names for JavaScript as new features come out every summer
ES5, any JavaScript features that existed before June 2015
ES6 or ES6+, a common name for JavaScript as it exists past June 2015
fat arrows, a new way to define functions in ES6 (=>)
Git, a version control system. It's pretty popular, you probably know it 😃
H1B, a popular type of work visa in the United States
JSX, a language/syntax that lets you use <a href="/example"> as a native part of JavaScript
Mustache, a popular way to write HTML templates for JavaScript code. Uses {{ ... }} syntax.
npm, most popular package manager for JavaScript libraries
props, component properties set when rendering
state, a local dictionary of values available in most components
functional components, React components expressed as pure functions that take props and return markup
Webpack, a module packager for JavaScript. Makes it more convenient to organize code into multiple files. Provides cool plugins.

JSX

Our components are going to use JSX, a JavaScript syntax extension that lets us treat XML-like data as normal code. You can use React without JSX, but JSX makes React’s full power easier to use.

The gist of JSX is that we can use any XML-like string just like it was part of JavaScript. No Mustache or messy string concatenation necessary. Your functions can return HTML, SVG, or XML.

For instance, code that renders one of our first examples – a color swatch – looks like this:

ReactDOM.render(<Colors width="400" />, document.getElementById("svg"))

Which compiles to:

ReactDOM.render(
  React.createElement(Colors, { width: "400" }),
  document.querySelectorAll("svg")[0]
)

HTML code translates to React.createElement calls with attributes translated into a property dictionary. The beauty of this approach is two-pronged: you can use React components as if they were HTML tags, and HTML attributes can be anything.

You’ll see that anything from a simple value to a function or an object works equally well.