fabiobiondi

Appunti React

Dec 7th, 2021
522
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import "./styles.css";
  2. import "bootstrap/dist/css/bootstrap.min.css";
  3. import { Card } from "./components/Card";
  4.  
  5. const title = "My Profile";
  6.  
  7. function doSomething() {
  8.   console.log("do something");
  9. }
  10.  
  11. const doSomething2 = () => {
  12.   console.log("do something");
  13. };
  14.  
  15. const doSometing3 = () => {};
  16.  
  17. doSomething2();
  18.  
  19. export default function App() {
  20.   function openUrl(url) {
  21.     window.open(url);
  22.   }
  23.  
  24.   function alertMe() {
  25.     alert("alert me");
  26.     // window.alert(props.url)
  27.   }
  28.  
  29.   return (
  30.     <div>
  31.  
  32.       <Alert icon="fa fa-linkedin" iconClick={doSomething}>
  33.         bla bla
  34.       </Alert>
  35.  
  36.       <Card title="my Stats" icon="fa fa-bluetooth" iconClick={alertMe}>
  37.         chart!
  38.       </Card>
  39.  
  40.       <Card
  41.         title="My FB"
  42.         icon="fa fa-facebook"
  43.         iconClick={() => openUrl("https://www.facebook.com")}
  44.       >
  45.         bla bla
  46.       </Card>
  47.  
  48.       <Card
  49.         title="My Linkedin"
  50.         icon="fa fa-linkedin"
  51.         iconClick={function () {
  52.           openUrl("https://www.linkedin.com");
  53.         }}
  54.       >
  55.         bla bla
  56.       </Card>
  57.  
  58.     </div>
  59.   );
  60. }
  61.  
  62.  
  63.  
  64.  
  65. // ===========================
  66.  
  67.  
  68. export function Card(props) {
  69.   return (
  70.     <div className="card">
  71.       <div className="card-header">
  72.         {props.title}
  73.         <div className="pull-right">
  74.           <i className={props.icon}
  75.            onClick={props.iconClick} />
  76.         </div>
  77.       </div>
  78.       <div className="card-body">{props.children}</div>
  79.     </div>
  80.   );
  81. }
  82.  
RAW Paste Data