React学习第一篇

主体内容来源于菜鸟教程

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容

const element = <h1>Hello, world!</h1>;

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

将元素渲染到 DOM 中

//使用id标记DOM的根
<div id="example"></div>
//element是元素，也是一个对象
const element = <h1>Hello, world!</h1>;
//JSX 是一种在 React 组件内部构建标签的类 XML 语法。
//下面是内联方法载入，还有外联方法载入，就是JSX代码单独放在一个.jsx文件中，然后使用script标签引入
ReactDOM.render(
    element,
    document.getElementById('example')
);

创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props

class Clock extends React.Component {
  render() {
    return (
   //要展示的元素
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

练习：

var myStyle = {color:'red',textAlign:'center'}

class Name extends React.Component {
  render() {
    return <h1 style={myStyle}>网站名称：{this.props.name}</h1>;
  }
}
class Url extends React.Component {
  render() {
    return <h1>网站地址：{this.props.url}</h1>;
  }
}
class Nickname extends React.Component {
  render() {
    return <h1>网站地址：{this.props.nickname}</h1>;
  }
}

function App(props) {
    return (
        <div>
            <Name name={props.name}/>
            <Url  url={props.url}/>
            <Nickname  nickname={props.nickname}/>
        </div>
    );
}

多个属性的传入注意不用逗号或分号隔开而是空格符隔开:

ReactDOM.render(
     <App name={"菜鸟教程"} url={"http://www.runoob.com"} nickname={"Runoob"}/>,
    document.getElementById('example')
);

总结：
先学了vue,之后开始学的React，学的时候是对比学习，最直观感受是，React是把html和js写到了一起，借助了jsx（React 组件内部构建标签的类 XML 语法）
相同之处就是都含有组件的概念与意思在里面.
React感觉很奇妙的就是js里面可以写html可以引用css样式，在js里面也可以用方法名作为标签名来操作指定的元素和组件(构建标签类）。