Reactとの連携３

hello_react.jsx

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Calc = props => {
  let n = props.number;
  let total = 0;
  for (let i = 0;i <= n;i++){
    total += i;
  }
  return (
    <div>ゼロから{props.number}までの合計は「{total}」です。</div>
  );
}

Calc.defaultProps = {
  number: 0
}

Calc.propTypes = {
  number: PropTypes.integer
}

document.addEventListener('DOMContentLoaded', () => {
  let el = (<div>
    <Calc number="100" />
    <Calc number="200" />
    <Calc number="300" />
    </div>);
    let dom = document.querySelector('#hello');
    ReactDOM.render(el, dom);
})

for文の基本書式
for 文では指定した回数だけ繰り返し処理を行うことができます。

for (初期化式; 条件式; 変化式){
実行する文1;
実行する文2;
...
}

代入演算子

名称	略記演算子	意味
代入	x = y	x = y
加算代入	x += y	x = x + y
減算代入	x -= y	x = x - y
乗算代入	x *= y	x = x * y
除算代入	x /= y	x = x / y
剰余代入	x %= y	x = x % y
べき乗代入	x **= y	x = x ** y
左シフト代入	x <<= y	x = x << y
右シフト代入	x >>= y	x = x >> y
符号なし右シフト代入	x >>>= y	x = x >>> y
ビット論理積 (AND) 代入	x &= y	x = x & y
ビット排他的論理和 (XOR) 代入	x ^= y	x = x ^ y
ビット論理和 (OR) 代入	x I= y	x = x I y
論理積代入	x &&= y	x && (x = y)
論理和代入	x II= y	x II (x = y)
Null 合体代入	x ??= y	x ?? (x = y)

比較演算子

演算子	説明	true を返す例
等価 (==)	被演算子が等しい場合にtrueを返します。	3 == var1,"3" == var1,3 == '3'
不等価 (!=)	被演算子が等しくない場合にtrueを返します。	var1 != 4,var2 != "3"
厳密等価 (===)	被演算子が等しく、かつ同じ型である場合にtrueを返します。Object.is や JavsScript での等価も参照してください。	3 === var1
厳密不等価 (!==) 被演算子が等しくなく、かつ/または同じ型でない場合にtrueを返します。	var1 !== "3",3 !== '3'
より大きい (>)	左の被演算子が右の被演算子よりも大きい場合にtrueを返します。	var2 > var1,"12" > 2
以上 (>=)	左の被演算子が右の被演算子以上である場合にtrueを返します。	var2 >= var1,var1 >= 3
より小さい (<)	左の被演算子が右の被演算子よりも小さい場合にtrueを返します。	var1 < var2,"2" < 12
以下 (<=)	左の被演算子が右の被演算子以下である場合にtrueを返します。	var1 <= var2,var2 <= 5

MDN web Docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators

インクリメント演算子	++
デクリメント演算子	--

インクリメント演算子は、1を足し、デクリメント演算子は、1を引く、という機能を持ちます。

i++はiに１を加えます