Skip to content

Latest commit

 

History

History
107 lines (78 loc) · 2.68 KB

readme.md

File metadata and controls

107 lines (78 loc) · 2.68 KB

01 Hello React

In this example we create our first react component and connect it with the DOM via react-dom.

We take a startup point sample 00 Boilerplate.

Summary steps:

  • Install react and react-dom libraries.
  • Install react and react-dom typescript definitions.
  • Update the index.html to create a placeholder for the react components.
  • Create a simple react component.
  • Wire up this component by using react-dom.

Prerequisites

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

Verify that you are running at least node v8.x.x and npm 5.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 of the 00 Boilerplate folder to an empty folder for this example.

  • Install the npm packages described in the ./package.json and verify that it works:

npm install
  • Install react and react-dom libraries as project dependencies.
npm install react react-dom --save
  • Install also the typescript definitions for react and react-dom but as dev dependencies.
npm install @types/react @types/react-dom --save-dev

./src/index.html

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
      <h1>Sample app</h1>
+     <div id="root"></div>
    </body>
  </html>
  • Create a simple react component (let's create it within a new file called hello.tsx`).

./src/hello.tsx

import * as React from 'react';

export const HelloComponent = () => {
  return (
    <h2>Hello component !</h2>
  );
}
  • Wire up this component by using react-dom under ./src/main.tsx (we have to rename this file extension from ts to tsx and replace the content).

./src/main.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { HelloComponent } from './hello';

ReactDOM.render(
  <HelloComponent/>,
  document.getElementById('root')
);

./webpack.config.js

  ...
  entry: [
-    './main.ts',
+    './main.tsx',
    '../node_modules/bootstrap/dist/css/bootstrap.css'
  ],
  ...
  • Execute the example:
npm start