02.React目录结构分析 、创建组件、 JSX语法、 绑定数据 绑定对象

原创
2019/01/13 17:00
阅读数 29


React目录结构  React创建组件

 ReactJSX语法

 React绑定数据 React绑定对象

React绑定属性( 绑定class  绑定style 图片)

一.manifest.json 文件简介:

    https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction

    
    允许将站点添加至主屏幕,是 PWA 提供的一项重要功能,当前 manifest.json 的标准仍属于草案阶段,Chrome 和 Firefox 已经实现了这个功能,微软正努力在 Edge 浏览器上实现,Apple 目前仍在考虑中

 

二.组件引用

1.renturn 后面加小括号

2.react组件里面的所有节点要被根节点包含

    Home.js

import React, { Component } from 'react';


class Home extends Component{


    constructor(){

        super();

        //react定义数据

        this.state={

            name:"张三",

            age:'30',

            userinfo:{

                username:"itying"
            }
        }
    }


    render(){

        return (
            <div>

                <h2>react组件里面的所有节点要被根节点包含</h2>
                <p>姓名:{this.state.name}</p>

                <p>年龄:{this.state.age}</p>


                <p>对象:{this.state.userinfo.username}</p>


            </div>
        )

    }
}



export default Home;

App.js

import React, { Component } from 'react';
import logo from './assets/images/logo.svg';
// import './assets/css/App.css';

//引入Home组件

import Home from './components/Home'


import News from './components/News'

class App extends Component {


  //render 模板        jsx
  render() {
    return (
      <div className="App">
         你好react  根组件
          
         <Home/>

         <News/>

      </div>
    );
  }
}

export default App;

super关键字:

    
    参考:http://www.phonegap100.com/thread-4911-1-1.html


    Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

    class Person {
          constructor (name) {
                this.name = name;
          }
    }

    class Student extends Person {
          constructor (name, age) {
                super(); // 用在构造函数中,必须在使用this之前调用
                this.age = age;
          }
    }

为什么官方的列子里面写个super(props):


    只有一个理由需要传递props作为super()的参数,那就是你需要在构造函数内使用this.props

那官方提供学习的例子中都是写成super(props),所以说写成super(props)是完全没问题的,也建议就直接这样写。


 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
1
分享
返回顶部
顶部