react框架的学习。

海星吧 2019-8-14 5566

这两天突然想学习一下和vue.js类似的react.js这个框架(虽然说vue是仿照react开发出的,不过讲道理还是vue简单学一些。)

recat的脚手架推荐使用

create-react-app

安装:npm i -g create-react-app //这里有写过cnpm镜像的就用cnpm不用我说了。

创建一个react项目:打开一个文件夹,用终端-'比如cmd.exe’,写入create-react-app my-demo   ---这里的my-demo 是项目名称


每一个js文件都可以是一个页面。这是我对react的看法,它可以在js文件中写html标签。

import React, { Component } from 'react'


export default class Home extends Component {

   // eslint-disable-next-line no-useless-constructor

constructor(props){

super(props);

       this.state={

msg:'this is a home.js',

title:'this is a title'

}

}

render() {

       return (

<div>

<h2>{this.state.msg}</h2>

<div title='123456'>我是一个div</div>

<div title={this.state.title}>我是一个div</div>

</div>

)

}

}


上面是复制的代码。

首先第一行的import React, { Component } from 'react'这是引入react,

            export default class Home extends Component {} 

export default是ex6的,对外输出模块。  class 文件名字 extends Component{}

如果这里不写export default的话,可以在文件最后面写上  export default 文件名字; 来对外输出模块。


constructor(props){ super (props) }

constructor 是react.js文件中必要的方法,如果你没有写上这个方法,它会默认添加。也就是说你写不写它,它都会有这个方法。

如果写了constructor的话,就必须写super(),必须写super(),必须写super(),

super() 必须写在第一行,跟java里面的super规则是一样的。(应该吧。)

有了super() 你的this 才能在组件中使用,否则你在组件中写的所有this都会报错。

这里具体可以看这个文档:https://www.cnblogs.com/faith3/p/9219446.html


render() {return()}

这个函数是表示让页面展示的,html标签就是写在里面的,不过得用"return( <html></html> )" ,return后面是大括号不是 ‘{}’花括号


在react.js和vue不同的是,vue的结构分工明确,而且在 .vue文件中是可以写css的,react.js则是需要引用外部的css,

比如“import ‘./App.css’” 这样子。//这是es6的写法,不会的去找教程。

找教程不知道点我吗?//这套视频是vue的,有讲es6。不过这个视频的项目有坑,慎踩。


如果要使用bootstrap这个css模板的话,

打开项目文件夹

npm/cnpm i bootstrap --save

下载之后在index.js文件中引入

import 'bootstrap/dist/css/bootstrap.min.css'


写这篇帖子的初衷是想着对自己的知识的整理,也为了方便其他有兴趣的小伙伴们学习。

额,目前就说到这里,还有很多东西没整理清楚,等我真正理解了之后整理一下思路再来写帖子好了。。

这篇帖子还有很多东西没有讲到,比如生命周期,属性什么的。

如果有疑问或者想学的小伙伴可以下方留言。


我是海星吧,咱们下篇帖子再见。



弱鸡程序员年底还在加班
最新回复 (3)
  • 欧派兽 2019-8-14
    0 2
    奖励二级精华
    1:管理员给你移区后会显示移到了你之前发帖的区。 2:点击我作为楼主发帖时一楼下的图片签名,可以跳转到站规教程贴。 3:多次水贴水回复会封号哦? 4:不知道回什么的时候就点“里世界专属”,一键随机生成几种回复内容。 5:祝你在里世界玩得愉快!
  • 浅井下 2019-8-14
    0 3
    嗯嗯,秒啊 ,喵啊。
    玛丽,我的生命之光欲望之火罪恶挚爱灵魂。
  • 海星吧 2019-8-15
    0 4
    差点忘了,  如果是在最后面用 export default 暴露文件名的话,那么前面的 extends Component{}就要写成extends React.Component
    弱鸡程序员年底还在加班
    • ACG里世界
      5
          
返回
发新帖