React如今已经非常流行了,不论你去哪里进行面试web前端开发,面试官都会问你会不会react、vue、angularjs之类的。搞得好像作为一个前端开发者,必会的东西就是jQuery、react、vue、angularjs、CSS3、HTML5、nodejs等等技术。工作的需要,自己没有办法不去努力学习。因此,下面我们就一起来学习下react吧,如果你还不知道如何在nodejs下配置react开发环境,那么请看我这篇文章《ReactJS环境搭建》
本系列课程都是使用ES6进行开发,因此你需要了解相应的ES6基本知识
一、安装React Developer Tools
建议大家都使用chrome浏览器进行安装,下载地址:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi,如果打不开的童鞋,请自行翻墙(更改hosts,或者使用goproxy)。
二、创建一个react组件
react组件:其实就是一个js文件。因此,我们可以将一个页面分为很多个不同的组件,比如header组件、body组件以及footer组件,正如你使用div+css进行布局一样。
1、在src/components目录下,新建Header.js、Body.js、Foot.js这三个文件,并且删除原来的main.js
Header.js中,打入下面的代码:
'use strict';
require('styles/App.css');
import React from 'react';
class Header extends React.Component{
render(){
return(
);
}
}
export {Header as default}
2、Body.js代码
'use strict';
import React from 'react';
class Body extends React.Component{
render(){
return(
);
}
}
export {Body as default}
3、Foot.js代码
'use strict';
import React from 'react';
class Foot extends React.Component{
render(){
return(
);
}
}
export {Foot as default}
4、整合
现在三个组件的代码都完成了,可是我们需要将3个组件整合到一起,并在浏览器端输出三个组件的所有代码,因此,我们需要在Header.js中使用import来导入相应的组件
import Body from 'Body';
import Foot from 'Foot';
并且在需要的地方使用组件,最终的Header.js代码如下:
'use strict';
require('styles/App.css');
import React from 'react';
import Body from 'Body';
import Foot from 'Foot';
class Header extends React.Component{
reden(){
render(