Apprendre React de zéro [Partie 1]

React c'est quoi?

React est une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page HTML à chaque changement d'état.

Type : Bibliothèque JavaScript

Site web : reactjs.com

Dernière version : 17.0.2 (22 mars 2021)

Licence : Licence MIT

Première version : 2013

Développé par : Facebook, Instagram et la communauté

Pourquoi utiliser React?

React permet aux développeurs de créer de grandes applications web qui peuvent modifier les données, sans avoir à recharger la page. L'objectif principal de React est d'être rapide, évolutif et simple. Il ne fonctionne que sur les interfaces utilisateur de l'application.

Quels sont les avantages de React?

L'avantage est que React JS calcule tous les changements dont le DOM a besoin et met à jour directement la partie qui en a besoin. Cette technologie peut faciliter la création d'interface utilisateur ainsi que des composants qui sont réutilisables et avec des données que l'on peut modifier à tout moment.

Apprendre React :

√Formation de 131MIN.

[Cours / Projet React] Apprendre React de Zéro - Partie 1

● Timecodes :

0:00:00 - Intro

0:02:23 - Installation & Présentation

0:21:45 - Router

0:36:51 - Navigation

0:42:41 - Organisation du style

0:53:11 - Les images

1:00:10 - Les hooks (useState, UseEffect)

1:06:50 - API & Axios

1:19:00 - Les props

1:33:03 - Trier les données & Input range

1:47:20 - Input radio

1:58:11 - Conclusion & Aller plus loin

Post a Comment

Post a Comment

N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2536035415-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY5YNKUbJsWjqRj9x_Kc4QNR9aeRww:1759257647678';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3407944014762602824','//blog.codingteam.space/2021/12/apprendre-react-de-zero-partie-1.html?hl\x3den','3407944014762602824');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3407944014762602824', 'title': 'Coding Team', 'url': 'https://blog.codingteam.space/2021/12/apprendre-react-de-zero-partie-1.html?hl\x3den', 'canonicalUrl': 'https://blog.codingteam.space/2021/12/apprendre-react-de-zero-partie-1.html', 'homepageUrl': 'https://blog.codingteam.space/?hl\x3den', 'searchUrl': 'https://blog.codingteam.space/search', 'canonicalHomepageUrl': 'https://blog.codingteam.space/', 'blogspotFaviconUrl': 'https://blog.codingteam.space/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coding Team - Atom\x22 href\x3d\x22https://blog.codingteam.space/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Coding Team - RSS\x22 href\x3d\x22https://blog.codingteam.space/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coding Team - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3407944014762602824/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Coding Team - Atom\x22 href\x3d\x22https://blog.codingteam.space/feeds/6162545782787089276/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1214813439421958', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/8f4b520d26f96f21', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Lire le post', 'pageType': 'item', 'postId': '6162545782787089276', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomFOvSoqY3LTQ_aWMJ-a1l-ZQLXBnwMQmdQqyb58P4A6y8YRElM4tihOovSvGFRDymQGRP2LQGbrpxXteGyP6rDk0KDbNHG-dz9ZQSWFLunrjck7aguz-PtdzM_iKi36pIjcvvDainxY/s72-c/1639504014250289-0.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomFOvSoqY3LTQ_aWMJ-a1l-ZQLXBnwMQmdQqyb58P4A6y8YRElM4tihOovSvGFRDymQGRP2LQGbrpxXteGyP6rDk0KDbNHG-dz9ZQSWFLunrjck7aguz-PtdzM_iKi36pIjcvvDainxY/s1600/1639504014250289-0.png', 'pageName': 'Apprendre React de z\xe9ro [Partie 1]', 'pageTitle': 'Coding Team: Apprendre React de z\xe9ro [Partie 1]', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Apprendre React de z\xe9ro [Partie 1]', 'description': 'Coding Team est une plateforme en ligne d\xe9di\xe9e au partage des contenues sur la programmation', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomFOvSoqY3LTQ_aWMJ-a1l-ZQLXBnwMQmdQqyb58P4A6y8YRElM4tihOovSvGFRDymQGRP2LQGbrpxXteGyP6rDk0KDbNHG-dz9ZQSWFLunrjck7aguz-PtdzM_iKi36pIjcvvDainxY/s1600/1639504014250289-0.png', 'url': 'https://blog.codingteam.space/2021/12/apprendre-react-de-zero-partie-1.html?hl\x3den', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6162545782787089276}}, {'name': 'widgets', 'data': [{'title': 'Coding Team (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Tu cherches quelque chose ?', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Account Popup', 'type': 'HTML', 'sectionId': 'sec_Header_Icon', 'id': 'HTML101'}, {'title': 'Mes articles sauvegard\xe9s', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Traduction', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList03'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Social Links', 'type': 'LinkList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'LinkList04'}, {'title': '\xc0 la une', 'type': 'FeaturedPost', 'sectionId': 'sec_Top_Widgets', 'id': 'FeaturedPost01', 'postId': '3262227702482231055'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '6162545782787089276', 'title': 'Apprendre React de z\xe9ro [Partie 1]', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomFOvSoqY3LTQ_aWMJ-a1l-ZQLXBnwMQmdQqyb58P4A6y8YRElM4tihOovSvGFRDymQGRP2LQGbrpxXteGyP6rDk0KDbNHG-dz9ZQSWFLunrjck7aguz-PtdzM_iKi36pIjcvvDainxY/s1600/1639504014250289-0.png', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': '\xc9crit par'}, {'name': 'timestamp', 'label': 'Le'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': '\xbb'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': '\xc9crit par'}, {'name': 'timestamp', 'label': 'Le'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': '\xbb'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Retrouve les posts par th\xe8me', 'type': 'LinkList', 'sectionId': 'sec_Main_Widgets', 'id': 'LinkList08'}, {'title': 'Sommaire', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Les plus consult\xe9s', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': 'Un guide complet et pas-\xe0-pas pour coder votre premier petit LLM (mini-GPT) en Python ', 'id': 3641796119937841390}, {'title': 'Oubliez Ngrok ! Apprenez \xe0 exposer votre serveur local (localhost) au monde entier directement depuis VsCode en quelques clics', 'id': 66254778999713592}, {'title': 'HTML Canvas + JavaScript\u202f: Fabriquez un curseur reptile qui bouge et r\xe9agit', 'id': 7303026969179454500}, {'title': 'Viens on recode Google avec l\x27API de Wikip\xe9dia ', 'id': 3262227702482231055}, {'title': 'Viens on recode le jeu Crossy Road en 3D avec JavaScript et Three.js', 'id': 1205790337049187868}, {'title': 'Viens, on recr\xe9e le jeu Mario en JavaScript de A \xe0 Z', 'id': 7009507976147434963}, {'title': 'Viens, on code un d\xe9tecteur de visages avec JavaScript', 'id': 6428505793949372787}]}, {'title': 'Parcourir par cat\xe9gorie', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Amenez-moi l\xe0-bas', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Coding Team', 'type': 'Image', 'sectionId': 'sec_Footer_Organization', 'id': 'Image21'}, {'title': 'Nos r\xe9seaux sociaux', 'type': 'LinkList', 'sectionId': 'sec_Footer_Organization', 'id': 'LinkList21'}, {'title': 'Nos services', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList22'}, {'title': 'Resources', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList23'}, {'title': 'Nos projets', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets', 'id': 'LinkList25'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Bottom', 'id': 'HTML21'}, {'title': 'Menu Mobile', 'type': 'TextList', 'sectionId': 'sec_Mobile_Menu', 'id': 'TextList99'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Firebase Configurations', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList61'}, {'title': 'Progressive Web App', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList62'}, {'title': 'Accepter les cookies', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML101', 'sec_Header_Icon', document.getElementById('HTML101'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList03', 'sec_Header_Icon', document.getElementById('LinkList03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': 'https://blog.codingteam.space/p/sitemaps.html?hl\x3den', 'id': '6194121330377685704', 'title': 'Plan du site (Sitemap)'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList04', 'sec_Nav_Widgets_2', document.getElementById('LinkList04'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost01', 'sec_Top_Widgets', document.getElementById('FeaturedPost01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList08', 'sec_Main_Widgets', document.getElementById('LinkList08'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Organization', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList21', 'sec_Footer_Organization', document.getElementById('LinkList21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'sec_Footer_Widgets', document.getElementById('LinkList22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList23', 'sec_Footer_Widgets', document.getElementById('LinkList23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList25', 'sec_Footer_Widgets', document.getElementById('LinkList25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Bottom', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList99', 'sec_Mobile_Menu', document.getElementById('TextList99'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': '\u09af\u09cb\u0997\u09be\u09af\u09cb\u0997 \u09ab\u09b0\u09cd\u09ae', 'blogId': '3407944014762602824', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY4TTPhhHe5UCSM7AmA_6j2SKf_PeA:1759257647679', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//blog.codingteam.space/b/stats?hl\x3den\x26style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmD-ku0-j8XV3puBvdyHKqzELfVneon188-w1dhZ88YFl1zgKBLhnkKj4SjPLulf5oIY9i3PqX1GBpIIvgEtJ4SRXAqYpQ'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList61', 'sec_Addon_Widgets', document.getElementById('LinkList61'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList62', 'sec_Addon_Widgets', document.getElementById('LinkList62'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
</script>
</body>