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.
“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.
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.
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.
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With