React for Data Visualization
Student Login

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.

Previous:
Why React and D3 (0:22)
Next:
What you'll build (2:30)
Created bySwizecwith ❤️