02 Properties

In this sample we will introduce a basic React concept, handling properties.

We will add a username property and display it in the hello component.

We will take a startup point sample 01 Hello React:

Summary steps:

• hello stateless component: create a property that will hold the username value.

• Let's inform it from our parent control.

Prerequisites

Install Node.js and npm (v6.6.0) if they are not already installed on your computer.

Verify that you are running at least node v6.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions may produce errors.

Steps to build it

• Copy the content from 01 HelloReact and execute:

  npm install
  

• Let's update hello.tsx in order to reflect the new property added (userName) and display it using interpolation ({userName}):

import * as React from 'react';

- export const HelloComponent = () => {
+ export const HelloComponent = (props: {userName : string}) => {
  return (
-    <h2>Hello component !</h2> 
+    <h2>Hello user: {props.userName} !</h2>
  );
}

• Let's update main.tsx and inform the userName propery value:

  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import {HelloComponent} from './hello';

  ReactDOM.render(
-    <HelloComponent/>,
+    <HelloComponent userName="John" />,
    document.getElementById('root')
  );

• Let's test the sample:

npm start