Code 401: Class 26 - Component Based UI

---

Questions

1. Name 5 JS UI frameworks (other than React)

• Angular
• jQuery
• Bootstrap
• Sencha Ext JS
• Vue

1. Difference between a framework and a library?

• A library contains a methods that can be implemented to accomplish a task where as a framework defines how an application is created.

Vocabulary

• Rendering Parsing HTML elements and converting them to DOM nodes
• Templates A structural scaffold for rendering variable content to the DOM
• State Object where property values are stored for a component

Read: Hello World React

• Offers a link to a practical tutorial
• This is the official React Documentation

Read: Introducing JSX

• Example JSX: const element = <h1>Hello, world!</h1>
  • Not a string or HTML
• no "" around {}
  • use'' for string values and {} for expressions, but not both in the same attribute
• React Dom uses camelCase naming
• JSX tags may nest children

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

• Example React Object

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!',
  }
};

Read: Rendering Elements

• “Elements are the smallest building blocks of React”
• Example of passing an element to render a React element

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

• Elements are immutable

Bookmark: Sass Cheat Sheet

Bookmark: React.js Cheat Sheet

Bookmark: React Cheat Sheet

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down