array and object destructuring

src/App.js

@@ -1,25 +1,37 @@
-import logo from './logo.svg';
 import './App.css';
 
-function App() {
+// array destructuring
+
+//access third element using destructuring
+/* const [,,third] = ["jess","sapato","pé"]
+console.log(third) // pé */
+
+// access first element by position using destructuring
+/* const [first] = ["jess","sapato","pé"]
+console.log(first) //jess */
+
+//access by position
+/* const names = ["jess","sapato","pé"]
+console.log(names[0]) //jess */
+
+// object destructuring
+
+// using destructuring props
+function App({name}) {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>Hello,{name}</h1>
     </div>
   );
 }
 
+// using props
+/* function App(props) {
+  return (
+    <div className="App">
+      <h1>Hello,{props.name}</h1>
+    </div>
+  );
+} */
+
 export default App;

src/index.js

@@ -2,16 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App name="jess"/>
   </React.StrictMode>,
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();