praticando react

2_FUNDAMENTOS/fundamentos/src/App.js

@@ -1,20 +1,22 @@
-import logo from "./logo.svg";
-import "./App.css";
-
+// Components
 import FirstComponent from "./components/FirstComponent";
 import TemplateExpressions from "./components/TemplateExpressions";
-import MyComponent from "./components/MyComponent";
 import Events from "./components/Events";
 import Challenge from "./components/Challenge";
+// Style
+import "./App.css";
+
+
+
 
 function App() {
   return (
     <div className="App">
-      <FirstComponent />
-      <TemplateExpressions />
-      <MyComponent />
-      <Events />
-      <Challenge />
+      <h1>Fundamentos REACT</h1>
+      <FirstComponent/>
+      <TemplateExpressions/>
+      <Events/>
+      <Challenge/>
     </div>
   );
 }

2_FUNDAMENTOS/fundamentos/src/components/Challenge.js

@@ -2,15 +2,14 @@ import React from "react";
 
 const Challenge = () => {
   const a = 10;
-  const b = 15;
+  const b = 20;
 
   return (
     <div>
       <p>A: {a}</p>
       <p>B: {b}</p>
-      <button onClick={() => console.log(a + b)}>Somar!</button>
+      <button onClick={() => console.log(a + b)}>Some A e B</button>
     </div>
   );
 };
-
 export default Challenge;

2_FUNDAMENTOS/fundamentos/src/components/Events.js

@@ -1,36 +1,25 @@
 const Events = () => {
-  const handleMyEvent = (e) => {
+  const handleMyEvents = (e) => {
     console.log(e);
-    console.log("Ativou o evento!");
   };
 
   const renderSomething = (x) => {
     if (x) {
-      return <h1>Renderizando isso!</h1>;
+      return <h1>X É VERDADEIRO</h1>;
     } else {
-      return <h1>Também posso renderizar isso!</h1>;
+      return <h1>X É FALSO</h1>;
     }
   };
 
   return (
     <div>
-      {/* evento */}
       <div>
-        <button onClick={handleMyEvent}>Clique aqui!</button>
+        <button onClick={handleMyEvents}>Clique Aqui!</button>
       </div>
-      {/* lógica no evento */}
       <div>
-        <button onClick={() => console.log("Clicou")}>
-          Clique aqui também!
-        </button>
-        <button
-          onClick={() => {
-            if (true) {
-              console.log("Isso não deve existir xD");
-            }
-          }}
-        >
-          Clica aqui, por favor!
+        {/*Aplicações mais simples, podem ser feitas diretamente, como no EXEMPLO ABAIXO! */}
+        <button onClick={() => console.log("Clique aqui TAMBÉM!!")}>
+          Clique Aqui também
         </button>
       </div>
       {renderSomething(true)}

2_FUNDAMENTOS/fundamentos/src/components/FirstComponent.js

@@ -1,15 +1,9 @@
-import MyComponent from "./MyComponent";
+const FirstComponent = () =>{
 
-const FirstComponent = () => {
-  // Um comentário
-  return (
-    <div>
-      {/* Um comentário no JSX */}
-      <h1>Título</h1>
-      <p className="text">Testando alguma classe</p>
-      <MyComponent />
-    </div>
-  );
-};
-
-export default FirstComponent;
+  return(
+  <div>
+    <h1>Meu FirstComponent</h1>
+    <p className="teste"> Meu texto no React!!</p>
+  </div>
+)}
+export default FirstComponent

2_FUNDAMENTOS/fundamentos/src/components/TemplateExpressions.js

@@ -1,17 +1,17 @@
-const TemplateExpressions = () => {
-  const name = "Matheus";
+const TemplateExpressions = () =>{
+
+  const name = "César"
   const data = {
-    age: 31,
-    job: "Programmer",
-  };
+    age: 32,
+    job: "developer",
+  }
 
-  return (
-    <div>
-      <h1>Olá {name}, tudo bem?</h1>
-      <p>Você atua como: {data.job}</p>
-      <p>{4 + 4}</p>
-    </div>
-  );
-};
+return(
+<div>
+  <h2>Olá {name}, tudo bem?</h2>
+  <p>Você tem: {data.age} anos, e trabalha como: {data.job}</p>
+</div>
+)
+}
 
-export default TemplateExpressions;
+export default TemplateExpressions