React经典入门代码

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/83059089

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);