ngohungphuc

@Component({
  selector: 'child',
  template: `
    <h1>{{data.firstname}}</h1>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent  {
  @Input() data;
}

ngohungphuc

<child [data]="data"></child>
<button (click)="onClick()">a</button> 

ngohungphuc

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  data = {

ngohungphuc

import React, {useState, useEffect} from 'react';

function Example({text, maxLength}) {
  const [hidden, setHidden] = useState(true);
  const [count, setCount] = useState(0);

  useEffect(() => {
   console.log(`You clicked ${count} times`);
  });

ngohungphuc

function Example({text, maxLength}) {
 // define hidden state default init value is true and 
 // setHidden function to update state
 const [hidden, setHidden] = useState(true);
 
 // on click we change the state of hidden and trigger re-render of the view
  return (
    <span>
      {hidden ? (
        <a onClick={() => setHidden(false)}> read more</a>

ngohungphuc

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me

ngohungphuc

<PackageReference Include="Selenium.Support" Version="3.141.0" />     
<PackageReference Include="Selenium.WebDriver" Version="3.141.0" />     
<PackageReference Include="SpecFlow" Version="3.0.213" />     
<PackageReference Include="SpecFlow.NUnit" Version="3.0.213" />     
<PackageReference Include="SpecFlow.NUnit.Runners" Version="3.0.213" />     
<PackageReference Include="SpecFlow.Tools.MsBuild.Generation" Version="3.0.213" />

ngohungphuc

//Then we just need to define our component like this
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: true };
  }

  render() {
    if (this.state.error) {
      // Simulate a JS error

ngohungphuc

class ErrorHandlerBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

ngohungphuc

<ErrorHandlerBoundary>
  <MyComponent />
</ErrorHandlerBoundary>