First install yarn.
You can run the application by issuing the following commands at the root of the project in your terminal window:
$ yarn install
$ yarn startThis project was bootstrapped with Create React App.
Find information on how to perform common tasks in this guide.
$ yarn global add create-react-app
$ create-react-app hello-react
$ cd hello-react
$ yarn installVaadin components support modern browsers and IE11, so the browserslist section
in package.json should be updated to look like this:
"browserslist": [
"last 2 versions",
"not dead",
"ie 11",
"not op_mini all"
]$ yarn add @vaadin/vaadin-core
$ yarn add @webcomponents/webcomponentsjs- Install the utility to copy polyfills:
$ yarn add vendor-copy- Update
scriptssection inpackage.jsonand add the line:
"postinstall": "vendor-copy"- Add the following section to
package.json:
"vendorCopy": [
{
"from": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
"to": "public/vendor/custom-elements-es5-adapter.js"
},
{
"from": "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
"to": "public/vendor/webcomponents-bundle.js"
}
],- Open
public/index.htmland add the following lines in the<head>section:
<script src="%PUBLIC_URL%/vendor/webcomponents-bundle.js"></script>
<script>if (!window.customElements) { document.write('<!--'); }</script>
<script src="%PUBLIC_URL%/vendor/custom-elements-es5-adapter.js"></script>
<!--! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->- Make sure the scripts are copied:
$ yarn postinstallOpen src/App.js and do the following modifications.
- Import Vaadin components:
import '@vaadin/vaadin-button/vaadin-button.js';
import '@vaadin/vaadin-text-field/vaadin-text-field.js';- Define a constructor for the App component:
constructor(props) {
super(props);
this.state = {greeting: "React App"};
this.clicked = this.clicked.bind(this);
this.textField = React.createRef();
}- Update the
rendermethod of the App component to return HTML:
<div className="App">
<vaadin-text-field ref={this.textField} placeholder="Type Something"></vaadin-text-field>
<vaadin-button onClick={this.clicked}>Click Me!</vaadin-button>
<h2>Hello {this.state.greeting}!</h2>
</div>- Define the click event handler:
clicked() {
this.setState({greeting: this.textField.current.value})
}