跟我一起学习React(一)

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 Developer Tools
React Developer Tools

二、创建一个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(
     <div className="main">
      <header>
        //切记:在renden中使用div的class属性,必须要使用className来设置,如下:
        <div className="top">This is Header</div>
      </header>
     </div>
    );
  }
}
export {Header as default}

2、Body.js代码

'use strict';
import React from 'react';
class Body extends React.Component{
  render(){
    return(
      <div id="isbody">This is body</div>
    );
  }
}
export {Body as default}

3、Foot.js代码

'use strict';
import React from 'react';
class Foot extends React.Component{
  render(){
    return(
      <footer>This is footer</footer>
    );
  }
}
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(
      <div className="main">
      <header>
        <div className="top">This is Header</div>
      </header>
        <Body/>
        <Foot/>
      </div>
    );
  }
}
export {Header as default}

5、输出浏览器
我们现在需要打开src/index.js,将里面的内容修改下

import App from './components/Main';//删除这句,增加如下一句代码
import Header from './components/Header';
//然后再修改如下的语句
ReactDOM.render(<App />, document.getElementById('app'));
//将<App />修改为<Header />

三、效果

请自己在App.css中增加相关样式。

React Developer Tools中显示的代码效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注