Skip to content

Component Based UI

Jump to bottom
ALL edited this page Dec 9, 2019 · 2 revisions

Component Based UI

React Hello World

  • React is a JavaScript library

      `<script src="https://unpkg.com/react@16/umd/react.production.min.js" 
     crossorigin></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" 
     crossorigin> 
   </script>`

Introducing JSX

  • JSX is a syntax extension to JavaScript

    • Use it with React to describe what the UI should look like
    • JSX produces React “elements”

  • React embraces the fact that rendering logic is inherently coupled with other UI logic:

    • How events are handled
    • How the state changes over time
    • How the data is prepared for display

  • You can put any valid JavaScript expression inside the curly braces in JSX

    `const element = <h1>Hello, {name}</h1>`

  • After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects

    • You can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions

  • Babel compiles JSX down to React.createElement() calls

    `const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!');`

Rendering Elements

  • Elements are the smallest building blocks of React apps

  • An element describes what you want to see on the screen

  • Applications built with just React usually have a single root DOM node

    • If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like

  • To render a React element into a root DOM node, pass both to ReactDOM.render()

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

  • React elements are immutable

    • Once you create an element, you can’t change its children or attributes

  • With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render()

  • React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state

Additional Resources:

  • SASS

    • Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance

    • Running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css

    • If you wanted to watch (instead of manually build) your input.scss file, you'd just add the watch flag to your command, like so:

      sass --watch input.scss output.css

Bookmark:

Clone this wiki locally