{"id":5898,"date":"2024-09-05T20:14:18","date_gmt":"2024-09-05T20:14:18","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\/"},"modified":"2024-09-05T20:14:22","modified_gmt":"2024-09-05T20:14:22","slug":"maitriser-objets-javascript-developper-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/maitriser-objets-javascript-developper-react\/","title":{"rendered":"2.4 Ma\u00eetriser les Objets en JavaScript pour D\u00e9velopper avec React"},"content":{"rendered":"\n<p><strong>Ma\u00eetriser les Objets en JavaScript pour D\u00e9velopper avec React<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur souhaitant cr\u00e9er des applications web interactives et robustes. Comprendre comment manipuler et utiliser les objets en JavaScript de mani\u00e8re efficace vous permettra d&rsquo;exploiter pleinement la puissance de React. Apprenons pas \u00e0 pas comment ma\u00eetriser les objets en JavaScript avec des exemples concrets de code et des applications pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Objets en JavaScript<\/strong><\/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\/706050277?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>Les objets en JavaScript sont des structures de donn\u00e9es essentielles permettant de stocker des collections de valeurs telles que des propri\u00e9t\u00e9s et des m\u00e9thodes. En les utilisant dans le d\u00e9veloppement avec React, vous pouvez g\u00e9rer efficacement l&rsquo;\u00e9tat et les interactions de vos composants. Voici un guide d\u00e9taill\u00e9 pour mieux comprendre et manipuler les objets en JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Objets en JavaScript<\/h3>\n\n\n\n<p>La cr\u00e9ation d&rsquo;objets en JavaScript peut se faire de diff\u00e9rentes fa\u00e7ons. Utilisons la m\u00e9thode de notation litt\u00e9rale pour cr\u00e9er un objet simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const person = {\n    name: 'Alice',\n    age: 25,\n    greet: function() {\n        console.log('Hello, I am ' + this.name);\n    }\n};\n\nperson.greet(); \/\/ Output: \"Hello, I am Alice\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der et Modifier les Propri\u00e9t\u00e9s des Objets<\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s des objets peuvent \u00eatre acc\u00e9d\u00e9es et modifi\u00e9es en utilisant la notation par point ou par crochets. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>console.log(person.name); \/\/ Output: \"Alice\"\nconsole.log(person['age']); \/\/ Output: 25\n\nperson.age = 26;\nconsole.log(person.age); \/\/ Output: 26\n\nperson['name'] = 'Bob';\nconsole.log(person.name); \/\/ Output: \"Bob\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Supprimer des Propri\u00e9t\u00e9s<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement ajouter ou supprimer des propri\u00e9t\u00e9s d&rsquo;un objet \u00e0 tout moment. Voici quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>person.job = 'Developer';\nconsole.log(person.job); \/\/ Output: \"Developer\"\n\ndelete person.job;\nconsole.log(person.job); \/\/ Output: undefined\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Objets Imbriqu\u00e9s et It\u00e9ration<\/h3>\n\n\n\n<p>Les objets peuvent contenir d&rsquo;autres objets, cr\u00e9ant ainsi des structures de donn\u00e9es complexes. Pour it\u00e9rer sur les propri\u00e9t\u00e9s d&rsquo;un objet, on peut utiliser la boucle <code>for...in<\/code>. Voyons cela en action :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const company = {\n    name: 'Tech Corp',\n    location: 'Paris',\n    employees: {\n        alice: {\n            position: 'Developer',\n            age: 30\n        },\n        bob: {\n            position: 'Manager',\n            age: 35\n        }\n    }\n};\n\nfor (let employee in company.employees) {\n    console.log(employee + ' is a ' + company.employees[employee].position);\n}\n\/\/ Output: \n\/\/ \"alice is a Developer\"\n\/\/ \"bob is a Manager\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Objets avec React<\/h3>\n\n\n\n<p>Dans le d\u00e9veloppement avec React, les objets sont souvent utilis\u00e9s pour g\u00e9rer l&rsquo;\u00e9tat du composant. Voici un exemple simple montrant comment g\u00e9rer l&rsquo;\u00e9tat d&rsquo;un composant \u00e0 l&rsquo;aide d&rsquo;un objet :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nconst UserProfile = () => {\n    const [user, setUser] = useState({\n        name: 'Alice',\n        age: 25,\n        location: 'Paris'\n    });\n\n    const updateUser = () => {\n        setUser(prevState => ({\n            ...prevState,\n            location: 'London'\n        }));\n    };\n\n    return (\n        <div>\n            <h1>{user.name}<\/h1>\n            <p>Age: {user.age}<\/p>\n            <p>Location: {user.location}<\/p>\n            <button onClick={updateUser}>Move to London<\/button>\n        <\/div>\n    );\n};\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion de l&rsquo;\u00c9tat avec des Objets Complexes<\/h3>\n\n\n\n<p>Lorsque l&rsquo;\u00e9tat de votre composant implique des objets imbriqu\u00e9s complexes, vous devrez peut-\u00eatre utiliser des techniques avanc\u00e9es pour s&rsquo;assurer que les mises \u00e0 jour de l&rsquo;\u00e9tat soient faites de mani\u00e8re immuable. Voici comment vous pouvez g\u00e9rer cela :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nconst App = () => {\n    const [state, setState] = useState({\n        user: {\n            name: 'Bob',\n            details: {\n                age: 32,\n                address: {\n                    city: 'Paris',\n                    street: '123 Main St'\n                }\n            }\n        }\n    });\n\n    const updateCity = () => {\n        setState(prevState => ({\n            ...prevState,\n            user: {\n                ...prevState.user,\n                details: {\n                    ...prevState.user.details,\n                    address: {\n                        ...prevState.user.details.address,\n                        city: 'London'\n                    }\n                }\n            }\n        }));\n    };\n\n    return (\n        <div>\n            <p>City: {state.user.details.address.city}<\/p>\n            <button onClick={updateCity}>Move to London<\/button>\n        <\/div>\n    );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser les Performances avec les Objets en React<\/h3>\n\n\n\n<p>La manipulation fr\u00e9quente de l&rsquo;\u00e9tat contenant des objets en React peut avoir un impact sur les performances. Une strat\u00e9gie efficace consiste \u00e0 utiliser des techniques de m\u00e9mo\u00efsation et \u00e0 minimiser les re-rendus inutiles. Voici un aper\u00e7u :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, memo } from 'react';\n\nconst UserDisplay = memo(({ user }) => {\n    console.log('UserDisplay re-rendered');\n    return (\n        <div>\n            <h1>{user.name}<\/h1>\n            <p>{user.details.address.city}<\/p>\n        <\/div>\n    );\n});\n\nconst App = () => {\n    const [user, setUser] = useState({\n        name: 'Alice',\n        details: {\n            age: 25,\n            address: {\n                city: 'Paris'\n            }\n        }\n    });\n\n    const updateCity = () => {\n        setUser(prevState => ({\n            ...prevState,\n            details: {\n                ...prevState.details,\n                address: {\n                    ...prevState.details.address,\n                    city: 'London'\n                }\n            }\n        }));\n    };\n\n    return (\n        <div>\n            <UserDisplay user={user} \/>\n            <button onClick={updateCity}>Move to London<\/button>\n        <\/div>\n    );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation des Objets en React<\/h3>\n\n\n\n<p>Pour approfondir votre compr\u00e9hension des objets JavaScript React et de leur utilisation avec React, voici quelques exemples avanc\u00e9s.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion de Formulaires Complexes<\/h4>\n\n\n\n<p>Lorsque vous g\u00e9rez des formulaires complexes avec React, chaque champ peut \u00eatre repr\u00e9sent\u00e9 par une propri\u00e9t\u00e9 d&rsquo;un objet d&rsquo;\u00e9tat. Voici comment g\u00e9rer un formulaire avec plusieurs champs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nconst RegistrationForm = () => {\n    const [formData, setFormData] = useState({\n        username: '',\n        email: '',\n        password: ''\n    });\n\n    const handleChange = (event) => {\n        const { name, value } = event.target;\n        setFormData({\n            ...formData,\n            [name]: value\n        });\n    };\n\n    const handleSubmit = (event) => {\n        event.preventDefault();\n        console.log(formData);\n    };\n\n    return (\n        <form onSubmit={handleSubmit}>\n            <label>\n                Username:\n                <input type=\"text\" name=\"username\" value={formData.username} onChange={handleChange} \/>\n            <\/label>\n            <br \/>\n            <label>\n                Email:\n                <input type=\"email\" name=\"email\" value={formData.email} onChange={handleChange} \/>\n            <\/label>\n            <br \/>\n            <label>\n                Password:\n                <input type=\"password\" name=\"password\" value={formData.password} onChange={handleChange} \/>\n            <\/label>\n            <br \/>\n            <button type=\"submit\">Register<\/button>\n        <\/form>\n    );\n};\n\nexport default RegistrationForm;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Synchronisation de l&rsquo;\u00c9tat Global<\/h4>\n\n\n\n<p>Avec React, vous pouvez synchroniser l&rsquo;\u00e9tat global \u00e0 travers diff\u00e9rents composants en utilisant des biblioth\u00e8ques de gestion de l&rsquo;\u00e9tat comme Redux. Voici un exemple simple montrant comment int\u00e9grer Redux avec des objets :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React from 'react';\nimport { createStore } from 'redux';\nimport { Provider, useDispatch, useSelector } from 'react-redux';\n\n\/\/ Actions\nconst updateUser = (user) => ({\n    type: 'UPDATE_USER',\n    payload: user\n});\n\n\/\/ Reducer\nconst initialState = {\n    user: {\n        name: '',\n        age: null\n    }\n};\n\nconst rootReducer = (state = initialState, action) => {\n    switch (action.type) {\n        case 'UPDATE_USER':\n            return {\n                ...state,\n                user: action.payload\n            };\n        default:\n            return state;\n    }\n};\n\n\/\/ Store\nconst store = createStore(rootReducer);\n\nconst UserDisplay = () => {\n    const user = useSelector(state => state.user);\n    return (\n        <div>\n            <h1>{user.name}<\/h1>\n            <p>Age: {user.age}<\/p>\n        <\/div>\n    );\n};\n\nconst App = () => {\n    const dispatch = useDispatch();\n    const updateUserState = () => {\n        dispatch(updateUser({ name: 'Alice', age: 25 }));\n    };\n\n    return (\n        <div>\n            <UserDisplay \/>\n            <button onClick={updateUserState}>Update User<\/button>\n        <\/div>","protected":false},"excerpt":{"rendered":"<p>Ma\u00eetriser les Objets en JavaScript pour D\u00e9velopper avec React est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur souhaitant cr\u00e9er des applications web interactives et robustes. Comprendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3223,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5898","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\/5898","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=5898"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5898\/revisions"}],"predecessor-version":[{"id":5899,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5898\/revisions\/5899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3223"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}