import ReactDOM ,{c} from 'react-dom';
//{c}是屬性, 相當於xxx.c

const { name, age } = props;  //ES6 //解構是物件的選擇賦值

理解:export

第一個  

import React from 'react';
import ReactDOM from 'react-dom';

const Headline = () => {
  return <h1>Welcome to React world.</h1>;
}

const Greeting = (props) => {
  return <p>You will love it {props.name} ({props.age})!</p>;
}
export const App = () => {
  return (
    <div>
      <Headline />
      <Greeting name="John" age={25} />
    </div>
  )
}
var mount = document.querySelector('#root');
ReactDOM.render(<App />, mount);
 

第二個  使用解構 const { name, age } = props; //ES6 

import React from 'react';
import ReactDOM ,{c} from 'react-dom';
//{c}是屬性, 相當於xxx.c
const Headline = () => {
  return <h1>Welcome to React world.</h1>;
}

const Greeting = (props) => {
  const { name, age } = props;  //ES6 //解構是物件的選擇賦值
  return <p>You will love it {name} ({age})!</p>;
}
export const App = () => {
  return (
    <div>
      <Headline />
      <Greeting name="John" age={25} />
    </div>
  )
}


var mount = document.querySelector('#root');
ReactDOM.render(<App />, mount);
 

第三個型別檢查

建立一個 

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

const Headline = () => {
  return <h1>Welcome to React world.</h1>;
};

const Greeting = props => {
  const { name, age } = props; //ES6
  console.log();
  return (
    <p>
      You will love it {name} ({age})!
    </p>
  );
  
};
export const App = () => {
  return (
    <div>
      <Headline />
      <Greeting name="John" age={25} />
    </div>
    
  );
};

Greeting.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number.isRequired
};

var mount = document.querySelector("#root");
ReactDOM.render(<App />, mount);