JSX (Javascript XML)

[phymo]

Rules

1. Return a single root element; use () for multi-line return;
   • To return multiple elements from a component, wrap them with a single parent tag. <div>...</div>
   • If you don’t want to add an extra
     to your markup, you can write <> and </> instead; This empty tag is called a React fragment.
2. Close all the tags
3. camelCase all / most of the things! use className, since class is a reserved word.

use a JSX converter: https://transform.tools/html-to-jsx

[phymo]

Curly Braces

1. Using curly braces: A window into the JavaScript world.

   return (
   <img
     className="avatar"
     src={avatar}
     alt={description}
   />
   );

2. Using “double curlies”: CSS and other objects in JSX

   return (
   <ul style={{
     backgroundColor: 'black',
     color: 'pink'
   }}>
     <li>Improve the videophone</li>
     <li>Prepare aeronautics lectures</li>
     <li>Work on the alcohol-fuelled engine</li>
   </ul>
   );

   please notice that the CSS are written in camelCase

Orgnize your code with Object

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>
</div>

[phymo]

props

import { getImageUrl } from './utils.js';

function Avatar({ person, size }) {  // destructring
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

export default function Profile() {
  return (
    <div>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi', 
          imageId: 'YfeOqp2'
        }}
      />
      <Avatar
        size={80}
        person={{
          name: 'Aklilu Lemma', 
          imageId: 'OKS67lh'
        }}
      />
      <Avatar
        size={50}
        person={{ 
          name: 'Lin Lanying',
          imageId: '1bX5QH6'
        }}
      />
    </div>
  );
}

nested components

When you nest content inside a JSX tag, the parent component will receive that content in a prop called children. For example, the Card component below will receive a children prop set to and render it in a wrapper div:

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

However, props are immutable—a term from computer science meaning “unchangeable.” When a component needs to change its props (for example, in response to a user interaction or new data), it will have to “ask” its parent component to pass it different props—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.