3. Your First Component!

Note

Components

  • React components are entirely comprised of components. A component can be thought of as a UI element within an application, generally within your browser.
  • Components may be thought of as small self contained building blocks that may effectively be reused and combined within other to build up complete applications.
  • The layout, logic, and specific styles are all housed within the given self-contanied component.

Taking a look into app.js and a first component

  • The remainder of coding for this exercise will occur in the app.js file. Go ahead and open that one up in the Sublime text editor.

  • It should contain the following component:

    class ProductRegistry extends React.Component {
  render() {
    return (
      <div className='ui unstackable items'>
        Hello, I am your first React component!
      </div>
    );
  }
}

  • A React component is simply a JavaScript class, one which extends, or inherits from, the base React Component class

  • The React object is availble globally as the React library was in fact linked in the <head> of the index.html file:

    <script src="libraries/react.js"></script>

  • The class, which we will refer to as a component moving forward, ProductRegistry has only a single function, render(). This is a required function and is used to determine what the component will render within the browser.

  • However, the return value doesn’t look like traditional JavaScript, and you are right as we are actually using JSX (JavaScript eXtension syntax), an extension for JavaScript. JSX allows us to write the markup for our component views in a familiar, HTML-esq syntax.

  • Note the familiar looking <div> section within the return statement. These are the elements that will be rendered in the browser.

  • Also note that although this file is now linked in your index.html it is not currently displayed in the browser. The text “Hello, …” is not present

Rendering your component

  • You now have your first component defined and it is even linked in your index.html file… but it is not being rendered on the page… let’s fix that.

    <script src="app.js"></script>

  • Remember that content <div>? Yes, we want to render our JSX component within that <div> on our page.

  • Add the following lines at the bottom of your app.js file:

    ReactDOM.render(
  <ProductRegistry />,
  document.getElementById('content')
);

  • Save the file and have a look at your browser. Is a warm hello from your component present?

  • Great, you have rendered your first React component!

  • ReactDOM is a package that the React library provides to essentially allow direct interaction with the elements defined in your index.html.

  • Above you told React to locate the element on the current page(document) with the id content and to render the <ProductRegistry /> component within it. Telling React what you want to render and where you want to render it, and voila it appeared beneath your title as is defined in your index.html.

    Effectively resulting in the following:

    <div>
  <h1>Product Registry</h1>
  <div id="content">
    <ProductRegistry />
  </div>
</div>
https://raw.githubusercontent.com/Blockchain-Learning-Group/course-resources/master/product-registry-01/images/03-hello.png

Important

Understanding Babel and how our browser is able to understand your new JSX component.

Modern browsers’ execution engines do not natively understand the JSX language. JSX is an extension to standard JavaScript, which browsers do understand. We therefore need to translate this JSX code to standard JavaScript so our browser can understand it. Essentially your component is speaking Espanol while our browser only understands English.

Babel is here to solve this problem for us!

Babel is a JavaScript transpiler, or in more familiar English language a translator. Babel understands JSX and is capable of translating your JSX into standard JavaScript. You simply need to instruct the browser to use Babel prior to attemtping to execute the JSX code.

The Babel library has been included in your index.html:

<script src="libraries/babel-standalone.js"></script>

Finally the browser may be instructed to use Babel directly where the app.js file is linked in your index.html:

<script
  type="text/babel"
  data-plugins="transform-class-properties"
  src="app.js"
></script>