[et_pb_section fb_built=”1″ fullwidth=”on” admin_label=”Header” _builder_version=”3.22″ background_image=”https:\/\/afocus.dev\/wp-content\/uploads\/2020\/04\/web-dev-03.png” parallax=”on” animation_style=”fade”][et_pb_fullwidth_header title=”We develop your web app in React.JS” button_one_text=”Request a Quote” button_one_url=”@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6Ijc4In19@” button_two_text=”Check our work” button_two_url=”@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjM0In19@” content_max_width=”640px” _builder_version=”4.9.2″ _dynamic_attributes=”button_one_url,button_two_url” title_font=”Lato|900|||||||” title_font_size=”40px” title_line_height=”1.5em” content_font=”||||||||” content_font_size=”16px” content_line_height=”2em” background_color=”rgba(0,0,0,0)” custom_button_one=”on” button_one_text_size=”14px” button_one_text_color=”#ffffff” button_one_bg_color=”#225A6F” button_one_border_width=”14px” button_one_border_color=”rgba(0,0,0,0)” button_one_border_radius=”0px” button_one_letter_spacing=”2px” button_one_font=”|600||on|||||” button_one_icon=”%%24%%” button_one_on_hover=”off” custom_button_two=”on” button_two_text_size=”14px” button_two_text_color=”#225A6F” button_two_bg_color=”rgba(255,255,255,0)” button_two_border_width=”12px” button_two_border_color=”rgba(0,0,0,0)” button_two_border_radius=”0px” button_two_letter_spacing=”2px” button_two_font=”|600||on|||||” button_two_icon=”%%24%%” button_two_on_hover=”off” background_layout=”light” custom_margin=”|||” custom_padding=”10vw|||” animation_style=”zoom” animation_intensity_zoom=”-5%” title_font_size_tablet=”” title_font_size_phone=”25px” title_font_size_last_edited=”on|desktop” box_shadow_style_button_two=”preset1″ box_shadow_vertical_button_two=”0px” box_shadow_blur_button_two=”0px” box_shadow_spread_button_two=”2px” box_shadow_color_button_two=”#225A6F” button_one_letter_spacing_hover=”2px” button_two_letter_spacing_hover=”2px” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”on” button_one_letter_spacing__hover=”2px” button_two_letter_spacing__hover_enabled=”on” button_two_letter_spacing__hover=”2px” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”]<\/p>\n
Afocus d\u00e9veloppe et con\u00e7oit vos applications Web personnalis\u00e9es
(applications Web) dans React.<\/p>\n
<\/p>\n
[\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=\u201d1\u2033 admin_label=\u201dProjets\u201d _builder_version=\u201d3.22\u2033 custom_padding=\u201d54px|0px|0|0px|false|false\u201d][et_pb_row column_structure=\u201d1_4,3_4\u2033 make_equal=\u201don\u201d padding_top_bottom_link_1=\u201dtrue\u201d padding_top_bottom_link_2=\u201dfalse\u201d _builder_version=\u201d4.9.2\u2033 custom_margin=\u201d40px|auto|0px|auto|false|\u201d custom_padding=\u201d0|0px|0|0px|true|false\u201d animation_style=\u201dslide\u201d animation_direction=\u201dright\u201d animation_intensity_slide=\u201d1%\u201d box_shadow_style=\u201dpreset4\u2033 box_shadow_horizontal=\u201d-780px\u201d box_shadow_vertical=\u201d0px\u201d box_shadow_color=\u201d#f5f6f9 \u2033][et_pb_column type= \u00bb1_4\u2033 _builder_version= \u00bb3.25\u2033 use_background_color_gradient= \u00bbon \u00bb background_color_gradient_start= \u00bb#f5f6f9\u2033 background_color_gradient_end= \u00bbrgba(245,246,249,0) \u00bb background_color_gradient_direction= \u00bb90deg \u00bb background_color_gradient _start_position=\u201d50%\u201d background_color_gradient_end_position=\u201d0%\u201d custom_padding ="60px||60px|" pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_image src=\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/ReactJS_300.png\u201d title_text=\u201dReactJS_300\u2033 align_tablet=\u201dcenter\u201d align_phone=\u201d\u201d align_last_edited=\u201dsur|desktop\u201d _builder_version=\u201d4.9.2\u2033 custom_margin=\u201d|||-20%\u201d custom_margin_tablet=\u201d|||-10%\u201d custom_margin_phone=\u201d|||\u201d custom_margin_last_edited=\u201don|phone\u201d verrouill\u00e9=\u201doff\u201d][\/et_pb_image][\/et_pb_column][et_pb_column type=\u201d3_4\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d80px||40px|\u201d custom_padding_tablet=\u201d0px|||\u201d custom_padding_phone=\u201d\u201d custom_padding_last_edited=\u201dsur|tablette\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 padding_tablet=\u201d0px|||\u201d padding_last_edited=\u201dsur|tablette\u201d custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 text_line_height=\u201d1.5em\u201d header_font=\u201d||||||||\u201d header_3_font=\u201dLato|900|||||||\u201d header_3_font_size=\u201d35px\u201d header_3_line_height=\u201d1.5em\u201d header_4_font=\u201dLato|700||on|||||\u201d header_4_text_color=\u201d#225A6F\u201d header_4_font_size=\u201d13px\u201d header_4_letter_spacing=\u201d3px\u201d header_4_line_height=\u201d1.8em\u201d header_3_font_size_tablet=\u201d\u201d header_3_font_size_phone=\u201d25px\u201d header_3_font_size_last_edited=\u201dsur|bureau\u201d]<\/p>\n
React est une biblioth\u00e8que JavaScript, d\u00e9velopp\u00e9e par Facebook, pour cr\u00e9er des interfaces utilisateur front-end riches. Son approche par composants r\u00e9utilisables en fait un outil particuli\u00e8rement modulaire pour d\u00e9velopper des applications web complexes.\u00a0<\/p>\n
Gr\u00e2ce \u00e0 ses concepts simples coupl\u00e9s \u00e0 la facilit\u00e9 d'utilisation du pseudo-langage JSX, React s'est rapidement impos\u00e9 comme la r\u00e9f\u00e9rence des stacks front-end. Des centaines de milliers de d\u00e9veloppeurs, des petites agences aux grandes entreprises, utilisent React pour offrir des exp\u00e9riences de premier ordre dans leurs applications et composants de sites Web dynamiques, tels que Facebook, Airbnb, Dropbox, Netflix\u2026<\/p>\n
Avec l'aide de fonctionnalit\u00e9s telles que les DOM virtuels, JSX, une gestion d'\u00e9tat impressionnante et des composants r\u00e9utilisables ind\u00e9pendants les uns des autres, les d\u00e9veloppeurs React peuvent r\u00e9duire consid\u00e9rablement leur temps de d\u00e9veloppement. Il devient assez facile de cr\u00e9er des codes propres et g\u00e9rables avec les r\u00e8gles de structure strictes de React et le flux de donn\u00e9es unidirectionnel. Il est \u00e9galement facile de tester et de maintenir ces applications Web et ces sites Web.<\/p>\n
Aujourd'hui, React tente de stabiliser son \u00e9volution en proposant des mises \u00e0 jour progressives et des am\u00e9liorations de performances alors m\u00eame qu'il s'agit d\u00e9j\u00e0 d'une des technologies front-end les plus rapides. Avec sa popularit\u00e9 croissante, de nouveaux frameworks bas\u00e9s sur React tels que Next.js ou Gatsby ont vu le jour, offrant de nouvelles possibilit\u00e9s et se superposant aux fonctionnalit\u00e9s de base de React.<\/p>\n
React offre \u00e9galement \u00e0 de nombreux d\u00e9veloppeurs web une passerelle vers le d\u00e9veloppement mobile avec son framework React Native, \u00e9galement d\u00e9velopp\u00e9 par Facebook.<\/p>\n
]<\/p>\n
En savoir plus sur React.JS<\/strong><\/p>\n Site officiel: https:\/\/reactjs.org\/<\/a><\/span> [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built= \u00bb1\u2033 admin_label= \u00bbServices \u00bb _builder_version= \u00bb4.9.2\u2033 background_color= \u00bb#f5f6f9\u2033][et_pb_row _builder_version= \u00bb3.25\u2033 custom_padding= \u201d|||\u201d][et_pb_column type=\u201d4_4\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 header_font=\u201d||||||||\u201d header_2_font="|600||on|||||" header_2_text_color=\u201d#225A6F\u201d header_2_font_size=\u201d16px\u201d header_2_letter_spacing=\u201d3px\u201d header_2_line_height=\u201d1.8em\u201d header_3_font=\u201d||||||||\u201d text_orientation="center"]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”3.25″][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” pac_dcm_carousel_specific_module_num=”0″ custom_padding__hover=”|||”][et_pb_blurb title=”Pros of using React.JS for your web app” use_icon=”on” font_icon=”%%151%%” icon_color=”#FFFFFF” use_circle=”on” circle_color=”#225A6F” icon_placement=”left” _builder_version=”4.9.2″ _module_preset=”default” header_font=”|700|||||||” header_text_color=”#000000″ header_font_size=”22px” body_font_size=”16px” text_orientation=”center”]<\/p>\n <\/p>\n [\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”3.25″ custom_padding=”|||” pac_dcm_carousel_specific_module_num=”0″ custom_padding__hover=”|||”][et_pb_blurb title=”Cons of using React.JS for your web app” use_icon=”on” font_icon=”%%152%%” icon_color=”#FFFFFF” use_circle=”on” circle_color=”#225A6F” icon_placement=”left” _builder_version=”4.9.2″ _module_preset=”default” header_font=”|700|||||||” header_text_color=”#000000″ header_font_size=”22px” body_font_size=”16px” text_orientation=”center”]<\/p>\n <\/p>\n [\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u201d1\u2033 admin_label=\u201dServices\u201d _builder_version=\u201d3.22\u2033][et_pb_row _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d][ et_pb_column type=\u201d4_4\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 header_font=\u201d||||||||\u201d header_2_font="|600||on|||||" header_2_text_color=\u201d#225A6F\u201d header_2_font_size=\u201d16px\u201d header_2_letter_spacing=\u201d3px\u201d header_2_line_height=\u201d1.8em\u201d header_3_font=\u201d||||||||\u201d text_orientation="center"]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u201d1_2,1_2\u2033 _builder_version=\u201d3.25\u2033][et_pb_column type=\u201d1_2\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_toggle title=\u201dQuelle est la diff\u00e9rence entre React.JS et React Native ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n Les deux ont \u00e9t\u00e9 d\u00e9velopp\u00e9s par Facebook, mais React est une biblioth\u00e8que JavaScript de composants r\u00e9utilisables con\u00e7ue pour cr\u00e9er des applications Web (sites Web complexes), tandis que React Native est con\u00e7u pour cr\u00e9er des applications mobiles natives avec des composants r\u00e9utilisables.<\/p>\n [\/et_pb_toggle][et_pb_toggle title="Quelles sont les fonctionnalit\u00e9s de React\u00a0? \u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||sur|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n Les principales fonctionnalit\u00e9s de React sont :<\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dDe quelle(s) langue(s) est fait React ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n React est une biblioth\u00e8que Javascript, et par cons\u00e9quent, elle est faite avec Javascript. Donc, pour l'utiliser, vous utilisez principalement Javascript. En option, vous pouvez choisir d'utiliser JSX ou Javascript eXtension, un langage XML-Esque, pour cr\u00e9er des composants d'interface utilisateur. La syntaxe JSX serait toujours convertie en son \u00e9quivalent Javascript, mais elle est beaucoup plus facile \u00e0 \u00e9crire.<\/p>\n En raison de la popularit\u00e9 de React, il existe \u00e9galement des liaisons pour presque tous les langages qui se transpilent en JavaScript (TypeScript, Flow, ReasonML, ClojureScript, PureScript, etc.). Il existe \u00e9galement une abondante documentation sur la fa\u00e7on de l'int\u00e9grer \u00e0 d'autres langages (par exemple, ReactJS.NET, qui le rend facile \u00e0 utiliser dans les applications C#).<\/p>\n [\/et_pb_toggle][et_pb_toggle title="Qu'est-ce que JSX\u00a0?" icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n JSX est une extension de syntaxe de JavaScript. Il est utilis\u00e9 avec React pour d\u00e9crire \u00e0 quoi devrait ressembler l'interface utilisateur. En utilisant JSX, nous pouvons \u00e9crire des structures HTML dans le m\u00eame fichier qui contient du code JavaScript.<\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dQuelle est la vitesse de React ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n React est vraiment rapide par rapport aux autres technologies, et c'est pour une raison principale, le DOM virtuel. Le DOM ou mod\u00e8le d'objet de document est une repr\u00e9sentation du code HTML. C'est ce qui donne \u00e0 Javascript la possibilit\u00e9 de manipuler des \u00e9l\u00e9ments HTML. Il utilise l'API DOM pour y parvenir. Malheureusement, la manipulation du DOM peut s'av\u00e9rer fastidieuse en raison de la nature des sites Web modernes.<\/p>\n Le DOM virtuel React est une copie plus simple du DOM r\u00e9el avec lequel vous interagissez avec React. Au lieu de recharger tout le DOM \u00e0 chaque changement d'\u00e9tat, il recr\u00e9e le DOM React et le compare \u00e0 la version pr\u00e9c\u00e9dente \u00e0 l'aide d'un algorithme de diff\u00e9rence. Il demande ensuite au DOM de ne recharger que la zone affect\u00e9e. Cela r\u00e9duit consid\u00e9rablement le temps n\u00e9cessaire pour mettre \u00e0 jour une page.<\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dComment React se compare-t-il \u00e0 Angular.JS ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n React et Angular sont les 2 frameworks\/biblioth\u00e8ques de d\u00e9veloppement d'applications Web c\u00f4t\u00e9 client les plus populaires. La diff\u00e9rence Angular\/React est aussi un duel entre deux g\u00e9ants de la tech : Google, la soci\u00e9t\u00e9 derri\u00e8re Angular et Facebook, derri\u00e8re React. M\u00eame si le but et l'application possible de ces 2 cadres sont les m\u00eames, certaines diff\u00e9rences existent.<\/span><\/p>\n La diff\u00e9rence majeure entre les deux frameworks est que d'une part React manipule un DOM virtuel (Document Object Model) tandis qu'Angular manipule le vrai DOM de la page. Cela a un r\u00e9el impact sur les performances de votre page. En effet, le DOM virtuel de React est beaucoup plus rapide.\u00a0<\/span><\/p>\n Voici une liste d'autres diff\u00e9rences notables entre Angular et React :<\/p>\n [\/et_pb_toggle][\/et_pb_column][et_pb_column type=\u201d1_2\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_toggle title=\u201dEst-ce que React est un framework ou une biblioth\u00e8que ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n C'est une biblioth\u00e8que bien qu'elle ait certaines caract\u00e9ristiques de cadre.<\/p>\n Une diff\u00e9rence essentielle entre un framework et une biblioth\u00e8que est qu'un framework d\u00e9finit la structure et l'architecture du code. Il dicte comment votre application doit \u00eatre d\u00e9velopp\u00e9e. Consid\u00e9rez-le comme un mod\u00e8le pour une maison. Une biblioth\u00e8que, en revanche, ressemble davantage aux meubles et accessoires de maison que vous pouvez ajouter \u00e0 une maison existante.<\/p>\n Une biblioth\u00e8que est une collection de programmes qui ex\u00e9cutent des fonctions r\u00e9p\u00e9titives courantes au cours du d\u00e9veloppement. Ainsi, tout comme avec les meubles, vous pouvez ajouter une biblioth\u00e8que \u00e0 une base de code existante pour l'utiliser. C'est pr\u00e9cis\u00e9ment la fa\u00e7on dont React est con\u00e7u. Il peut \u00eatre utilis\u00e9 pour cr\u00e9er des composants d'interface utilisateur pour votre application ou pour modifier ceux pr\u00e9c\u00e9demment cr\u00e9\u00e9s avec HTML. Vous d\u00e9finissez comment vous voulez l'utiliser, ce qui contraste avec le fonctionnement d'un framework.<\/p>\n Facebook, le cr\u00e9ateur de React, l'appelle une biblioth\u00e8que.<\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dQue sont les composants r\u00e9utilisables dans React ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n Les composants sont les \u00e9l\u00e9ments constitutifs de l'interface utilisateur d'une application React. Ces composants divisent l'int\u00e9gralit\u00e9 de l'interface utilisateur en petits \u00e9l\u00e9ments ind\u00e9pendants et r\u00e9utilisables. Ensuite, il rend chacun de ces composants ind\u00e9pendants les uns des autres sans affecter le reste de l'interface utilisateur.<\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dQuelles sont les diff\u00e9rentes phases du cycle de vie d'un composant React ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n Il existe trois phases diff\u00e9rentes dans le cycle de vie du composant React\u00a0:<\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dPeut-il \u00eatre ajout\u00e9 \u00e0 un projet existant ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n React \u00e9tant une biblioth\u00e8que peut \u00eatre utilis\u00e9e avec un projet existant. Apr\u00e8s l'avoir configur\u00e9 sur votre syst\u00e8me, il vous suffit d'ajouter les balises de script react et react-dom \u00e0 votre code HTML existant, puis d'appeler \u00e9galement le fichier Javascript contenant le composant que vous avez cr\u00e9\u00e9 avec une balise de script. Ensuite, vous placez une balise div avec le nom du composant comme identifiant \u00e0 l'endroit o\u00f9 vous souhaitez placer le composant React, et vous \u00eates pr\u00eat \u00e0 partir.<\/p>\n <\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dQuelles entreprises utilisent React.JS ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n React est utilis\u00e9 par de nombreuses grandes entreprises technologiques, notamment : Facebook, Instagram, Whatsapp, Netflix, Zendesk, Yahoo, Codecademy, Dropbox, Airbnb, Microsoft, Atlassian, Slack, The New York Times, Asana et bien d'autres.<\/p>\n [\/et_pb_toggle][et_pb_toggle title=\u201dA quoi sert React.JS ?\u201d icon_color=\u201d#225A6F\u201d _builder_version=\u201d4.9.2\u2033 title_text_color=\u201d#000000\u2033 title_font=\u201dLato|700||on|||||\u201d title_font_size=\u201d12px\u201d title_letter_spacing=\u201d3px\u201d title_line_height=\u201d2em\u201d body_font=\u201d||||||||\u201d body_line_height=\u201d1.8em\u201d custom_margin=\u201d||20px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dleft\u201d animation_delay=\u201d200ms\u201d animation_intensity_slide=\u201d5%\u201d]<\/p>\n React JS est une biblioth\u00e8que tr\u00e8s flexible et polyvalente. Avec la grande vari\u00e9t\u00e9 de fonctionnalit\u00e9s qu'il offre, il peut parfois \u00eatre un peu difficile de comprendre quand l'utiliser. Airbnb et Uber ont commenc\u00e9 \u00e0 utiliser React une fois que Facebook l'a publi\u00e9 en 2013. Le service cloud Dropbox et la cha\u00eene de reportage BBC utilisent tous React sur leurs sites Web et leurs applications Web et mobiles.<\/p>\n React est bien adapt\u00e9 pour les applications suivantes :<\/p>\n [\/et_pb_toggle][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built= \u00bb1\u2033 admin_label= \u00bbSection de processus de travail \u00bb _builder_version= \u00bb3.22\u2033 background_color= \u00bb#2a3443\u2033 custom_padding= \u00bb100px|0px|100px|0px \u201d global_module=\u201d4376\u2033 saved_tabs=\u201dall\u201d][et_pb_row admin_label=\u201dTextes et bouton\u201d _builder_version=\u201d4.4.3\u2033 custom_padding=\u201d|||\u201d][et_pb_column type=\u201d4_4\u2033 _builder_version=\u201d3.25\u2033 custom_padding= \u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text admin_label=\u201dTitre et sous-titre\u201d _builder_version=\u201d4.9.2\u2033 text_text_color=\u201drgba(255,255,255,0.7)\u201d header_font=\u201d|||||||| \u201d header_text_color=\u201d#ffffff\u201d header_2_font=\u201d|700|||||||\u201d header_2_text_color= \u00bb#ffffff \u00bb background_layout= \u00bbdark \u00bb module_alignment= \u00bbleft \u00bb]<\/p>\n Nous cr\u00e9ons des applications Web puissantes et \u00e9volutives, con\u00e7ues sur mesure gr\u00e2ce \u00e0 des processus de d\u00e9veloppement agiles utilisant les derni\u00e8res technologies. Nos \u00e9quipes professionnelles de d\u00e9veloppeurs, designers et chefs de produits seront \u00e0 vos c\u00f4t\u00e9s de la conception en amont \u00e0 la livraison d'un produit r\u00e9pondant pleinement aux attentes des utilisateurs finaux.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_4,1_4,1_4,1_4″ use_custom_gutter=”on” gutter_width=”2″ admin_label=”Work Process” _builder_version=”4.4.3″][et_pb_column type=”1_4″ _builder_version=”3.25″ custom_padding=”|||” pac_dcm_carousel_specific_module_num=”0″ custom_padding__hover=”|||”][et_pb_blurb title=”1. Discovery” use_icon=”on” font_icon=”%%20%%” icon_color=”#ffffff” icon_placement=”left” admin_label=”Step” _builder_version=”4.4.3″ header_level=”h6″ header_font=”|600|||||||” header_text_align=”left” header_text_color=”#ffffff” header_font_size=”20px” header_line_height=”1.7em” body_font=”||||||||” body_text_align=”center” body_text_color=”rgba(255,255,255,0.5)” body_font_size=”16px” body_line_height=”1.5em” min_height=”200px” custom_padding=”20px|10px|20px|10px|true|true” animation_style=”slide” animation_direction=”bottom” animation_intensity_slide=”20%” animation=”off” border_width_all=”1px” border_color_all=”#ffffff”]<\/p>\n \u2013 Analyse des besoins [\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”3.25″ custom_padding=”|||” pac_dcm_carousel_specific_module_num=”0″ custom_padding__hover=”|||”][et_pb_blurb title=”2. Design & Development” use_icon=”on” font_icon=”%%20%%” icon_color=”#ffffff” icon_placement=”left” admin_label=”Step” _builder_version=”4.4.3″ header_level=”h6″ header_font=”|600|||||||” header_text_align=”left” header_text_color=”#ffffff” header_font_size=”20px” header_line_height=”1.7em” body_font=”||||||||” body_text_align=”left” body_text_color=”rgba(255,255,255,0.5)” body_font_size=”16px” body_line_height=”1.5em” module_alignment=”center” min_height=”200px” custom_padding=”20px|10px|20px|10px|true|true” animation_style=”slide” animation_direction=”bottom” animation_intensity_slide=”20%” animation=”off” border_width_all=”1px” border_color_all=”#ffffff”]<\/p>\n \u2013 Conception UI\/UX [\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”3.25″ custom_padding=”|||” pac_dcm_carousel_specific_module_num=”0″ custom_padding__hover=”|||”][et_pb_blurb title=”3. Testing & Deployment” use_icon=”on” font_icon=”%%20%%” icon_color=”#ffffff” icon_placement=”left” admin_label=”Step” _builder_version=”4.4.3″ header_level=”h6″ header_font=”|600|||||||” header_text_align=”left” header_text_color=”#ffffff” header_font_size=”20px” header_line_height=”1.7em” body_font=”||||||||” body_text_align=”left” body_text_color=”rgba(255,255,255,0.5)” body_font_size=”16px” body_line_height=”1.5em” min_height=”200px” custom_padding=”20px|10px|20px|10px|true|true” animation_style=”slide” animation_direction=”bottom” animation_intensity_slide=”20%” animation=”off” border_width_all=”1px” border_color_all=”#ffffff”]<\/p>\n \u2013 Assurance qualit\u00e9 [\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_4″ _builder_version=”3.25″ custom_padding=”|||” pac_dcm_carousel_specific_module_num=”0″ custom_padding__hover=”|||”][et_pb_blurb title=”4. Evolutive Maintenance” use_icon=”on” font_icon=”%%20%%” icon_color=”#ffffff” icon_placement=”left” admin_label=”Step” _builder_version=”4.4.3″ header_level=”h6″ header_font=”|600|||||||” header_text_align=”left” header_text_color=”#ffffff” header_font_size=”20px” header_line_height=”1.7em” body_font=”||||||||” body_text_align=”center” body_text_color=”rgba(255,255,255,0.5)” body_font_size=”16px” body_line_height=”1.5em” min_height=”200px” custom_padding=”20px|10px|20px|10px|true|true” animation_style=”slide” animation_direction=”bottom” animation_intensity_slide=”20%” animation=”off” border_width_all=”1px” border_color_all=”#ffffff”]<\/p>\n \u2013 Maintenance [\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u201d1\u2033 admin_label=\u201dSection de nos professeurs\u201d _builder_version=\u201d4.9.2\u2033 background_color=\u201d#f5f6f9\u2033 custom_padding=\u201d110px|0px|110px |0px\u201d][et_pb_row _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d][et_pb_column type=\u201d4_4\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 header_font=\u201d||||||||\u201d header_2_font="|600||on|||||" header_2_text_color=\u201d#225A6F\u201d header_2_font_size=\u201d16px\u201d header_2_letter_spacing=\u201d3px\u201d header_2_line_height=\u201d1.8em\u201d header_3_font=\u201d||||||||\u201d text_orientation="center"]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u201d1_3,1_3,1_3\u2033 use_custom_gutter=\u201don\u201d gutter_width=\u201d2\u2033 custom_padding_last_edited=\u201don|desktop\u201d _builder_version=\u201d3.25\u2033 custom_padding=\u201d|| |\u201d custom_padding_tablet=\u201d0px||0px|\u201d custom_padding_phone=\u201d\u201dlocked=\u201doff\u201d][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_team_member name=\u201dHuy\u201d position=\u201dD\u00e9veloppeur Full stack React JS\u201d image_url=\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/ HQN.photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600|||||||\u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][et_pb_team_member name=\u201dTruong\u201d position=\u201dD\u00e9veloppeur principal front-end React JS \u201d image_url=\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/TNL.photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600||||| ||\u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][et_pb_team_member name=\u201dMi\u201d position=\u201dConcepteur UI\/UX senior\u201d image_url =\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/MTT.photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600||||||| \u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][\/et_pb_column][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3. Rembourrage personnalis\u00e9 25\u00a0\u2033 ="|||" pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_team_member name=\u201dThang\u201d position=\u201dD\u00e9veloppeur Full stack React JS\u201d image_url=\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/ TDV.photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600|||||||\u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][et_pb_team_member name=\u201dTrang\u201d position=\u201dChef de projet senior\u201d image_url=\u201d https:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/THN.photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600|||||||\u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][et_pb_team_member name=\u201dDuc\u201d position=\u201dProduct designer\u201d image_url=\u201dhttps :\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/Duc.photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600|||||||\u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][\/et_pb_column][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3. Rembourrage personnalis\u00e9 25\u00a0\u2033 ="|||" pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_team_member name=\u201dPho\u201d position=\u201dD\u00e9veloppeur senior front-end React JS\u201d image_url=\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/ 08\/P_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600|||||||\u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][et_pb_team_member name=\u201dLinh\u201d position=\u201dChef de projet & Scrum Master\u201d image_url =\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/LSP.photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font=\u201d|600||||||| \u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d hover_enabled=\u201d0\u2033 border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread =\u201d6px\u201d box_shadow_color=\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d sticky_enabled=\u201d0\u2033][\/et_pb_team_member][et_pb_team_member name=\u201dDao\u201d position=\u201dAssurance qualit\u00e9 \/ Contr\u00f4le qualit\u00e9\u201d image_url=\u201dhttps:\/\/afocus.dev\/wp-content\/uploads\/2022\/08\/Dao-photo_BW.jpg\u201d icon_color=\u201d#44d89e\u201d _builder_version=\u201d4.9.2\u2033 header_font= \u201d|600|||||||\u201d header_text_color=\u201d#486066\u2033 header_font_size=\u201d20px\u201d body_font=\u201d||||||||\u201d body_font_size=\u201d16px\u201d body_line_height=\u201d1.8em\u201d position_font_size=\u201d16px\u201d background_color=\u201d#ffffff\u201d text_orientation=\u201dcenter\u201d max_width=\u201d360px\u201d module_alignment=\u201dcenter\u201d custom_margin=\u201d|||\u201d custom_padding=\u201d30px|30px|30px|30px\u201d animation_style=\u201dfade\u201d border_radii=\u201don|6px|6px|6px|6px\u201d box_shadow_style=\u201dpreset1\u2033 box_shadow_vertical=\u201d10px\u201d box_shadow_blur=\u201d24px\u201d box_shadow_spread=\u201d6px\u201d box_shadow_color =\u201drgba(0,0,0,0.06)\u201d icon_hover_color=\u201d#353740\u2033 icon_color__hover=\u201d#353740\u2033 icon_color__hover_enabled=\u201don\u201d][\/et_pb_team_member][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built= \u201d 1\u2033 admin_label = "Reprendre" _builder_version = "4.4.3" background_color = "#225a6f" background_color_gradient_direction = "90deg" background_image = "https:\/\/afocus.dev\/wp-content\/uploads\/2020\/04\/web-dev-24 .png\u201d parallax=\u201don\u201d custom_margin=\u201d|||9.5%\u201d custom_margin_tablet=\u201d|||0%\u201d custom_margin_phone=\u201d|||0vw\u201d custom_margin_last_edited=\u201don|desktop\u201d custom_padding=\u201d120px|0px|54px|0px |false|false\u201d global_module=\u201d4377\u2033 saved_tabs=\u201dall\u201d][et_pb_row column_structure=\u201d1_3,1_3,1_3\u2033 _builder_version=\u201d3.25\u2033][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|| |\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_number_counter title=\u201dAnn\u00e9es d'exp\u00e9rience\u201d number=\u201d3\u2033 percent_sign=\u201doff\u201d _builder_version=\u201d4.9.2\u2033 title_font=\u201d|800|||||| |\u201d title_line_height=\u201d1.4em\u201d number_font=\u201dLato|900|||||||\u201d number_text_color=\u201d#ffffff\u201d number_font_size=\u201d120px\u201d number_line_height=\u201d42px\u201d text_orientation=\u201dleft\u201d background_layout=\u201ddark\u201d custom_margin=\u201d||40px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dbottom\u201d animation_intensity_slide=\u201d220%\u201d number_font_size_tablet=\u201d\u201d number_font_size_phone=\u201d100px\u201d number_font_size_last_edited=\u201don|phone\u201d verrouill\u00e9=\u201doff\u201d][\/et_pb_number_counter][\/et_pb_column][et_pb_column type=\u201d 1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_number_counter title=\u201dMembres de l'\u00e9quipe\u201d number=\u201d20\u2033 percent_sign=\u201doff\u201d _builder_version=\u201d4.9.2\u2033 title_font=\u201d|800||||||| \u201d title_line_height=\u201d1.4em\u201d number_font=\u201dLato|900|||||||\u201d number_text_color=\u201d#ffffff\u201d number_font_size=\u201d120px\u201d number_line_height=\u201d42px\u201d text_orientation=\u201dleft\u201d background_layout=\u201ddark\u201d custom_margin=\u201d||40px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dbottom\u201d animation_intensity_slide=\u201d110%\u201d number_font_size_tablet=\u201d\u201d number_font_size_phone=\u201d100px\u201d number_font_size_last_edited=\u201don|phone\u201d verrouill\u00e9=\u201doff\u201d][\/et_pb_number_counter][\/et_pb_column][et_pb_column type=\u201d 1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_number_counter title=\u201dProjets termin\u00e9s\u201d number=\u201d50+\u201d percent_sign=\u201doff\u201d _builder_version=\u201d4.9.2\u2033 title_font=\u201d|800|||||| |\u201d title_line_height=\u201d1.4em\u201d number_font=\u201dLato|900|||||||\u201d number_text_color=\u201d#ffffff\u201d number_font_size=\u201d120px\u201d number_line_height=\u201d42px\u201d text_orientation=\u201dleft\u201d background_layout=\u201ddark\u201d custom_margin=\u201d||40px|\u201d animation_style=\u201dslide\u201d animation_direction=\u201dbottom\u201d animation_intensity_slide=\u201d20%\u201d number_font_size_tablet=\u201d\u201d number_font_size_phone=\u201d100px\u201d number_font_size_last_edited=\u201don|phone\u201d verrouill\u00e9=\u201doff\u201d][\/et_pb_number_counter][\/et_pb_column][\/et_pb_row][ et_pb_row column_structure=\u201d1_3,1_3,1_3\u2033 _builder_version=\u201d3.25\u2033][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 text_text_color=\u201d#ffffff\u201d ul_font=\u201d||||||||\u201d ul_line_height=\u201d2em\u201d header_font=\u201d||||||||\u201d header_4_font="|600||sur|||||" header_4_font_size=\u201d14px\u201d header_4_letter_spacing=\u201d3px\u201d header_4_line_height=\u201d1.8em\u201d header_5_font=\u201d||||||||\u201d background_layout=\u201ddark\u201d verrouill\u00e9=\u201doff\u201d]<\/p>\n Avec l'ambition de r\u00e9volutionner le secteur de l'externalisation au Vietnam, Afocus a \u00e9t\u00e9 imagin\u00e9 il y a 3 ans avec un objectif simple en t\u00eate : lancer une passerelle d'externalisation d'une large gamme de services de d\u00e9veloppement en s'appuyant sur notre expertise dans la recherche et la formation des meilleurs talents au Vietnam.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.4.3\u2033 text_text_color=\u201d#ffffff\u201d ul_font=\u201d||||||||\u201d ul_line_height=\u201d2em\u201d header_font=\u201d||||||||\u201d header_4_font="|600||sur|||||" header_4_font_size=\u201d14px\u201d header_4_letter_spacing=\u201d3px\u201d header_4_line_height=\u201d1.8em\u201d header_5_font=\u201d||||||||\u201d background_layout="sombre"]<\/p>\n Embaucher quelqu'un est facile. Mais trouver les personnes ayant le bon \u00e9tat d'esprit, les bonnes comp\u00e9tences et la capacit\u00e9 d'apprendre et de grandir\u00a0? Ce n'est pas une t\u00e2che facile. Laissez-nous faire le travail acharn\u00e9 pour trouver les bons talents, les former et les garder, afin que vous puissiez vous concentrer sur ce que vous faites le mieux : d\u00e9velopper votre entreprise.<\/p>\n Que vous recherchiez une \u00e9quipe de 1, 2 ou 50 personnes, nous trouverons le ou les talents qui r\u00e9pondront le mieux \u00e0 vos besoins parmi les membres de notre \u00e9quipe existante, ou nous construirons votre \u00e9quipe \u00e0 partir de z\u00e9ro.<\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.4.3\u2033 text_text_color=\u201d#ffffff\u201d ul_font=\u201d||||||||\u201d ul_line_height=\u201d2em\u201d header_font=\u201d||||||||\u201d header_4_font="|600||sur|||||" header_4_font_size=\u201d14px\u201d header_4_letter_spacing=\u201d3px\u201d header_4_line_height=\u201d1.8em\u201d header_5_font=\u201d||||||||\u201d background_layout=\u201ddark\u201d verrouill\u00e9=\u201doff\u201d]<\/p>\n Pour tous les projets que nous avons r\u00e9alis\u00e9s - qu'il s'agisse d'une application Web complexe, d'un site Web de commerce \u00e9lectronique, d'une application mobile - nous avons appliqu\u00e9 les m\u00eames m\u00e9thodes, les m\u00eames processus et les m\u00eames outils.\u00a0<\/p>\n Nous sommes des experts en gestion de projet et connaissons la mani\u00e8re la plus efficace de mener nos clients \u2013 et les membres de notre \u00e9quipe \u2013 jusqu'\u00e0 la ligne d'arriv\u00e9e.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u201d1\u2033 admin_label=\u201dProjets\u201d _builder_version=\u201d4.9.2\u2033 background_enable_color=\u201doff\u201d custom_padding=\u201d54px|0px|0|0px |false|false\u201d global_module=\u201d4378\u2033 save_tabs=\u201dall\u201d][et_pb_row _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d][et_pb_column type=\u201d4_4\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 header_font=\u201d||||||||\u201d header_2_font="|600||on|||||" header_2_text_color=\u201d#225A6F\u201d header_2_font_size=\u201d16px\u201d header_2_letter_spacing=\u201d3px\u201d header_2_line_height=\u201d1.8em\u201d header_3_font=\u201d||||||||\u201d text_orientation="center"]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u201d1_3,1_3,1_3\u2033 _builder_version=\u201d3.25\u2033][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 text_text_color=\u201d#666666\u2033 ul_font=\u201d||||||||\u201d ul_line_height=\u201d2em\u201d header_font=\u201d||||||||\u201d header_4_font="|600||sur|||||" header_4_font_size=\u201d14px\u201d header_4_letter_spacing=\u201d3px\u201d header_4_line_height=\u201d1.8em\u201d header_5_font=\u201d||||||||\u201d background_layout=\u201ddark\u201d verrouill\u00e9=\u201doff\u201d]<\/p>\n D\u00e9veloppement avec React<\/a><\/span> [\/et_pb_text][\/et_pb_column][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 text_text_color=\u201d#666666\u2033 ul_font=\u201d||||||||\u201d ul_line_height=\u201d2em\u201d header_font=\u201d||||||||\u201d header_4_font="|600||sur|||||" header_4_font_size=\u201d14px\u201d header_4_letter_spacing=\u201d3px\u201d header_4_line_height=\u201d1.8em\u201d header_5_font=\u201d||||||||\u201d background_layout=\u201ddark\u201d verrouill\u00e9=\u201doff\u201d]<\/p>\n D\u00e9veloppement avec NodeJS<\/a><\/span> [\/et_pb_text][\/et_pb_column][et_pb_column type=\u201d1_3\u2033 _builder_version=\u201d3.25\u2033 custom_padding=\u201d|||\u201d pac_dcm_carousel_specific_module_num=\u201d0\u2033 custom_padding__hover=\u201d|||\u201d][et_pb_text _builder_version=\u201d4.9.2\u2033 text_text_color=\u201d#666666\u2033 ul_font=\u201d||||||||\u201d ul_line_height=\u201d2em\u201d header_font=\u201d||||||||\u201d header_4_font="|600||sur|||||" header_4_font_size=\u201d14px\u201d header_4_letter_spacing=\u201d3px\u201d header_4_line_height=\u201d1.8em\u201d header_5_font=\u201d||||||||\u201d background_layout=\u201ddark\u201d verrouill\u00e9=\u201doff\u201d]<\/p>\n D\u00e9veloppement mobile<\/a><\/span> [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ fullwidth=”on” admin_label=”CTA” _builder_version=”3.22″ background_color=”#000000″ background_color_gradient_direction=”90deg” background_image=”https:\/\/afocus.dev\/wp-content\/uploads\/2020\/04\/web-dev-05.png” parallax=”on”][et_pb_fullwidth_header title=”Building a web app?” subhead=”Let’s discuss your project… We reply within 24h” text_orientation=”center” button_one_text=”Contact us” button_one_url=”@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6Ijc4In19@” button_two_text=”Check our work” button_two_url=”@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjM0In19@” _builder_version=”4.9.2″ _dynamic_attributes=”button_one_url,button_two_url” title_font=”Lato|900|||||||” title_font_size=”40px” title_line_height=”1.5em” content_font=”||||||||” content_font_size=”16px” content_line_height=”2em” subhead_font=”|700||on|||||” subhead_text_color=”rgba(255,255,255,0.5)” subhead_font_size=”14px” subhead_letter_spacing=”2px” background_color=”rgba(0,0,0,0)” custom_button_one=”on” button_one_text_size=”14px” button_one_text_color=”#FFFFFF” button_one_bg_color=”#225A6F” button_one_border_width=”14px” button_one_border_color=”rgba(0,0,0,0)” button_one_border_radius=”0px” button_one_letter_spacing=”2px” button_one_font=”|600||on|||||” button_one_icon=”%%24%%” button_one_on_hover=”off” custom_button_two=”on” button_two_text_size=”14px” button_two_text_color=”#ffffff” button_two_bg_color=”rgba(255,255,255,0)” button_two_border_width=”12px” button_two_border_color=”rgba(0,0,0,0)” button_two_border_radius=”0px” button_two_letter_spacing=”2px” button_two_font=”|600||on|||||” button_two_icon=”%%24%%” button_two_on_hover=”off” custom_margin=”|||” custom_padding=”8vw||8vw||true” animation_style=”zoom” animation_intensity_zoom=”-5%” title_font_size_tablet=”” title_font_size_phone=”25px” title_font_size_last_edited=”on|desktop” box_shadow_style_button_two=”preset1″ box_shadow_vertical_button_two=”0px” box_shadow_blur_button_two=”0px” box_shadow_spread_button_two=”2px” box_shadow_color_button_two=”#225A6F” button_one_letter_spacing_hover=”2px” button_two_letter_spacing_hover=”2px” global_module=”4379″ saved_tabs=”all” locked=”off” button_one_text_size__hover_enabled=”off” button_two_text_size__hover_enabled=”off” button_one_text_color__hover_enabled=”off” button_two_text_color__hover_enabled=”off” button_one_border_width__hover_enabled=”off” button_two_border_width__hover_enabled=”off” button_one_border_color__hover_enabled=”off” button_two_border_color__hover_enabled=”off” button_one_border_radius__hover_enabled=”off” button_two_border_radius__hover_enabled=”off” button_one_letter_spacing__hover_enabled=”on” button_one_letter_spacing__hover=”2px” button_two_letter_spacing__hover_enabled=”on” button_two_letter_spacing__hover=”2px” button_one_bg_color__hover_enabled=”off” button_two_bg_color__hover_enabled=”off”][\/et_pb_fullwidth_header][\/et_pb_section]<\/p>","protected":false},"excerpt":{"rendered":" Afocus d\u00e9veloppe et con\u00e7oit vos applications Web personnalis\u00e9es (applications Web) dans React. Pourquoi React.JS D\u00e9veloppement de React.JS React est une biblioth\u00e8que JavaScript, d\u00e9velopp\u00e9e par Facebook, pour cr\u00e9er des interfaces utilisateur front-end riches. Son approche par composants r\u00e9utilisables en fait un outil particuli\u00e8rement modulaire pour d\u00e9velopper des applications web complexes. Gr\u00e2ce \u00e0 ses concepts simples coupl\u00e9s \u00e0 la facilit\u00e9 d'utilisation [\u2026]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":""},"yoast_head":"\n
Documentation: https:\/\/reactjs.org\/docs\/getting-started.html<\/a><\/span>
Github : https:\/\/github.com\/facebook\/react<\/a><\/span><\/p>\nAvantages et inconv\u00e9nients de l'utilisation de React.js<\/h2>\n
\n
React est assez facile \u00e0 int\u00e9grer \u00e0 d'autres frameworks comme Meteor, Angular, etc.<\/li>\n\n
Foire aux questions sur React.JS<\/h2>\n
\n
\n
\n
\n
Notre m\u00e9thodologie<\/h2>\n
\u2013 Planification strat\u00e9gique
\u2013 Wireframing<\/p>\n
- Architecture
- D\u00e9veloppement<\/p>\n
\u2013 Tests et correction de bugs
\u2013 D\u00e9ploiement<\/p>\n
\u2013 Am\u00e9liorations & d\u00e9veloppement<\/p>\nNotre \u00e9quipe React.js<\/h2>\n
Notre ambition<\/h4>\n
Notre force<\/h4>\n
Notre exp\u00e9rience<\/h4>\n
Autres langages et technologies<\/h2>\n
D\u00e9veloppement avec Angular<\/a><\/span>
D\u00e9veloppement avec VueJS<\/a><\/span><\/p>\n
D\u00e9veloppement avec Symfony<\/a><\/span>
D\u00e9veloppement avec TypeScript<\/a><\/span>
D\u00e9veloppement avec PHP<\/a><\/span>
D\u00e9veloppement avec Python<\/a><\/span><\/p>\n
D\u00e9veloppement avec React Native<\/a><\/span>
D\u00e9veloppement avec Flutter<\/a><\/span>
D\u00e9veloppement d'une PWA<\/a><\/span><\/p>\n