Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Explain question mark (?) used in ES6/JSX code

I'm using a library called react-forms in my React app. To better understand how it works I've been reading the code, but a convention keeps popping up which confuses me. Here's the ES6/JSX code:

'use strict';

var React = require('react/addons');
var cx = React.addons.classSet;

var Checkbox = React.createClass({

  propTypes: {
/...code.../
  },

  render(): ?ReactElement {
    /...code.../
  },

  onChange(e: {target: {checked: boolean}}) {
    /...code.../
  }
});

module.exports = Checkbox;

Note render(): ?ReactElement {}. That's the part which is confusing me. Could someone offer guidance on where to learn more about this syntax? I've hit a lot of dead ends via Google.

like image 333
Miles Avatar asked Jan 31 '15 19:01

Miles


People also ask

What does question mark mean in JSX?

“Question mark” or “conditional” operator in JavaScript is a ternary operator that has three operands. The expression consists of three operands: the condition, value if true and value if false. The evaluation of the condition should result in either true/false or a boolean value.

Why do we use question mark in JavaScript?

The question mark in JavaScript is commonly used as conditional operator -- called ternary operator when used with a colon (:) and a question mark (?) -- to assign a variable name conditionally.

What is JSX and ES6?

JSX stands for “JavaScript XML,” and it is a syntax extension to JavaScript based in ES6, the newest “version” of JavaScript. JSX allows you to write HTML in React by converting HTML into React components, helping you to more easily create user interfaces for your web applications.

What does question mark mean in React props?

The question mark after the variable is called Optional chaining (?.) in JavaScript. The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null.


1 Answers

If you go to the package.json of react-forms, and look at the browserify section:

  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "es6": true,
          "target": "es5",
          "stripTypes": true
        }
      ]
    ]
  },

stripTypes is enabled. It strips out things like ?ReactElement, which means it maybe returns a ReactElement (and otherwise null or undefined)

The {target: {checked: boolean}} means e has a target property, which has a checked property which is a boolean.

These are hints for the Flow type checker. You'll also see @flow in a comment at the top of all files that should be type checked. A type checker is a tool – like unit tests – that makes you more confident of your program's correctness, in a way that doesn't require manual testing. In many cases those little type annotations replace unit tests we'd otherwise write.

If you use flow in your project and try to do something like:

<Checkbox />

It would give you an type error because value and onChange are required props. Unlike the runtime props check, this happens without actually running the code (often as soon as you save the file).

like image 77
Brigand Avatar answered Sep 17 '22 15:09

Brigand