这两天突然想学习一下和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'
写这篇帖子的初衷是想着对自己的知识的整理,也为了方便其他有兴趣的小伙伴们学习。
额,目前就说到这里,还有很多东西没整理清楚,等我真正理解了之后整理一下思路再来写帖子好了。。
这篇帖子还有很多东西没有讲到,比如生命周期,属性什么的。
如果有疑问或者想学的小伙伴可以下方留言。
我是海星吧,咱们下篇帖子再见。