react-component

What Are Components?

• The core building blocks of React applications

• Views that represent some chunk of the element tree

• Generate elements during rendering

• Can take inputs from parent components

  • Values passed in from the outside are called props (short for "properties")

• Can generate a lot more than HTML

  • But we'll use that since we're doing this tutorial in the browser

JSX

• Allows HTML-style tags to be freely mixed with JavaScript

• Not part of JavaScript

  • JSX is onverted into calls to React.createElement during the build step

• Can be created anywhere a JavaScript expression can be

  • Because it gets turned into pure JavaScript

Creating a Component

• Create a basic "hello world" component

function Greet() {
  return <div>Hello world!</div>;
}

• Mostly write this these days using:

  • A "fat arrow" function (which has more sensible treatment of this)

  • Which is assigned to a name

  • Which is a constant rather than a variable

const Greet = () => {
  return <div>Hello world!</div>;
}

• In simple cases, can go even further and simply define the return expression:

const Greet = () => <div>Hello world!</div>;

• In all cases, Greet is just a function returning text

  • JSX-to-JavaScript compilation translates <div>...</div> into return value

• Add an export statement at the bottom to make Greet visible to other modules

  • Part of the new-style ES6 module syntax

  • Which isn't yet supported by Node for server-side applications...

export default Greet;

• Using a default export for components is a React convention

  • Greet.js will (almost always) export Greet and only Greet

ReactDOM

• Provides a way for elements created by React to be injected into the DOM

• Implementing a React-to-DOM rendering path decouples React elements from the underlying platform

  • So React applications can target platforms that don't use a DOM

• render inserts the rendered component to the matched element

Props

• Props (properties) are data passed into a component from a parent component

• Used to dynamically change what a component renders or how it behaves

• Component definition:

export const Greet = (props) => <div>Hello {props.company}</div>;

• The curly braces in the return value interpolate the value of props.company into the div

  • Embedded expressions are automatically escaped

  • Any JavaScript expression works, even function calls

  • Be careful not to call functions with side-effects

• Parent component uses:

<Greet company="Rangle.io" />

• Result:

<div>Hello Rangle.io</div>

Props, Destructuring and JSX

export const Greet = ({ company }) => <div>Hello {company}</div>;

• We can use destructuring assignment with {} to extract specific fields from objects

  • Not the same as the use of {} for interpolation

Styling

• Have to use className instead of class to specify that property in JSX

  • Because class is a reserved word in ES6 JavaScript

• We often use Tachyons for styling rather than older packages like Bootstrap

  • But anything will work