{"id":219799,"date":"2020-08-04T00:00:00","date_gmt":"2020-08-03T22:00:00","guid":{"rendered":"https:\/\/blog.lewagon.com\/nao-categorizado\/react-js-framework-javascript\/"},"modified":"2020-08-04T00:00:00","modified_gmt":"2020-08-03T22:00:00","slug":"react-js-framework-javascript","status":"publish","type":"post","link":"https:\/\/blog.lewagon.com\/pt-br\/skills\/react-js-framework-javascript\/","title":{"rendered":"React JS: Por que esse framework frontend de Javascript \u00e9 t\u00e3o poderoso?"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"

Aqui voc\u00ea vai entender as nuances da biblioteca de javascript React JS e compreender tecnicamente quais caracter\u00edsticas a torna t\u00e3o poderosa, para que grandes empresas como Facebook e Twitter a utilizem no core de seus neg\u00f3cios.<\/p>\n","protected":false},"author":1,"featured_media":219800,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[146],"type_de_post":[],"post-format":[179],"class_list":["post-219799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","tag-web-pt-br","post-format-post-pt-br"],"acf":[],"acfml_non_translatable_locations":null,"_wp_attached_file":null,"_wp_attachment_metadata":null,"wpml_media_processed":null,"_elementor_inline_svg":null,"_elementor_source_image_hash":null,"_wp_attachment_image_alt":null,"_msc":null,"_elementor_is_screenshot":null,"_wp_attachment_context":null,"_oembed_4f1dc266c1e5b199d2e3668569863d35":null,"_wp_attachment_backup_sizes":null,"description_courte_du_cours":null,"_description_courte_du_cours":null,"sujets":null,"_sujets":null,"niveau":null,"_niveau":null,"duree":null,"_duree":null,"lien_externe_du_cours":null,"_lien_externe_du_cours":null,"_g_feedback_shortcode_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"_g_feedback_shortcode_atts_8e54bebc0966bf7f9290fee5ef5e57c8a8c597c6":null,"elementor_font_files":null,"elementor_font_face":null,"_elementor_location":null,"_elementor_priority":null,"_elementor_code":null,"_elementor_extra_options":null,"date_de_levent":null,"_date_de_levent":null,"heure_de_debut_de_levent":null,"_heure_de_debut_de_levent":null,"heure_de_fin_de_levent":null,"_heure_de_fin_de_levent":null,"time_zone":null,"_time_zone":null,"description_de_levent":null,"_description_de_levent":null,"format_du_cours":null,"_format_du_cours":null,"pre-requis":null,"_pre-requis":null,"langue_de_levent":null,"_langue_de_levent":null,"lien_externe_de_levent":null,"_lien_externe_de_levent":null,"_yoast_wpseo_primary_tag_events":null,"lieu_de_levent":null,"_lieu_de_levent":null,"_menu_item_type":null,"_menu_item_menu_item_parent":null,"_menu_item_object_id":null,"_menu_item_object":null,"_menu_item_target":null,"_menu_item_classes":null,"_menu_item_xfn":null,"_menu_item_url":null,"_omapi_type":null,"_omapi_ids":null,"_omapi_enabled":null,"_yoast_wpseo_content_score":null,"_pll_strings_translations":null,"_yoast_wpseo_primary_post_tag":null,"_yoast_wpseo_primary_type_de_post":null,"_yoast_wpseo_primary_post-format":null,"_oembed_e607e81f61090d85eabdabc743a27470":null,"_oembed_196c62ccee9fda191cd6fa5f568ddc05":null,"_oembed_6b5f28c0de48cbf3a2ad766be5eb3b30":null,"_oembed_082c4292f4cd0dedc40ae746a899501c":null,"om_disable_all_campaigns":null,"wpil_sync_report3":"1","_yoast_wpseo_focuskw":null,"_yoast_wpseo_linkdex":null,"_yoast_wpseo_opengraph-title":"React JS: Por que esse framework frontend de Javascript \u00e9 t\u00e3o poderoso? | Le Wagon","_yoast_wpseo_opengraph-description":"Aqui voc\u00ea vai entender as nuances da biblioteca de javascript React JS e compreender tecnicamente quais caracter\u00edsticas a torna t\u00e3o poderosa, para que grandes empresas como Facebook e Twitter a utilizem no core de seus neg\u00f3cios.","_yoast_wpseo_twitter-title":"React JS: Por que esse framework frontend de Javascript \u00e9 t\u00e3o poderoso? | Le Wagon","_yoast_wpseo_twitter-description":"Aqui voc\u00ea vai entender as nuances da biblioteca de javascript React JS e compreender tecnicamente quais caracter\u00edsticas a torna t\u00e3o poderosa, para que grandes empresas como Facebook e Twitter a utilizem no core de seus neg\u00f3cios.","wpil_links_inbound_internal_count":"0","wpil_links_inbound_internal_count_data":[],"wpil_links_outbound_internal_count":"0","wpil_links_outbound_internal_count_data":[],"wpil_links_outbound_external_count":"0","wpil_links_outbound_external_count_data":[],"wpil_sync_report2_time":"2023-08-11T09:31:54+00:00","gnpub_modified_count":null,"_encloseme":null,"_jetpack_memberships_contains_paid_content":null,"_oembed_df252bc3f21e94e550790f0a26013d33":null,"_oembed_7c25793225e5877909b9566a95c01f07":null,"_oembed_time_7c25793225e5877909b9566a95c01f07":null,"_oembed_c035311b2d37111892bc6336ad75c1a7":null,"_oembed_time_c035311b2d37111892bc6336ad75c1a7":null,"_yoast_wpseo_focuskw_text_input":"","_yoast_wpseo_opengraph-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/ncajnsm3qvkh1jufb4runpnpa44t.jpeg","_yoast_wpseo_twitter-image":"https:\/\/blog.lewagon.com\/wp-content\/uploads\/2023\/03\/ncajnsm3qvkh1jufb4runpnpa44t.jpeg","_bnitk_mfd_meta-robots-noindex":null,"_yoast_wpseo_meta-robots-noindex":null,"_bnitk_mfd_meta-robots-nofollow":null,"_yoast_wpseo_meta-robots-nofollow":null,"_oembed_9b38dff8e9475b390d223d1a13735d6e":null,"_oembed_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_time_09b03dce1da57707d8b400d6ead6cfea":null,"_oembed_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_time_761875ecd5d7c814e779a8a1669e3078":null,"_oembed_60128998417fdcbaac97a635f5785efd":null,"_oembed_time_60128998417fdcbaac97a635f5785efd":null,"_oembed_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_time_bbc2c908fc7e611d82dce88119dc4350":null,"_oembed_5ada75a4373349f7b136423290505b3a":null,"_oembed_time_5ada75a4373349f7b136423290505b3a":null,"_oembed_086373a651e90a4eb1279fa1f945472c":null,"_oembed_time_086373a651e90a4eb1279fa1f945472c":null,"_wpml_post_translation_editor_native":null,"_oembed_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_time_5e24c29ce369f6b80c9eeec04f14665b":null,"_oembed_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_time_8c3e7085f10b7c0fc5520e72277d797b":null,"_oembed_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_time_1489782c3c8ef26605b6876b88f7bdda":null,"_oembed_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_time_0a3d659fc8de333aa903ab0b56018d23":null,"_oembed_d1585e059963c7dbe1909a198f64637b":null,"_oembed_da273c5e4d4993b38963204fa3018b68":null,"_oembed_time_da273c5e4d4993b38963204fa3018b68":null,"_oembed_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_time_a5e2c70342e4f17e48253b0a60b76258":null,"_oembed_83c8f84c43191797360817ecdc633650":null,"_oembed_time_83c8f84c43191797360817ecdc633650":null,"_oembed_e105b3463a1e23321ff3d1a9daf4ce77":null,"_oembed_1692f2329443bc1b18fc320e0d77cb4e":null,"_yoast_wpseo_schema_article_type":null,"_oembed_02bf1d274545a46fdad44828db802e9b":null,"_oembed_483efee027379bb1099137e135e60619":null,"_oembed_time_483efee027379bb1099137e135e60619":null,"_oembed_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_time_d9e3a2e55472c308a6d4f95f9859d57c":null,"_oembed_14a773041d4083fdc540105ccc635e1f":null,"_oembed_time_14a773041d4083fdc540105ccc635e1f":null,"_oembed_fd2c0295b311b878f43def139f693291":null,"_oembed_time_fd2c0295b311b878f43def139f693291":null,"_oembed_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_time_9e88339a75e081aa4aa002ac43b5917e":null,"_oembed_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_time_e58b2264fd34411178c5aead6e76fc0e":null,"_oembed_bddf29494cd341c273d2f25802785f3a":null,"_oembed_time_bddf29494cd341c273d2f25802785f3a":null,"_oembed_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_time_9fdc7ffbd7d1c456cb57323136bcf86d":null,"_oembed_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_time_6882adf1f7ba34c40d8abda49c078862":null,"_oembed_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_time_42ae0b6a999f98ed81c86edf9b80d360":null,"_oembed_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_time_f4dcff6ba8f84f09cade790420ba4d80":null,"_oembed_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_time_25071af9d5ecd73a9356fe5704bba4d8":null,"_oembed_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_time_a86728f5efc0ca0642006bbb96f843cc":null,"_oembed_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_time_d7b5055b785ef8a0cf22c87d024bf2a4":null,"_oembed_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_time_6a73e101cae7c3452b00a72cf0fc9b22":null,"_oembed_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_time_0aef478f0830cc2e857b9a150a7f763a":null,"_oembed_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_time_d1a3bdcdf10e4859560b01d910ad1120":null,"_oembed_05ef2af36a31586761b7311d393d1df4":null,"_oembed_time_05ef2af36a31586761b7311d393d1df4":null,"_oembed_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_time_ed00fe1690bb2e86f1eb06acfe8a13e7":null,"_oembed_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_time_59ffcbf71f633752ca4f26b3b4a544c9":null,"_oembed_a7b688611478922544f14672fda18461":null,"_oembed_time_a7b688611478922544f14672fda18461":null,"_oembed_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_time_266f9a151e3a09eeee918af2d28fd24f":null,"_oembed_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_time_9f52726dd229470e47d40ff0c8aeb5f8":null,"_oembed_5547f713058fed19783e0533ce393a31":null,"_oembed_time_5547f713058fed19783e0533ce393a31":null,"_oembed_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_time_68ff8dd20e77e109ad084c2252ca040d":null,"_oembed_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_time_819f09a569080db91bf5dadda0a30d9f":null,"_oembed_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_time_4fc081fbdf0afd05a624ba852a63e133":null,"_oembed_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_time_d66baf1301b99db8b19a0924319cf03e":null,"_oembed_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_time_14a5f80e3eef4903e482b0ef3799659e":null,"_oembed_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_time_c24c715adb3853482526a794a5f3c3bb":null,"_oembed_9c493e098be2852715cc990b6e6243f3":null,"_oembed_time_9c493e098be2852715cc990b6e6243f3":null,"_oembed_b60b7e3028d326711916099f54e986fa":null,"_oembed_time_b60b7e3028d326711916099f54e986fa":null,"_oembed_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_time_5283e19fcec44e632de8d436d46ec2f7":null,"_oembed_057692cb4479cf5c77363896a28db44f":null,"_oembed_time_057692cb4479cf5c77363896a28db44f":null,"_oembed_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_time_e8cb0f41d141fe5eb9d69fc32a98cd72":null,"_oembed_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_time_75dcbca80ec1829a77578390fae8fa56":null,"_oembed_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_time_e49318dfeabd5f16d7967e2fcc746fbd":null,"_oembed_76116b03fe5a013341210d278021184b":null,"_oembed_time_76116b03fe5a013341210d278021184b":null,"_oembed_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_time_6c81e1c9b634b5066fb37aaccfd71053":null,"_oembed_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_time_abbc1aa97e554f334c2ce25f0d883702":null,"_oembed_ba421363b36dd97c087665d5025396cf":null,"_oembed_time_ba421363b36dd97c087665d5025396cf":null,"_oembed_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_time_a98f236eb48eb9cd4ede7f319e9cfbc7":null,"_oembed_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_time_d61fec7d73397687995fec8d7bd9852f":null,"_oembed_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_time_2e9e46a0176fe90e49cc5fff32ac6912":null,"_oembed_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_time_8a304f49b3aa1c3eec8d0b0577e05e3d":null,"_oembed_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_time_ad30824ca1e37cffdad2dbce46c4998a":null,"_oembed_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_time_6c3dacc8273d4877c65378c1f324c9cc":null,"_oembed_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_time_1d0e7d3c6d826ca1e56a24218abba6f2":null,"_oembed_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_time_50929cd1300f7cdee57e6e5451afb186":null,"_oembed_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_time_72dc139d079681a2c3d759a86af48ccc":null,"_oembed_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_time_d359fdb1fa5da9e62dd3505937f46fb6":null,"_oembed_589d6065ccac39334963be5bd8656631":null,"_oembed_time_589d6065ccac39334963be5bd8656631":null,"_oembed_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_time_715be02b6ebadc1be6dd638a57d01eb7":null,"_oembed_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_time_f5139a9df267d3aa532f5b56409c90b0":null,"_oembed_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_time_3d9a26be229b27005ca74596fb62cc08":null,"_oembed_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_time_a7d6f0ce79de685fc6f7f4d447e15468":null,"_oembed_20849479e832b5312335e3086c5f972b":null,"_oembed_time_20849479e832b5312335e3086c5f972b":null,"_oembed_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_time_2be4d392f66846deb7624c1bf3bc293e":null,"_oembed_9bcf546ec292041d23df28a719840688":null,"_oembed_time_9bcf546ec292041d23df28a719840688":null,"_oembed_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_time_0858ffd7404bcd7d82896f942481fe63":null,"_oembed_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_time_4a2dd0ecf082a7c7d82731c06a644799":null,"_oembed_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_time_8a1e46bc730cb21c1085d157ae6fa8b6":null,"_oembed_cae7deb931d75f809e459e912e71429a":null,"_oembed_time_cae7deb931d75f809e459e912e71429a":null,"_oembed_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_time_6fcb4f8ab72abccda75674f71a946f97":null,"_oembed_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_time_7f0bfd584f844117a64fe73d83b43245":null,"_oembed_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_time_d0aea105cffdf6e004979cf1e4f51e96":null,"_oembed_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_time_e53b85b8766b3dc91338f6c1b95a2541":null,"_oembed_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_time_48832be87b763046d232c1f2b5ac5fb3":null,"_oembed_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_time_32a9a34fcf91c466be9a08e1dba3c84e":null,"_oembed_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_time_fb50b2dc07acfa2418f00cdc2ad4c4c2":null,"_oembed_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_time_3089e1d62f944a73b38c996e49abd2fc":null,"_oembed_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_time_1ecc99e75cf5d001c8da4f4d600703a8":null,"_oembed_b9c03ca24b382c17966861d251dc3b8d":null,"_oembed_time_b9c03ca24b382c17966861d251dc3b8d":null,"_wp_trash_meta_status":null,"_wp_trash_meta_time":null,"_wp_desired_post_slug":null,"_oembed_031755ba22f2b639d88c78254a99ff39":null,"_oembed_time_031755ba22f2b639d88c78254a99ff39":null,"description_de_la_ressource":null,"_description_de_la_ressource":null,"titre_du_fichier":null,"_titre_du_fichier":null,"_edit_last":null,"_edit_lock":null,"_wp_old_slug":null,"_top_nav_excluded":null,"_cms_nav_minihome":null,"inline_featured_image":null,"_yoast_wpseo_estimated-reading-time-minutes":null,"_yoast_wpseo_wordproof_timestamp":null,"_wpml_media_duplicate":"1","_thumbnail_id":"219800","_wpml_media_featured":"1","_wpml_word_count":"{\"total\":1295,\"to_translate\":{\"en\":1295,\"fr\":1295,\"de\":1295,\"ja\":1295,\"es\":1295}}","_last_translation_edit_mode":null,"_last_editor_used_jetpack":null,"_elementor_edit_mode":null,"_elementor_template_type":null,"_wp_page_template":"default","_elementor_page_settings":null,"_elementor_data":null,"_elementor_page_assets":[],"_elementor_version":null,"_elementor_pro_version":null,"_elementor_elements_default_values":null,"_elementor_css":null,"_elementor_source":null,"_elementor_conditions":null,"_wpml_location_migration_done":null,"_elementor_controls_usage":null,"_elementor_screenshot_failed":null,"_elementor_screenshot":null,"_elementor_popup_display_settings":null,"_yoast_wpseo_primary_category":null,"_wp_old_date":null,"_elementor_template_widget_type":null,"_icl_lang_duplicate_of":null,"_yoast_wpseo_metadesc":"Aqui voc\u00ea vai entender as nuances da biblioteca de javascript React JS e compreender tecnicamente quais caracter\u00edsticas a torna t\u00e3o poderosa, para que grandes empresas como Facebook e Twitter a utilizem no core de seus neg\u00f3cios.","_yoast_wpseo_title":"React JS: Por que esse framework frontend de Javascript \u00e9 t\u00e3o poderoso? | Le Wagon","contenu_de_larticle":"

Aprendizados para iniciantes em React JS<\/h3>

Principais aprendizados dos 6 primeiros meses.<\/h3>
Antes de mais nada um breve aviso:
<\/em>
<\/div>
Eu j\u00e1 programo em outras linguagem e isso faz TODA diferen\u00e7a. Assim como aprender outras l\u00ednguas fica mais f\u00e1cil depois das duas primeiras.<\/div>

<\/div>
Se quiser entender um pouco mais do que eu fiz para aprender a programar independente da linguagem veja esse post<\/a>.

Se voc\u00ea quer aprender a programar e ainda n\u00e3o sabe como come\u00e7ar, sugiro dar uma lida nesse conte\u00fado aqui para <\/em>aprender programa\u00e7\u00e3o do zero<\/em><\/a>!<\/em><\/div>

<\/div>

README.md: Primeiros passos em React JS<\/h2>

<\/div>
Comecei no ReactJS porque queria transformar a minha metodologia de gest\u00e3o de tempo, projetos e atividades, ByDelta, em uma ferramenta. ( At\u00e9 ent\u00e3o usava papel mesmo para gerenciar as minhas atividades e projetos. )<\/div>

<\/div>
E j\u00e1 desenvolvo em PHP desde 2005 e VB , C# desde\u2026 melhor n\u00e3o comentar. ( sim\u2026 j\u00e1 me falaram\u2026 um dinossauro.)<\/div>

<\/div>
Os crit\u00e9rios de escolha do ReactJs ( em rela\u00e7\u00e3o Vue e Angular ) e o processo vamos discutir em outro post.<\/div>

<\/div>

React JS e Javascript<\/h2>

<\/div>
Javascript \u00e9 uma linguagem ( muito bizarra diga-se de passagem ) e o ReactJS ( JS! ) \u00e9 um conjunto de \"facilidades\" que permite aos desenvolvedores acelerarem o seu c\u00f3digo, ou seja, ser mais produtivo.<\/div>

<\/div>
ReactJS N\u00c3O \u00e9 linguagem, \u00e9 uma biblioteca. <\/div>

<\/div>
Deveria colocar o \"mais produtivo\" entre in\u00fameras aspas pois produtividade est\u00e1 diretamente relacionado \u00e0 experi\u00eancia na linguagem por\u00e9m \u00e9 fato que o ReactJS facilita o trabalho.<\/div>

<\/div>
Segue ent\u00e3o o melhor do compilado dos \u00faltimos 6 meses:<\/div>

React JS #01: Componentes e Composition<\/h3>

<\/div>
ANTES de fazer qualquer projeto ReactJS, aprenda a pensar e composi\u00e7\u00e3o. Principalmente se voc\u00ea, assim como eu, vem da programa\u00e7\u00e3o orientada a objetos e os conceitos de hierarquia.<\/div>

<\/div>
Como exemplo:<\/div>

<\/div>
Imagine um objeto Gato e outro Cachorro.<\/div>

<\/div>
Com Hierarquia voc\u00ea cria uma classe ANIMAL e tanto GATO quanto CACHORRO EXTENDS ANIMAL.<\/div>

<\/div>
O que \u00e9 comum entre objetos gatos e cachorros voc\u00ea coloca na CLASSE ANIMAL e o que for espec\u00edfico voc\u00ea coloca em cada objeto.<\/div>

<\/div>
ANIMAL => \n    Olhos, Boca, Pelo.GATO EXTENDS ANIMAL => \n    Mia e herda os atributos de ANIMALGATO EXTENDS ANIMAL => \n    Late e herda os atributos de ANIMAL\n\nReactTJS funciona melhor com COMPOSITION => \n   SOMA!\n\nIsso significa que GATO = \n    Olhos + boca + pelo + miaIsso significa que CACHORRO = \n      Olhos + boca + pelo + late<\/pre>

<\/div>
ReactJS parte do princ\u00edpio que voc\u00ea ir\u00e1 criar componentes para cada uma das caracter\u00edsticas.<\/div>

<\/div>
Esse conceito por si s\u00f3 me custou boas horas de programa\u00e7\u00e3o pois exige que voc\u00ea pense em componentes PEQUENOS e reutiliz\u00e1veis.<\/div>

<\/h2>
React JS #02: Lifecycle<\/h3>
Essa pra mim \u00e9 a principal dica de qualquer linguagem: entenda como ela processa o c\u00f3digo e voc\u00ea ir\u00e1 economizar muito tempo de desenvolvimento.<\/div>

<\/div>
O ReactJS ainda adiciona o conceito de hooks e suas variantes de Lifecycle n\u00e3o facilitam. <\/div>

<\/div>
O fato \u00e9 que ANTES da primeira linha de c\u00f3digo precisamos entender como o c\u00f3digo vai ser processado e isso ajuda a evitar erros de aprendizado.
React JS webhooks<\/figcaption><\/figure><\/div>
React JS #03: Props e State <\/h3>

<\/div>
Para entender os conceito tem in\u00fameros v\u00eddeos na internet ( e outros tantos posts ). J\u00e1 o bom uso pode confundir bastante.<\/div>

<\/div>
Vamos l\u00e1! <\/div>
Props passa informa\u00e7\u00f5es de pai pra filho.<\/div>
State s\u00e3o informa\u00e7\u00f5es locais e que precisam de manter seu ESTADO durante o lifecycle.<\/div>

<\/div>
Entendido isso saiba que toda vez que voc\u00ea criar um STATE para e pense se \u00e9 neste componente mesmo que voc\u00ea deseja criar. A maior parte dos meus erros foi justamente n\u00e3o pensar onde o STATE deveria ser declarado.<\/div>

<\/div>
Dica do state \u00e9 justamente criar componentes que funcionam sozinhos ou em conjunto com outros, ou seja, independentes. (pense em composition)<\/div>

<\/div>
React JS #04: Atualiza\u00e7\u00e3o ascendente <\/h3>

( dei o nome de upParent\/atualizaPai)<\/em><\/div>
Passar dados descende (de pai para filho) \u00e9 com o props e est\u00e1 tudo certo. E o caminho de volta?<\/div>

<\/div>
Tentei utilizar v\u00e1rios padr\u00f5es (n\u00e3o vou citar aqui para n\u00e3o dar disc\u00f3rdia) por\u00e9m acabei \"inventando\" um meu. Coloco entre aspas pois provavelmente existe apesar de n\u00e3o ter encontrado.<\/div>

<\/div>
Se voc\u00ea usa algum padr\u00e3o e j\u00e1 est\u00e1 satisfeito \u00f3timo. N\u00e3o existe correto, existe o que funciona pra voc\u00ea.<\/div>

<\/div>
Obs.: eu sei programar por\u00e9m explicar conceitos em texto n\u00e3o \u00e9 meu forte. Qualquer d\u00favida, comenta no post que respondo.<\/div>


<\/div>
Como funciona: TODO componente deve ter uma fun\u00e7\u00e3o no seguinte formato:<\/div>

<\/div>
const upComponente = ( acao, dados ) => {\n       switch(acao) {} \n       if(props.upParent) props.upParent(acao, dados);\n}<\/pre>


<\/div>
Essa fun\u00e7\u00e3o tem dois par\u00e2metros: acao e dados.<\/div>

<\/div>
Acao ir\u00e1 selecionar a a\u00e7\u00e3o que o componente dever\u00e1 executar e dados se possuir dados relacionados aquela a\u00e7\u00e3o.<\/div>

<\/div>
const upComponente = ( acao, dados ) => {\n    switch(acao){}\n    <\/strong>if(props.upParent) props.upParent(acao, dados);\n}<\/pre>

<\/div>
A segunda parte chama a fun\u00e7\u00e3o do componente ACIMA se existir.<\/div>

<\/div>
const upComponente = ( acao, dados ) => {\n    switch(acao){}\n   <\/strong> if(props.upParent) props.upParent(acao, dados);\n<\/strong>}<\/pre>

<\/div>
De forma geral funciona como uma atualiza\u00e7\u00e3o de baixo para cima. 
(Quase um\u2026  <\/em>bubble sort<\/em><\/a>. rsrs)<\/em><\/div>

<\/div>
A grande \"m\u00e1gica\" desse padr\u00e3o \u00e9 por exemplo quando o componente filho com uma acao \"salvar\" chama o  props.upParent(\"salvar\") <\/strong>e  cada pai que ele passa verifica se precisa fazer alguma a\u00e7\u00e3o.<\/div>

<\/div>
Esse efeito cascata ascendente permite fazer altera\u00e7\u00f5es nos pais a partir dos filhos em toda a \u00e1rvore de componentes.<\/div>

<\/div>
Se voc\u00ea gostou e\/ou te ajudou me manda uma DM no @bydeltaapp ? Estou querendo saber se realmente \u00e9 um padr\u00e3o novo ou se algu\u00e9m j\u00e1 publicou!<\/div>

<\/div>
Compilando React JS<\/h2>

<\/div>
ReactJS assim como outras linguagem promete facilitar a vida dos desenvolvedores e o faz! Mas n\u00e3o faz milagre.<\/div>

<\/div>
Entender as premissas do ReactJS ( lifecycle, props, state ) \u00e9 FUNDAMENTAL para ter uma experi\u00eancia um pouco melhor. <\/div>

<\/div>
Existem 3 fatos inerentes da programa\u00e7\u00e3o:<\/h3>
  1. Bugs sempre v\u00e3o existir na nossa vida <\/li>
  2. Assim como clientes chatos<\/li>
  3. Usu\u00e1rios fazem coisas bizarras<\/li><\/ol>

    <\/div>
    Para saber mais pode me procurar no bydelta.butec.com.br que inclusive \u00e9 todo em ReactJS.<\/div>

    <\/div>
    Conclus\u00e3o<\/h2>

    <\/div>
    Se voc\u00ea j\u00e1 programa em JAVA ou em alguma orientada a objetivo, gaste um tempo para abandonar a hierarquia e dedicar ao composition do ReactJS.

    De quebra, se voc\u00ea curtiu React JS e quer aprender ainda mais, saca s\u00f3 esse v\u00eddeo do Canal do Youtube do Le Wagon para aprender a programar em React para iniciantes
    <\/a>
    <\/div>
    Agora que voc\u00ea j\u00e1 sabe como aprender a programar, que tal conhecer os cursos de programa\u00e7\u00e3o da Le Wagon e come\u00e7ar sua carreira como desenvolvedor com o p\u00e9 direito? Escolha sua cidade e fa\u00e7a sua inscri\u00e7\u00e3o<\/a>.

    T\u00e1 em d\u00favida sobre sua carreira e ainda n\u00e3o tem certeza que quer se inscrever?     Agende aqui gratuitamente uma Consultoria de Carreira em Tecnologia com nossos consultores<\/a>!<\/div>

    <\/div>
    Veja tamb\u00e9m:

    <\/div>