- Install the Dev Dependencies
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
| # Project Setup | |
| Create a directory and run the following command. | |
| ```sh | |
| npm init | |
| ``` | |
| For this tutorial, I will be adding an index.js file to the `src` folder, and this will be our entry point. | |
| Our file directory should look like this. |
| const data = { | |
| "people":[ | |
| { | |
| "f_name":"john", | |
| "l_name":"doe", | |
| "sequence":"0", | |
| "title":"president", | |
| "url":"google.com", | |
| "color":"333333" | |
| }, |
| import React, {Component} from 'react'; | |
| import * as ml5 from 'ml5'; | |
| export default class App extends Component { | |
| state={ | |
| buttonText: 'Click', | |
| imageUrl: '', | |
| ready: false, | |
| predictionLabel: '', | |
| predictionConfidence: '', |
| const template = document.createElement('template'); | |
| template.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| } | |
| button { | |
| border: 1px solid black; | |
| cursor: pointer; | |
| } |
| const template = document.createElement('template'); | |
| template.innerHTML = ` | |
| <style> | |
| :host { | |
| display: block; | |
| text-align: center; | |
| } | |
| button { | |
| border: 2px solid blue; | |
| cursor: pointer; |
| import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; | |
| import { FormGroup, FormControl } from '@angular/forms'; | |
| @Component({ | |
| selector: 'hero-form', | |
| templateUrl: './hero-form.component.html', | |
| styleUrls: ['./hero-form.component.css'] | |
| }) | |
| export class HeroFormComponent implements OnInit { |
| const fs = require('fs'); | |
| const requestHandler = (req, res) => { | |
| const url = req.url; | |
| const method = req.method; | |
| if (url === '/') { | |
| res.write('<html>'); | |
| res.write('<head><title>Enter Message</title></head>'); | |
| res.write( | |
| '<body><form action="/message" method="POST"><input type="text" name="message"><button type="submit">Send</button></form></body>' |
| :root { | |
| --timeout: 500ms; | |
| --list-item-max-height: 30px; | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0 10px; | |
| } |
| import React, {Component} from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import uuid from 'uuid'; | |
| import './index.css'; | |
| class App extends Component { | |
| heroes = [ | |
| { | |
| name: "Batman", | |
| id: uuid(), |