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 -v
andnpm -v
in a terminal/console window. Older versions may produce errors.
-
Copy the content of the
00 Boilerplate
folder to an empty folder for the sample. -
Install the npm packages described in the ./package.json and verify that it works:
npm install
- Install
react
andreact-dom
libraries as project dependencies.
npm install react react-dom --save
- Install also the typescript definitions for
react
andreact-dom
but 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.tsx
insrc
folder).
import * as React from "react";
export const HelloComponent = () => {
return <h2>Hello component !</h2>;
};
- Wire up this component by using
react-dom
under ./src/index.tsx (we have to rename this file extension fromts
totsx
and 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.ts
to./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 start
We 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