{
  "block": 106143586,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "7113.427117 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-18T00:22:03",
  "trx_id": "7900d76e8906420396e7bd8601db45d2f2501f93",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 105976284,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "4401.216712 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-12T04:19:06",
  "trx_id": "9f886fb1a9c6f5d5901367fe261df71c6794f5f3",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 105511233,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "7125.942873 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-04-25T23:42:45",
  "trx_id": "6eaaea1d84a6ca347fd7ea70ddfd7ab56310494b",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 102852185,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "4442.763531 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-01-23T08:06:54",
  "trx_id": "5b113536bb4c5a338dff07f17168d064eed47b50",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 91298587,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "4606.982728 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2024-12-17T03:25:42",
  "trx_id": "e730e2f210979a9714d4ec51538bdd613aba9d81",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 79852787,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "4776.116260 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-11-13T19:08:36",
  "trx_id": "ec66749a09b8e91571465a53aab697fbdbfb6add",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 78347988,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "7713.395046 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-09-21T21:57:54",
  "trx_id": "c6192d493511723d35e33c59999854ce9b567ac3",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 69113306,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "7935.076484 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-11-03T11:44:30",
  "trx_id": "692c19195ba31197f003f4928ecca4886f644077",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 60809471,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "8155.609715 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-01-17T11:00:21",
  "trx_id": "611c326a201c4967a2111ba9d2a0880a16811484",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 54607856,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "8339.378373 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2021-06-14T00:55:27",
  "trx_id": "10283f5e05cbf491ded4ca2bb39c8fdc9f9566e2",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 49355305,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "8526.800347 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-11T11:13:51",
  "trx_id": "672d81959e480a9fe04b85d8bdcd0406cf25464c",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 49206868,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "1912.543513 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-06T04:51:09",
  "trx_id": "af96b1b89ea362f4e7a94c659e5910a85c0421cb",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 49190401,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "8533.008201 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-05T14:52:03",
  "trx_id": "b63aee49a5a25ed7beed8d4c89193d5dd0fbb31b",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 48258064,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "1920.017158 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-11-02T15:51:45",
  "trx_id": "b21af567f56ebdd9fd712cbbd5d7446c8e1c3d8c",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 43217116,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "8735.813560 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-09T05:48:30",
  "trx_id": "f12f2e66503fa91be781aac43088a4529a7ef5af",
  "trx_in_block": 21,
  "virtual_op": 0
}

{
  "block": 43193235,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "1953.311140 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-08T09:25:39",
  "trx_id": "a72227d12ddee0d1bbb07c63a31a76dc00452233",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 42562618,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "8748.790979 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-04-15T21:39:54",
  "trx_id": "1e9d1b21e40fbf3f68c688d8d1d2bc604ed5461a",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 36444852,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @fluidbyte! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@fluidbyte/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@fluidbyte) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=fluidbyte)_</sub>\n\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "fluidbyte",
      "parent_permlink": "a-no-bs-dive-into-reactjs",
      "permlink": "steemitboard-notify-fluidbyte-20190915t140547000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-09-15T14:05:48",
  "trx_id": "aeb41cd801f85e561e673add36a84963450a698e",
  "trx_in_block": 12,
  "virtual_op": 0
}

{
  "block": 32845498,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "8944.413784 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-05-12T14:54:45",
  "trx_id": "fd4ecd5a4b15150b6b4aa6c4f808899989cc73d7",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 22489853,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "9143.966219 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-05-16T20:17:36",
  "trx_id": "2fadc31509b28580a3a769d4b0f3d8c9fe8a5a2a",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 20159883,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "voter": "ddeveloperr",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-24T20:33:09",
  "trx_id": "0b5a32704a4d397436a925398d6cfa86d85b7f7a",
  "trx_in_block": 30,
  "virtual_op": 0
}

{
  "block": 20159648,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "ddeveloperr",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-24T20:21:24",
  "trx_id": "367fbdf31708f546b64a3b5accc4ffe9b272e271",
  "trx_in_block": 14,
  "virtual_op": 0
}

{
  "block": 20092440,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "29625.891220 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-02-22T12:20:36",
  "trx_id": "afdf84453cd5d6587fc222c237cffae91b4463be",
  "trx_in_block": 7,
  "virtual_op": 0
}

{
  "block": 19365214,
  "op": [
    "comment",
    {
      "author": "attette",
      "body": "It's only for IOS and Mac, not android..anyway, thanks for tip",
      "json_metadata": "{\"tags\":[\"steemit-ideas\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "fluidbyte",
      "parent_permlink": "re-bacchist-save-draft-posts-20170915t142041730z",
      "permlink": "re-fluidbyte-re-bacchist-save-draft-posts-20180128t053713299z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-28T05:37:15",
  "trx_id": "961f0986ff841a1c6a479ea079c2b832171d0430",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 18180516,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "superoo7",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T01:38:42",
  "trx_id": "35ef820ac034a24d345684973e3e0ba5cb307f14",
  "trx_in_block": 20,
  "virtual_op": 0
}

{
  "block": 17861361,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "re-bacchist-save-draft-posts-20170915t142041730z",
      "voter": "rossharman",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-06T23:34:57",
  "trx_id": "0b0b27cc489a2bec4b4f533b96eb8d9f58296b2b",
  "trx_in_block": 19,
  "virtual_op": 0
}

{
  "block": 17531914,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "arn-big-beard",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-11-25T12:54:45",
  "trx_id": "534e5143f03677226af121204a9a79724885cbfa",
  "trx_in_block": 22,
  "virtual_op": 0
}

{
  "block": 16298228,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "fluidbyte",
      "delegator": "steem",
      "vesting_shares": "29830.767311 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-10-13T16:02:09",
  "trx_id": "0195970043847f8c1311548074f57064c5a6ecbb",
  "trx_in_block": 7,
  "virtual_op": 0
}

{
  "block": 16194685,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "voter": "atherz",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-10-10T01:40:48",
  "trx_id": "83315b714414ac7dcfa13e74278a8784536919a2",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 15835947,
  "op": [
    "author_reward",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "sbd_payout": "0.299 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "570.387049 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-27T14:32:03",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 9
}

{
  "block": 15835834,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "voter": "winstonalden",
      "weight": 2500
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-27T14:26:21",
  "trx_id": "3224b8d66cfc5ebafda7d8cd68dfbda47e8351a8",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 15757209,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "jfuenmayor96",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-24T20:53:54",
  "trx_id": "519c4f8a6439c0fbd5755aad89450cc99ce33291",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 15697967,
  "op": [
    "comment",
    {
      "author": "doitvoluntarily",
      "body": "welcome to steemit!:)",
      "json_metadata": "{\"tags\":[\"hello\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "fluidbyte",
      "parent_permlink": "hooray-steemit",
      "permlink": "re-fluidbyte-hooray-steemit-20170922t193124534z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-22T19:31:24",
  "trx_id": "293909a61220a982208a56cbb89be8c809e66599",
  "trx_in_block": 19,
  "virtual_op": 0
}

{
  "block": 15697959,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "doitvoluntarily",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-22T19:31:00",
  "trx_id": "7a9a96e51c509e4e66047ab7ea034df2e238a1be",
  "trx_in_block": 12,
  "virtual_op": 0
}

{
  "block": 15690590,
  "op": [
    "author_reward",
    {
      "author": "fluidbyte",
      "permlink": "re-matthewdavid-i-m-giving-a-talk-about-steemit-this-evening-20170915t132238425z",
      "sbd_payout": "0.018 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "37.074641 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-22T13:22:36",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 4
}

{
  "block": 15690467,
  "op": [
    "author_reward",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "sbd_payout": "0.022 SBD",
      "steem_payout": "0.000 STEEM",
      "vesting_payout": "43.253757 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-22T13:16:27",
  "trx_id": "0000000000000000000000000000000000000000",
  "trx_in_block": 4294967295,
  "virtual_op": 10
}

{
  "block": 15689229,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "petarjs",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-22T12:14:30",
  "trx_id": "ae75d3ba78db5c654709483f1347d63c6fce8688",
  "trx_in_block": 22,
  "virtual_op": 0
}

{
  "block": 15664311,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "harps116",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-21T15:28:36",
  "trx_id": "9dff5b43dd85339ee90ae10f5f054db8f1f9fa51",
  "trx_in_block": 20,
  "virtual_op": 0
}

{
  "block": 15660998,
  "op": [
    "vote",
    {
      "author": "steemitboard",
      "permlink": "steemitboard-notify-fluidbyte-20170921t052835000z",
      "voter": "fluidbyte",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-21T12:42:54",
  "trx_id": "f41b0a67bef5ac6a1827b48d4732ffe438cc0d2f",
  "trx_in_block": 25,
  "virtual_op": 0
}

{
  "block": 15652314,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "locikll",
      "weight": 10
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-21T05:28:42",
  "trx_id": "a8e3f0528293b1f174c11c327efadc2193010023",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 15652312,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "steemitboard",
      "weight": 100
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-21T05:28:36",
  "trx_id": "4c375e469d8aeffc8c612e67cee9cd7557ebe420",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 15652311,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @fluidbyte! You have completed some achievement on Steemit and have been rewarded with new badge(s) :\n\n[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/voted.png)](http://steemitboard.com/@fluidbyte) Award for the number of upvotes received\n\nClick on any badge to view your own Board of Honor on SteemitBoard.\nFor more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)\n\nIf you no longer want to receive notifications, reply to this comment with the word `STOP`\n\n> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notifications.png\"]}",
      "parent_author": "fluidbyte",
      "parent_permlink": "a-no-bs-dive-into-reactjs",
      "permlink": "steemitboard-notify-fluidbyte-20170921t052835000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-21T05:28:33",
  "trx_id": "1489a912aeca15fbf13695477cd9e2cb628dcc8c",
  "trx_in_block": 24,
  "virtual_op": 0
}

{
  "block": 15649169,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "kkomaz",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-21T02:51:21",
  "trx_id": "7a360eebdff4e41a2aa54884f09b3380a62bf88f",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 15643311,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "tage",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T21:58:15",
  "trx_id": "72f0f646ef99d0d0b3243de1c740df95edd393f9",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 15643269,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "daartfulvlogger",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T21:56:06",
  "trx_id": "2ac47a21e36b6ea8330928b5cfe6ef2c7d8b9ad1",
  "trx_in_block": 22,
  "virtual_op": 0
}

{
  "block": 15641239,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "garudi",
      "weight": 2000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T20:14:33",
  "trx_id": "bab2491e45b7dd40cc4ab5527ad1b706be2c1cdb",
  "trx_in_block": 22,
  "virtual_op": 0
}

{
  "block": 15641237,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "eturnerx",
      "weight": 2000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T20:14:27",
  "trx_id": "c678b9c65a35fd9eed69fc5cc4b351e1a59babdf",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 15638688,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "matthewdavid",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T18:06:54",
  "trx_id": "843128365898ae5358100d693c1e659b9b7e2590",
  "trx_in_block": 31,
  "virtual_op": 0
}

{
  "block": 15636060,
  "op": [
    "comment",
    {
      "author": "fluidbyte",
      "body": "![react.js-logo.png](https://steemitimages.com/DQmRjArytrorSKNahEjyXyh683teXv3E1qCoz8jjzG38QVo/react.js-logo.png)\n\nMany of the tutorials I see on [React](https://facebook.github.io/react/) try to (web)pack in a lot. Yes; there is a lot of tooling that _can_ go around React, however, I didn't fully grasp how amazing React is until I was shown a very simple example of the way the actual, functioning code is written. This tutorial focuses on percisely that; just jumping in and writing some code.\n\n## The Setup - [CodePen](https://codepen.io)\n\n[CodePen](https://codepen.io) is one of the great tools out there for testing out code. It offers a lot of options for defining how your code will run; the biggest of which is being able to add resources (libraries) very easily.\n\n* On a new \"pen\", go to `Settings` and then `JavaScript`.\n* For `JavaScript Preprocessor` select `Babel` - this will allow us to write using ES6. React can be written in older specs, however, most tutorials and code snippets you find will be using ES6.\n* In the `Add External JavaScript` section add the following:\n  * `//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js` - The React Library\n* Click `Save & Close`\n\nThe pen is now setup to allow us to write in ES6, utilizing the React framework.\n\n## Writing Some Code\n\n> Code-first, explain later.\n\nThis seems to be a great way to learn, so let's jump in! \n\n### Give Your App a Home\n\nThis first one is easy; in the `HTML` editor drop this:\n\n```html\n<div id=\"app\"></app>\n```\n\nWe need a place for our app to load. We'll use this as that place, as you'll see in the next section. MOVING ON!\n\n### Render Something\n\nIn the `JavaScript` editor, enter the following:\n\n```javascript\nclass MyComponent extends React.Component {\n    render() {\n      return (\n        <h1>\n            Hello React!\n        </h1>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/GMooWW?editors=0010)**\n\nThe above is really the leanest example I could think of for demonstrating rendering content through React. Reading through the code we just did the following:\n\n1. Created a new class called `MyComponent` that extends React's `Component` class.\n2. We defined a `render` method for that class so React knows what to render.\n3. We added something to actually render to the `render` method (via the `return`).\n4. We told React to render `<MyComponent />` to our DOM at `#app` that we created in the first section.\n\nCongratulations! That's how to build a component. Let's make more!\n\n### Adding Components, Using Properties\n\nLet's add another component, it's so much fun!\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            <ListItem content=\"Build a component\" />\n            <ListItem content=\"Add more components\" />\n          </ul>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/veGbNg?editors=0010)**\n\nAlright, so the above may seem a bit contrived, however, it very clearly demonstrates how components work in a broader sense, to allow us to break things up into manageable, reusable pieces.\n\nSo we've done the following:\n\n1. Created a new component `ListItem` which simply renders the text passed via the `content` property (`this.props.content`)\n2. Added several instances of the `ListItem` component into the `MyComponent`'s `render` method inside a `<ul>`.\n3. Wrapped everything in `MyComponent`'s `render` with a `<div>`. This is a React-thing; everything _must_ have a parent.\n\n### Using State\n\nThe components above are great, but have no way of working with data. This is where `state` comes in. Below is and example, expanding on what has been done previously:\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n  \n    constructor (props, ctx) {\n      super(props)\n      \n      this.state = {\n        items: [\n          'Build a component',\n          'Add more components',\n          'Add some state'\n        ]\n      }\n    }\n  \n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            {this.state.items.map((item) => {\n              return (\n                <ListItem content={item} />\n              )\n            })}\n          </ul>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/JrXxOK?editors=0010)**\n\nSo there's a bit more code here. Let's dive into it. All of the changes were made in the `MyComponent` class:\n\n1. We added a `constructor` which allows you to perform actions when a Class is instantiated. In this case we're doing 2 things:\n    1.  We call `super(props, ctx)` which is a fancy way of React initializing the class. Not to worry, this is just a standard\n    2.  We initialized state by creating a `this.state` object which contains an array of `items`\n2. Next we made our `ListItems` load from state by simply `map`'ing over them and returning new `ListItem` components with the content set to the item in the current iteration.\n\nSo now when `MyComponent` renders it loads all of its content from the state. Nice!\n\n## Using Events to Change State\n\nState is cool, but fairly useless without some interaction, so let's add that with events!\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n  \n    constructor (props, ctx) {\n      super(props)\n      \n      this.state = {\n        items: [\n          'Build a component',\n          'Add more components',\n          'Add some state'\n        ],\n        newItem: ''\n      }\n      \n      // Have to do this because Codepen doesn't support\n      // stage-3 es6, normally wouldn't need this...\n      this.onChangeNewItem = this.onChangeNewItem.bind(this)\n      this.onSubmitNewItem = this.onSubmitNewItem.bind(this)\n    }\n  \n    onChangeNewItem (e) {\n      this.setState({\n        newItem: e.target.value\n      })\n    }\n  \n    onSubmitNewItem (e) {\n      const newItems = this.state.items.concat(this.state.newItem)\n      this.setState({\n        items: newItems,\n        newItem: ''\n      })\n      e.preventDefault()\n    }\n  \n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            {this.state.items.map((item) => {\n              return (\n                <ListItem content={item} />\n              )\n            })}\n          </ul>\n          <form onSubmit={this.onSubmitNewItem}>\n            <input \n              type=\"text\"\n              onChange={this.onChangeNewItem}\n              value={this.state.newItem}\n            />\n            <button type=\"submit\">Submit</button>\n          </form>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/PJNVxB?editors=0010)**\n\nAgain, we're expanding on what we already have, so looking at what was added:\n\n1. In the `constructor` we modified `this.state` to have a property `newItem`, this will store new items when we want to add something to the list.\n2. This is sort of a special case (because CodePen doesn't support stage-3 es6) but we bind 2 new methods in the constructor.\n3. We create a `onChangeNewItem` event. This will be bound to a form element. Whenever the value of that element changes we need to update our state using `setState` so we know what the current value of that field is.\n4. We create a `onSubmitNewItem` which will do several things:\n    1. It will add (`concat`) the value of `newItem` into a new array (we don't mutate, folks)\n    2. It will set the state of `items` to the `newItems` array, then set `newItem` to empty (like you would expect when you submit a form)\n    3. We call `e.preventDefault()` to prevent the form from doing its default action (`POST`'ing the whole form)\n5. Next, in the `render` method we simply add a form. The form itself gets a `onSubmit` binding to the `onSubmitNewItem` method.\n6. In the form, the `input` has 2 bindings - we bind the `onChange` to `onChangeNewItem` which updates the `this.state.newItem` value to store that new data, and the `value` gets bound directly to the state for `newItem` so when the state of that item is changed the value reflects the state.\n\nNow, when we enter a new item in the form and submit, the event-bound methods will handle the changes, update state, and our list will grow!\n\n## Conclusion\n\nThis was a very introductory example of using React, however, it demonstrates some of the major concepts of React; rendering, components, props, state and events.\n\nThese are the core concepts on which React builds upon. If/once you feel like this makes some sense you're well on your way to being able to build more complex React applications.\n\nI plan to do a follow up post on setting up an actual development environment and some of the more tooling-related topics which I will post a link to here.\n\nIf you'd like me to go into depth on any of the above, have questions, or would like me to setup some more specific examples let me know!",
      "json_metadata": "{\"tags\":[\"javascript\",\"react\",\"technology\",\"tutorial\",\"reactjs\"],\"image\":[\"https://steemitimages.com/DQmRjArytrorSKNahEjyXyh683teXv3E1qCoz8jjzG38QVo/react.js-logo.png\"],\"links\":[\"https://facebook.github.io/react/\",\"https://codepen.io\",\"https://codepen.io/fluidbyte/pen/GMooWW?editors=0010\",\"https://codepen.io/fluidbyte/pen/veGbNg?editors=0010\",\"https://codepen.io/fluidbyte/pen/JrXxOK?editors=0010\",\"https://codepen.io/fluidbyte/pen/PJNVxB?editors=0010\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "reactjs",
      "permlink": "a-no-bs-dive-into-reactjs",
      "title": "A No-BS Dive Into ReactJS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T15:55:24",
  "trx_id": "1778f06ad262a3e896a34ecaccf0a5f65776ccf7",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 15636026,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "a-no-bs-dive-into-reactjs",
      "voter": "dsantrat",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T15:53:42",
  "trx_id": "7e38901f9fe09acc0f464bdddff9d666807c71ee",
  "trx_in_block": 18,
  "virtual_op": 0
}

{
  "block": 15635783,
  "op": [
    "comment",
    {
      "author": "fluidbyte",
      "body": "![react.js-logo.png](https://steemitimages.com/DQmRjArytrorSKNahEjyXyh683teXv3E1qCoz8jjzG38QVo/react.js-logo.png)\n\nMany of the tutorials I see on [React](https://facebook.github.io/react/) try to (web)pack in a lot. Yes; there is a lot of tooling that _can_ go around React, however, I didn't fully grasp how amazing React is until I was shown a very simple example of the way the actual, functioning code is written. This tutorial focuses on percisely that; just jumping in and writing some code.\n\n## The Setup - [CodePen](https://codepen.io)\n\n[CodePen](https://codepen.io) is one of the great tools out there for testing out code. It offers a lot of options for defining how your code will run; the biggest of which is being able to add resources (libraries) very easily.\n\n* On a new \"pen\", go to `Settings` and then `JavaScript`.\n* For `JavaScript Preprocessor` select `Babel` - this will allow us to write using ES6. React can be written in older specs, however, most tutorials and code snippets you find will be using ES6.\n* In the `Add External JavaScript` section add the following:\n  * `//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js` - The React Library\n* Click `Save & Close`\n\nThe pen is now setup to allow us to write in ES6, utilizing the React framework.\n\n## Writing Some Code\n\n> Code-first, explain later.\n\nThis seems to be a great way to learn, so let's jump in! \n\n### Give Your App a Home\n\nThis first one is easy; in the `HTML` editor drop this:\n\n```html\n<div id=\"app\"></app>\n```\n\nWe need a place for our app to load. We'll use this as that place, as you'll see in the next section. MOVING ON!\n\n### Render Something\n\nIn the `JavaScript` editor, enter the following:\n\n```javascript\nclass MyComponent extends React.Component {\n    render() {\n      return (\n        <h1>\n            Hello React!\n        </h1>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/GMooWW?editors=0010)**\n\nThe above is really the leanest example I could think of for demonstrating rendering content through React. Reading through the code we just did the following:\n\n1. Created a new class called `MyComponent` that extends React's `Component` class.\n2. We defined a `render` method for that class so React knows what to render.\n3. We added something to actually render to the `render` method (via the `return`).\n4. We told React to render `<MyComponent />` to our DOM at `#app` that we created in the first section.\n\nCongratulations! That's how to build a component. Let's make more!\n\n### Adding Components, Using Properties\n\nLet's add another component, it's so much fun!\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            <ListItem content=\"Build a component\" />\n            <ListItem content=\"Add more components\" />\n          </ul>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/veGbNg?editors=0010)**\n\nAlright, so the above may seem a bit contrived, however, it very clearly demonstrates how components work in a broader sense, to allow us to break things up into manageable, reusable pieces.\n\nSo we've done the following:\n\n1. Created a new component `ListItem` which simply renders the text passed via the `content` property (`this.props.content`)\n2. Added several instances of the `ListItem` component into the `MyComponent`'s `render` method inside a `<ul>`.\n3. Wrapped everything in `MyComponent`'s `render` with a `<div>`. This is a React-thing; everything _must_ have a parent.\n\n### Using State\n\nThe components above are great, but have no way of working with data. This is where `state` comes in. Below is and example, expanding on what has been done previously:\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n  \n    constructor (props, ctx) {\n      super(props)\n      \n      this.state = {\n        items: [\n          'Build a component',\n          'Add more components',\n          'Add some state'\n        ]\n      }\n    }\n  \n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            {this.state.items.map((item) => {\n              return (\n                <ListItem content={item} />\n              )\n            })}\n          </ul>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/JrXxOK?editors=0010)**\n\nSo there's a bit more code here. Let's dive into it. All of the changes were made in the `MyComponent` class:\n\n1. We added a `constructor` which allows you to perform actions when a Class is instantiated. In this case we're doing 2 things:\n    1.  We call `super(props, ctx)` which is a fancy way of React initializing the class. Not to worry, this is just a standard\n    2.  We initialized state by creating a `this.state` object which contains an array of `items`\n2. Next we made our `ListItems` load from state by simply `map`'ing over them and returning new `ListItem` components with the content set to the item in the current iteration.\n\nSo now when `MyComponent` renders it loads all of its content from the state. Nice!\n\n## Using Events to Change State\n\nState is cool, but fairly useless without some interaction, so let's add that with events!\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n  \n    constructor (props, ctx) {\n      super(props)\n      \n      this.state = {\n        items: [\n          'Build a component',\n          'Add more components',\n          'Add some state'\n        ],\n        newItem: ''\n      }\n      \n      // Have to do this because Codepen doesn't support\n      // stage-3 es6, normally wouldn't need this...\n      this.onChangeNewItem = this.onChangeNewItem.bind(this)\n      this.onSubmitNewItem = this.onSubmitNewItem.bind(this)\n    }\n  \n    onChangeNewItem (e) {\n      this.setState({\n        newItem: e.target.value\n      })\n    }\n  \n    onSubmitNewItem (e) {\n      const newItems = this.state.items.concat(this.state.newItem)\n      this.setState({\n        items: newItems,\n        newItem: ''\n      })\n      e.preventDefault()\n    }\n  \n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            {this.state.items.map((item) => {\n              return (\n                <ListItem content={item} />\n              )\n            })}\n          </ul>\n          <form onSubmit={this.onSubmitNewItem}>\n            <input \n              type=\"text\"\n              onChange={this.onChangeNewItem}\n              value={this.state.newItem}\n            />\n            <button type=\"submit\">Submit</button>\n          </form>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/PJNVxB?editors=0010)**\n\nAgain, we're expanding on what we already have, so looking at what was added:\n\n1. In the `constructor` we modified `this.state` to have a property `newItem`, this will store new items when we want to add something to the list.\n2. This is sort of a special case (because CodePen doesn't support stage-3 es6) but we bind 2 new methods in the constructor.\n3. We create a `onChangeNewItem` event. This will be bound to a form element. Whenever the value of that element changes we need to update our state using `setState` so we know what the current value of that field is.\n4. We create a `onSubmitNewItem` which will do several things:\n    1. It will add (`concat`) the value of `newItem` into a new array (we don't mutate, folks)\n    2. It will set the state of `items` to the `newItems` array, then set `newItem` to empty (like you would expect when you submit a form)\n    3. We call `e.preventDefault()` to prevent the form from doing its default action (`POST`'ing the whole form)\n5. Next, in the `render` method we simply add a form. The form itself gets a `onSubmit` binding to the `onSubmitNewItem` method.\n6. In the form, the `input` has 2 bindings - we bind the `onChange` to `onChangeNewItem` which updates the `this.state.newItem` value to store that new data, and the `value` gets bound directly to the state for `newItem` so when the state of that item is changed the value reflects the state.\n\nNow, when we enter a new item in the form and submit, the event-bound methods will handle the changes, update state, and our list will grow!\n\n## Conclusion\n\nThis was a very introductory example of using React, however, it demonstrates some of the major concepts of React; rendering, components, props, state and events.\n\nThese are the core concepts on which React builds upon. If/once you feel like this makes some sense you're well on your way to being able to build more complex React applications.\n\nI plan to do a follow up post on setting up an actual development environment and some of the more tooling-related topics which I will post a link to here.\n\nIf you'd like me to go into depth on any of the above, have questions, or would like me to setup some more specific examples let me know!",
      "json_metadata": "{\"tags\":[\"reactjs\",\"react\",\"javascript\",\"tutorial\"],\"image\":[\"https://steemitimages.com/DQmRjArytrorSKNahEjyXyh683teXv3E1qCoz8jjzG38QVo/react.js-logo.png\"],\"links\":[\"https://facebook.github.io/react/\",\"https://codepen.io\",\"https://codepen.io/fluidbyte/pen/GMooWW?editors=0010\",\"https://codepen.io/fluidbyte/pen/veGbNg?editors=0010\",\"https://codepen.io/fluidbyte/pen/JrXxOK?editors=0010\",\"https://codepen.io/fluidbyte/pen/PJNVxB?editors=0010\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "reactjs",
      "permlink": "a-no-bs-dive-into-reactjs",
      "title": "A No-BS Dive Into ReactJS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T15:41:33",
  "trx_id": "92f941af876d6ae424565669256c2a7e8161d0ce",
  "trx_in_block": 10,
  "virtual_op": 0
}

{
  "block": 15634472,
  "op": [
    "comment",
    {
      "author": "fluidbyte",
      "body": "@@ -1315,18 +1315,16 @@\n t, expla\n-na\n in later\n",
      "json_metadata": "{\"tags\":[\"reactjs\",\"javascript\",\"tutorial\"],\"image\":[\"https://steemitimages.com/DQmRjArytrorSKNahEjyXyh683teXv3E1qCoz8jjzG38QVo/react.js-logo.png\"],\"links\":[\"https://facebook.github.io/react/\",\"https://codepen.io\",\"https://codepen.io/fluidbyte/pen/GMooWW?editors=0010\",\"https://codepen.io/fluidbyte/pen/veGbNg?editors=0010\",\"https://codepen.io/fluidbyte/pen/JrXxOK?editors=0010\",\"https://codepen.io/fluidbyte/pen/PJNVxB?editors=0010\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "reactjs",
      "permlink": "a-no-bs-dive-into-reactjs",
      "title": "A No-BS Dive Into ReactJS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T14:35:57",
  "trx_id": "ea37511a1077cf38ca88413ddcc091af2654a57b",
  "trx_in_block": 5,
  "virtual_op": 0
}

{
  "block": 15634394,
  "op": [
    "comment",
    {
      "author": "fluidbyte",
      "body": "![react.js-logo.png](https://steemitimages.com/DQmRjArytrorSKNahEjyXyh683teXv3E1qCoz8jjzG38QVo/react.js-logo.png)\n\nMany of the tutorials I see on [React](https://facebook.github.io/react/) try to (web)pack in a lot. Yes; there is a lot of tooling that _can_ go around React, however, I didn't fully grasp how amazing React is until I was shown a very simple example of the way the actual, functioning code is written. This tutorial focuses on percisely that; just jumping in and writing some code.\n\n## The Setup - [CodePen](https://codepen.io)\n\n[CodePen](https://codepen.io) is one of the great tools out there for testing out code. It offers a lot of options for defining how your code will run; the biggest of which is being able to add resources (libraries) very easily.\n\n* On a new \"pen\", go to `Settings` and then `JavaScript`.\n* For `JavaScript Preprocessor` select `Babel` - this will allow us to write using ES6. React can be written in older specs, however, most tutorials and code snippets you find will be using ES6.\n* In the `Add External JavaScript` section add the following:\n  * `//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js` - The React Library\n* Click `Save & Close`\n\nThe pen is now setup to allow us to write in ES6, utilizing the React framework.\n\n## Writing Some Code\n\n> Code-first, explanain later.\n\nThis seems to be a great way to learn, so let's jump in! \n\n### Give Your App a Home\n\nThis first one is easy; in the `HTML` editor drop this:\n\n```html\n<div id=\"app\"></app>\n```\n\nWe need a place for our app to load. We'll use this as that place, as you'll see in the next section. MOVING ON!\n\n### Render Something\n\nIn the `JavaScript` editor, enter the following:\n\n```javascript\nclass MyComponent extends React.Component {\n    render() {\n      return (\n        <h1>\n            Hello React!\n        </h1>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/GMooWW?editors=0010)**\n\nThe above is really the leanest example I could think of for demonstrating rendering content through React. Reading through the code we just did the following:\n\n1. Created a new class called `MyComponent` that extends React's `Component` class.\n2. We defined a `render` method for that class so React knows what to render.\n3. We added something to actually render to the `render` method (via the `return`).\n4. We told React to render `<MyComponent />` to our DOM at `#app` that we created in the first section.\n\nCongratulations! That's how to build a component. Let's make more!\n\n### Adding Components, Using Properties\n\nLet's add another component, it's so much fun!\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            <ListItem content=\"Build a component\" />\n            <ListItem content=\"Add more components\" />\n          </ul>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/veGbNg?editors=0010)**\n\nAlright, so the above may seem a bit contrived, however, it very clearly demonstrates how components work in a broader sense, to allow us to break things up into manageable, reusable pieces.\n\nSo we've done the following:\n\n1. Created a new component `ListItem` which simply renders the text passed via the `content` property (`this.props.content`)\n2. Added several instances of the `ListItem` component into the `MyComponent`'s `render` method inside a `<ul>`.\n3. Wrapped everything in `MyComponent`'s `render` with a `<div>`. This is a React-thing; everything _must_ have a parent.\n\n### Using State\n\nThe components above are great, but have no way of working with data. This is where `state` comes in. Below is and example, expanding on what has been done previously:\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n  \n    constructor (props, ctx) {\n      super(props)\n      \n      this.state = {\n        items: [\n          'Build a component',\n          'Add more components',\n          'Add some state'\n        ]\n      }\n    }\n  \n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            {this.state.items.map((item) => {\n              return (\n                <ListItem content={item} />\n              )\n            })}\n          </ul>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/JrXxOK?editors=0010)**\n\nSo there's a bit more code here. Let's dive into it. All of the changes were made in the `MyComponent` class:\n\n1. We added a `constructor` which allows you to perform actions when a Class is instantiated. In this case we're doing 2 things:\n    1.  We call `super(props, ctx)` which is a fancy way of React initializing the class. Not to worry, this is just a standard\n    2.  We initialized state by creating a `this.state` object which contains an array of `items`\n2. Next we made our `ListItems` load from state by simply `map`'ing over them and returning new `ListItem` components with the content set to the item in the current iteration.\n\nSo now when `MyComponent` renders it loads all of its content from the state. Nice!\n\n## Using Events to Change State\n\nState is cool, but fairly useless without some interaction, so let's add that with events!\n\n```javascript\nclass ListItem extends React.Component {\n  render () {\n    return (\n      <li>{this.props.content}</li>\n    )\n  }\n}\n\nclass MyComponent extends React.Component {\n  \n    constructor (props, ctx) {\n      super(props)\n      \n      this.state = {\n        items: [\n          'Build a component',\n          'Add more components',\n          'Add some state'\n        ],\n        newItem: ''\n      }\n      \n      // Have to do this because Codepen doesn't support\n      // stage-3 es6, normally wouldn't need this...\n      this.onChangeNewItem = this.onChangeNewItem.bind(this)\n      this.onSubmitNewItem = this.onSubmitNewItem.bind(this)\n    }\n  \n    onChangeNewItem (e) {\n      this.setState({\n        newItem: e.target.value\n      })\n    }\n  \n    onSubmitNewItem (e) {\n      const newItems = this.state.items.concat(this.state.newItem)\n      this.setState({\n        items: newItems,\n        newItem: ''\n      })\n      e.preventDefault()\n    }\n  \n    render() {\n      return (\n        <div>\n          <h1>\n            Hello React!\n          </h1>\n          <ul>\n            {this.state.items.map((item) => {\n              return (\n                <ListItem content={item} />\n              )\n            })}\n          </ul>\n          <form onSubmit={this.onSubmitNewItem}>\n            <input \n              type=\"text\"\n              onChange={this.onChangeNewItem}\n              value={this.state.newItem}\n            />\n            <button type=\"submit\">Submit</button>\n          </form>\n        </div>\n      )\n    }\n}\n\nReact.render(<MyComponent />, document.getElementById('app'))\n```\n\n**[View on CodePen](https://codepen.io/fluidbyte/pen/PJNVxB?editors=0010)**\n\nAgain, we're expanding on what we already have, so looking at what was added:\n\n1. In the `constructor` we modified `this.state` to have a property `newItem`, this will store new items when we want to add something to the list.\n2. This is sort of a special case (because CodePen doesn't support stage-3 es6) but we bind 2 new methods in the constructor.\n3. We create a `onChangeNewItem` event. This will be bound to a form element. Whenever the value of that element changes we need to update our state using `setState` so we know what the current value of that field is.\n4. We create a `onSubmitNewItem` which will do several things:\n    1. It will add (`concat`) the value of `newItem` into a new array (we don't mutate, folks)\n    2. It will set the state of `items` to the `newItems` array, then set `newItem` to empty (like you would expect when you submit a form)\n    3. We call `e.preventDefault()` to prevent the form from doing its default action (`POST`'ing the whole form)\n5. Next, in the `render` method we simply add a form. The form itself gets a `onSubmit` binding to the `onSubmitNewItem` method.\n6. In the form, the `input` has 2 bindings - we bind the `onChange` to `onChangeNewItem` which updates the `this.state.newItem` value to store that new data, and the `value` gets bound directly to the state for `newItem` so when the state of that item is changed the value reflects the state.\n\nNow, when we enter a new item in the form and submit, the event-bound methods will handle the changes, update state, and our list will grow!\n\n## Conclusion\n\nThis was a very introductory example of using React, however, it demonstrates some of the major concepts of React; rendering, components, props, state and events.\n\nThese are the core concepts on which React builds upon. If/once you feel like this makes some sense you're well on your way to being able to build more complex React applications.\n\nI plan to do a follow up post on setting up an actual development environment and some of the more tooling-related topics which I will post a link to here.\n\nIf you'd like me to go into depth on any of the above, have questions, or would like me to setup some more specific examples let me know!",
      "json_metadata": "{\"tags\":[\"reactjs\",\"javascript\",\"tutorial\"],\"image\":[\"https://steemitimages.com/DQmRjArytrorSKNahEjyXyh683teXv3E1qCoz8jjzG38QVo/react.js-logo.png\"],\"links\":[\"https://facebook.github.io/react/\",\"https://codepen.io\",\"https://codepen.io/fluidbyte/pen/GMooWW?editors=0010\",\"https://codepen.io/fluidbyte/pen/veGbNg?editors=0010\",\"https://codepen.io/fluidbyte/pen/JrXxOK?editors=0010\",\"https://codepen.io/fluidbyte/pen/PJNVxB?editors=0010\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "reactjs",
      "permlink": "a-no-bs-dive-into-reactjs",
      "title": "A No-BS Dive Into ReactJS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-20T14:32:03",
  "trx_id": "a1849852019040015985f760bd1b055fd6da37f0",
  "trx_in_block": 6,
  "virtual_op": 0
}

{
  "block": 15564365,
  "op": [
    "comment",
    {
      "author": "matthewdavid",
      "body": "Great to have you here. Welcome to Steemit!",
      "json_metadata": "{\"tags\":[\"hello\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "fluidbyte",
      "parent_permlink": "hooray-steemit",
      "permlink": "re-fluidbyte-hooray-steemit-20170918t040755609z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-18T04:07:54",
  "trx_id": "724c4812affd4cda4528692f8b59e96c1510d2b4",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 15501691,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "voter": "matthewdavid",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T23:54:03",
  "trx_id": "d9a3196a434dbb0bc280e7491211b167d6afa79d",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 15499492,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "voter": "tage",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T22:04:06",
  "trx_id": "c0ed2290a58a037bb8bf7228bccc333f6003daa6",
  "trx_in_block": 16,
  "virtual_op": 0
}

{
  "block": 15493315,
  "op": [
    "comment",
    {
      "author": "matthewdavid",
      "body": "Good to hear! I'm glad you got value out of the presentation. I'm happy with how it turned out: at least three new people signed up for a Steemit account. Probably more to come. It's a good community with quality articles and social connections. \n\nHere's a great example of how to do an \"introduceyourself\" post: [Hello Steemit! - Coinmarketcap.com Introduced Me!](https://steemit.com/almost-famous/@teamsteem/hello-steemit-coinmaketcap-com-introduced-me)\n\nGreat to have you here!",
      "json_metadata": "{\"tags\":[\"steemit\"],\"links\":[\"https://steemit.com/almost-famous/@teamsteem/hello-steemit-coinmaketcap-com-introduced-me\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "fluidbyte",
      "parent_permlink": "re-matthewdavid-i-m-giving-a-talk-about-steemit-this-evening-20170915t132238425z",
      "permlink": "re-fluidbyte-re-matthewdavid-i-m-giving-a-talk-about-steemit-this-evening-20170915t165511037z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T16:55:12",
  "trx_id": "fad2043f34078d12298a9f47be94910626f1b3d5",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 15493218,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "re-matthewdavid-i-m-giving-a-talk-about-steemit-this-evening-20170915t132238425z",
      "voter": "matthewdavid",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T16:50:21",
  "trx_id": "15f4eefc22e0893fc4f775ebbb8ceed28d1b1f57",
  "trx_in_block": 30,
  "virtual_op": 0
}

{
  "block": 15490225,
  "op": [
    "comment",
    {
      "author": "fluidbyte",
      "body": "Completely agree! I do a LOT with markdown and I've found [this Chrome app](https://chrome.google.com/webstore/detail/minimalist-markdown-edito/pghodfjepegmciihfhdipmimghiakcjf/related?hl=en) really helpful for drafting documents.",
      "json_metadata": "{\"tags\":[\"steemit-ideas\"],\"links\":[\"https://chrome.google.com/webstore/detail/minimalist-markdown-edito/pghodfjepegmciihfhdipmimghiakcjf/related?hl=en\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "bacchist",
      "parent_permlink": "save-draft-posts",
      "permlink": "re-bacchist-save-draft-posts-20170915t142041730z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T14:20:42",
  "trx_id": "2e973b4f2c3c3f7e37d298ef7a27feec7c9ea3dd",
  "trx_in_block": 7,
  "virtual_op": 0
}

{
  "block": 15489669,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "voter": "harps116",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:52:54",
  "trx_id": "23995f5b9c84706d13d7e53e09e6836a22801221",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 15489168,
  "op": [
    "vote",
    {
      "author": "fluidbyte",
      "permlink": "hooray-steemit",
      "voter": "dsantrat",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:27:51",
  "trx_id": "c1567bf63495f85e80e213cf49dc7aac2cbd2e66",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 15489063,
  "op": [
    "comment",
    {
      "author": "fluidbyte",
      "body": "That was a great presentation; more than just how to use Steemit, but most importantly the benefits and how, in it's nature, the network rewards positive contributions. Just got my account and really excited!",
      "json_metadata": "{\"tags\":[\"steemit\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "matthewdavid",
      "parent_permlink": "i-m-giving-a-talk-about-steemit-this-evening",
      "permlink": "re-matthewdavid-i-m-giving-a-talk-about-steemit-this-evening-20170915t132238425z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:22:36",
  "trx_id": "ec06b9dc253e8f36aadeb4e737f10b88c068b680",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 15489006,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"fluidbyte\",\"following\":\"matthewdavid\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "fluidbyte"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:19:45",
  "trx_id": "cea9ca3b1bee69edd4b2e567e390fc196a13d928",
  "trx_in_block": 11,
  "virtual_op": 0
}

{
  "block": 15488998,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"fluidbyte\",\"following\":\"harps116\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "fluidbyte"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:19:21",
  "trx_id": "db2ed37e7ee858108023ebeb2d64b720ab28acbc",
  "trx_in_block": 30,
  "virtual_op": 0
}

{
  "block": 15488992,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"fluidbyte\",\"following\":\"dsantrat\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "fluidbyte"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:19:03",
  "trx_id": "1b486595b9b43ff16123b15e74cd1de76e1c71ef",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 15488980,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"fluidbyte\",\"following\":\"tage\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "fluidbyte"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:18:27",
  "trx_id": "e5b8e4ec558cae376d69aa1ee4f0e11b2507b6b6",
  "trx_in_block": 14,
  "virtual_op": 0
}

{
  "block": 15488940,
  "op": [
    "comment",
    {
      "author": "fluidbyte",
      "body": "# I'm Stoked\n\nA little over a year ago I ditched all social media outlets, blogging platforms, etc. I did this for one primary reason; anonymity on the internet brings out the worst in people. I'm excited about the potential of Steemit, and the potential for people to be driven to communicate by the value of content instead of just posting for the sake of slapping something on the web without any thought.",
      "json_metadata": "{\"tags\":[\"hello\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "hello",
      "permlink": "hooray-steemit",
      "title": "Hooray! Steemit!"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:16:27",
  "trx_id": "7b14854f981030d301171947306a18f9d44e65aa",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 15488864,
  "op": [
    "account_update",
    {
      "account": "fluidbyte",
      "json_metadata": "{\"profile\":{\"profile_image\":\"https://en.gravatar.com/userimage/3984688/3da778b6dc482c0553eef617d2088af6.jpg\",\"name\":\"Kent Safranski\",\"about\":\"Software engineer, architect, manager, father, husband, other stuff...\",\"location\":\"Holmen, Wisconsin\",\"website\":\"https://fluidbyte.github.io\"}}",
      "memo_key": "STM64Dx5CYqeargPrEUTX3vLnkFJbGsiZgpj6Z8r4ZoVDJuT2uLh7"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:12:39",
  "trx_id": "28e827c1d6a7e482e4779a34ecd174fa67e46cf7",
  "trx_in_block": 19,
  "virtual_op": 0
}

{
  "block": 15488799,
  "op": [
    "account_create_with_delegation",
    {
      "active": {
        "account_auths": [],
        "key_auths": [
          [
            "STM6LFCK8pJpvdJoczxn1TvRyPsME9MmDD9MiULfSKhGstLwgusdB",
            1
          ]
        ],
        "weight_threshold": 1
      },
      "creator": "steem",
      "delegation": "57000.000000 VESTS",
      "extensions": [],
      "fee": "0.500 STEEM",
      "json_metadata": "",
      "memo_key": "STM64Dx5CYqeargPrEUTX3vLnkFJbGsiZgpj6Z8r4ZoVDJuT2uLh7",
      "new_account_name": "fluidbyte",
      "owner": {
        "account_auths": [],
        "key_auths": [
          [
            "STM5Lh5Ucuhr3j7mGd8EYdBFuEerJhSua1QhZhuJ481Vit86J4KXo",
            1
          ]
        ],
        "weight_threshold": 1
      },
      "posting": {
        "account_auths": [],
        "key_auths": [
          [
            "STM7hJHPMk2HzLFieUHq3bGN8Hy8LeyePCn31rV6MZm65hZKjS42K",
            1
          ]
        ],
        "weight_threshold": 1
      }
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-09-15T13:09:24",
  "trx_id": "d10b029ac91cabe46b2167e0e5853444c1d2f201",
  "trx_in_block": 14,
  "virtual_op": 0
}