{"id":6160,"date":"2025-06-02T11:54:31","date_gmt":"2025-06-02T11:54:31","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-nouveau-projet-react-tutoriel\/"},"modified":"2025-06-02T11:54:35","modified_gmt":"2025-06-02T11:54:35","slug":"creer-nouveau-projet-react-tutoriel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-nouveau-projet-react-tutoriel\/","title":{"rendered":"15.2 Cr\u00e9er un Nouveau Projet avec React : Tutoriel"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Nouveau Projet React<\/strong> est une \u00e9tape cruciale pour les d\u00e9veloppeurs web cherchant \u00e0 construire des applications modernes et r\u00e9actives. Comprendre comment mettre en place un projet React optimis\u00e9 est essentiel pour tirer pleinement parti des capacit\u00e9s de cette biblioth\u00e8que JavaScript. Explorons ensemble comment cr\u00e9er efficacement un nouveau projet React \u00e0 travers des \u00e9tapes guid\u00e9es et des conseils pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de Projet React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706138618?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p><a href=\"https:\/\/wikiform.fr\/codespace\/creer-nouveau-projet-react-tutoriel\">React<\/a> est une biblioth\u00e8que JavaScript populaire utilis\u00e9e pour construire des interfaces utilisateur interactives. Avant de plonger dans le d\u00e9veloppement, il est important de bien configurer notre environnement de travail en cr\u00e9ant un projet React correctement structur\u00e9. Voici comment faire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation de Node.js et de npm<\/h3>\n\n\n\n<p>Pour commencer, assurez-vous que <a href=\"https:\/\/nodejs.org\" rel=\"dofollow noopener\" target=\"_blank\">Node.js<\/a> et <a href=\"https:\/\/www.npmjs.com\/\" rel=\"dofollow noopener\" target=\"_blank\">npm<\/a> (Node Package Manager) sont install\u00e9s sur votre machine. Node.js est n\u00e9cessaire pour ex\u00e9cuter le serveur de d\u00e9veloppement, tandis que npm est utilis\u00e9 pour installer les packages n\u00e9cessaires. Un bon d\u00e9but serait de lire les <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">meilleurs logiciels pour d\u00e9velopper en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># V\u00e9rifiez la version de Node.js\nnode -v\n\n# V\u00e9rifiez la version de npm\nnpm -v\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;un Nouveau Projet avec Create React App<\/h3>\n\n\n\n<p><a href=\"https:\/\/create-react-app.dev\/\" rel=\"dofollow noopener\" target=\"_blank\">Create React App<\/a> est un outil de configuration z\u00e9ro qui vous permet de cr\u00e9er un projet React sans avoir \u00e0 vous soucier des configurations Webpack et Babel. Pour cr\u00e9er un nouveau projet, il est aussi important de r\u00e9fl\u00e9chir \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">qu&rsquo;est-ce que React<\/a> pour s&rsquo;immerger pleinement dans l&rsquo;univers de cette technologie. Ex\u00e9cutez simplement la commande suivante dans votre terminal :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># Cr\u00e9ez une nouvelle application React\nnpx create-react-app my-new-app\n\n# Acc\u00e9dez au r\u00e9pertoire de votre nouvelle application\ncd my-new-app\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Structure de Dossier d&rsquo;un Projet React<\/h3>\n\n\n\n<p>Une fois le projet cr\u00e9\u00e9, familiarisez-vous avec sa structure de dossier. Cela vous aidera dans votre premi\u00e8re <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\">utilisation des classes JavaScript dans React<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>my-new-app\/\n|-- node_modules\/\n|-- public\/\n|   |-- index.html\n|-- src\/\n|   |-- App.css\n|   |-- App.js\n|   |-- index.js\n|-- package.json\n|-- README.md\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9marrer le Serveur de D\u00e9veloppement<\/h3>\n\n\n\n<p>Pour voir votre application en action, d\u00e9marrez le serveur de d\u00e9veloppement en utilisant la commande suivante :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code>npm start\n<\/code><\/pre>\n\n\n\n<p>Cette commande lance le serveur local et ouvre automatiquement votre navigateur par d\u00e9faut \u00e0 l&rsquo;adresse <code>http:\/\/localhost:3000<\/code>. Assurez-vous de comprendre <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\">les diff\u00e9rences entre les applications monopage et multipage<\/a> pour optimiser votre projet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Personnalisation de Votre Projet React<\/h3>\n\n\n\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 le projet initial, vous pouvez commencer \u00e0 le personnaliser. Par exemple, ouvrez <code>src\/App.js<\/code> pour modifier la structure de votre application, ajoutez des composants React suppl\u00e9mentaires, ou modifiez les styles dans <code>src\/App.css<\/code>. Il est bon d&rsquo;explorer <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\">comment ma\u00eetriser les objets en JavaScript<\/a> pour un d\u00e9veloppement fluide.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport '.\/App.css';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <h1>Bienvenue dans Mon Nouveau Projet React<\/h1>\n      <\/header>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajout de D\u00e9pendances Suppl\u00e9mentaires<\/h3>\n\n\n\n<p>Pour enrichir votre projet, vous pouvez ajouter des biblioth\u00e8ques suppl\u00e9mentaires. Utilisez npm pour installer des packages comme <code>axios<\/code> pour les requ\u00eates HTTP ou <code>react-router-dom<\/code> pour la gestion des routes. Vous pourriez aussi vouloir <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\">explorer les extensions indispensables pour d\u00e9veloppeur React<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-bash\"><code># Ajouter axios\nnpm install axios\n\n# Ajouter react-router-dom\nnpm install react-router-dom\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion : Cr\u00e9er un Nouveau Projet React<\/h2>\n\n\n\n<p>En suivant ce tutoriel, vous avez appris \u00e0 cr\u00e9er un nouveau projet React, \u00e0 explorer sa structure, et \u00e0 lancer votre serveur de d\u00e9veloppement. Ces \u00e9tapes vous pr\u00e9parent \u00e0 commencer le d\u00e9veloppement d&rsquo;applications React efficaces et interactives. Pour aller plus loin, consultez notre article sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\">int\u00e9gration de Redux<\/a> \u00e0 votre application React pour une gestion d&rsquo;\u00e9tat avanc\u00e9e.<\/p>\n\n\n\n<p>Puisque React est en constante \u00e9volution, il est important de rester \u00e0 jour avec les <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\">nouveaut\u00e9s JavaScript<\/a> qui peuvent enrichir vos comp\u00e9tences en d\u00e9veloppement. En outre, explorer des <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-javascript-dans-jsx-react\">ressources externes<\/a> et des pratiques exemplaires am\u00e9liore encore votre processus de cr\u00e9ation.<\/p>\n\n\n<!-- Insert Learnify Banner -->\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation - REDUX et REACT\" style=\"width:100%; height:auto;\" title=\"\">\n<\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Nouveau Projet React est une \u00e9tape cruciale pour les d\u00e9veloppeurs web cherchant \u00e0 construire des applications modernes et r\u00e9actives. Comprendre comment mettre en place&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6160"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6160\/revisions"}],"predecessor-version":[{"id":6161,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6160\/revisions\/6161"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3197"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}