React Create a New Component

Continuing from the first post...

Open Visual Studio Code(VSC) to the same folder as before.

In the 'src' folder create a new file named:

helloMessage.js

Paste this code in:

import React from 'react';
export default class HelloMessage 
  extends React.Component {
   render() {
     return 
   <div> 
      Hello 
      {this.props.name}
   </div>
  }
}

Don't forget the 'export default' bit.

Notice that in React, the render function contains HTML? That's unique to React. This syntax is referred to as JSX

JSX just works and probably has something to do with this code...

extends React.Component

and that VSC shows no errors because the TypeScript language service.

Finally the compiler named Babel allows the content above to be served as valid HTML.

The Class Name
The class name doubles as the new HTML tag name shown here:

<HelloMessage 
    name="Test">
</HelloMessage>

But we can't use it prior to importing it into the component using it.

import { HelloMessage } 
  from "./helloMessage";

Notice the component name has a captial "H" and "M" but the file name has a lowercase "h". They can both be the same case. We pick the lower "h" for the filename to demark a file name from a component name.

Change the app.js file to look like this

import { HelloMessage } from "./helloMessage";
import "./App.css";

function App() {
  function test(){return `Time is: ${new Date().toTimeString()}`}
  function test2(){return `Seconds: ${new Date().getSeconds()}`}
  function test3(){return `MilliSeconds ${new Date().getMilliseconds()}`}
  return (
    <div>
      <HelloMessage name={test()}></HelloMessage>
      <HelloMessage name={test2()}></HelloMessage>
      <HelloMessage name={test3()}></HelloMessage>
      <HelloMessage name="Test3"></HelloMessage>  
    </div>
  );
}

export default App;

The code above shows how to combine JavaScript functions with the HTML. It's our first show of accessing JavaScript from HTML.

Learned

• React uses the term 'component'

• Components inherit from React.Component via the extends keyword.

• The component name becomes the HTML tag name.

• To use a new component, it must be imported first.

• JSX mixes both JavaScript and html

• File name and component name conventions are important.

This overall pattern of keeping components focused on one concern is the beauty of React. It simply fosters small reusable parts.

Note
The backticks ` used above allow us to use string interpolation. A very cool thing for putting live data inside a string.

JWP2021 React Components