In this sample we will create our first react component and connect it with the DOM via react-dom.
We will 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.
Install Node.js and npm (v8.9.4 or higher) 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 -vandnpm -vin a terminal/console window. Older versions may produce errors.
-
Copy the content of the
00 Boilerplatefolder to an empty folder for the sample. -
Install the npm packages described in the ./package.json and verify that it works:
npm install- Install
reactandreact-domlibraries as project dependencies.
npm install react react-dom --save- Install also the typescript definitions for
reactandreact-dombut as dev dependencies.
npm install @types/react @types/react-dom --save-dev- Update the ./src/index.html to create a placeholder for the react components.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="well">
<h1>Sample app</h1>
+ <div id="root"></div>
</div>
</body>
</html>
- Create a simple react component (let's create it within a new file called
hello.tsxinsrcfolder).
import * as React from "react";
export const HelloComponent = () => {
return <h2>Hello component !</h2>;
};- Wire up this component by using
react-domunder ./src/index.tsx (we have to rename this file extension fromtstotsxand replace the content).
- document.write('Hello from index.ts!');
+ import * as React from 'react';
+ import * as ReactDOM from 'react-dom';
+ import { HelloComponent } from './hello';
+ ReactDOM.render(
+ <HelloComponent/>,
+ document.getElementById('root')
+ );-
Delete the file main.ts we are not going to need it anymore.
-
Modify the ./webpack.config.js file and change the entry point from
./main.tsto./index.tsx.
...
module.exports = {
context: path.join(basePath, 'src'),
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
entry: ["@babel/polyfill",
- "./main.ts"],
+ "./index.tsx"],
output: {
path: path.join(basePath, "dist"),
filename: "bundle.js"
},- Execute the example:
npm startWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
Basefactor, consultancy by Lemoncode provides consultancy and coaching services.
Lemoncode provides training services.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend