react笔记之如何创建组件

责编:menVScode 2017-07-08 17:06 阅读(718)

普通写法:

import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
	<div className='menu'>
		<div className='item'>home</div>
		<div className='item'>list</div>
		<div className='item'>about</div>
	</div>,
	document.getElementById('root')
);

组件的写法:

import React from 'react';
import ReactDom from 'react-dom';
class Menu extends React.Component{
	render(){
		return(
			<div className='menu'>
				<div className='item'>home</div>
				<div className='item'>list</div>
				<div className='item'>about</div>
			</div>
		)
	}
	
}
ReactDom.render(
	<Menu></Menu>,
	document.getElementById('root')
);

        先声明一个类,类的名字(Menu)就是组件组件的名字,然后这个类继承React.Component。其里面有一个render的方法,render方法里面return出jsx的结构,这个结构就是组件的内容。之后,我们通过<Menu></Menu>或者<Menu/>来调用组件。

import React from 'react';
import ReactDom from 'react-dom';
require('./common/style/main.css');
require('../semantic/dist/semantic.css');//引用的是semantic UI框架的css

class Menu extends React.Component{
	render(){
		return(
			<div className='ui menu'>
				<div className='item'>home</div>
				<div className='item'>list</div>
				<div className='item'>about</div>
			</div>
		)
	}
	
}
class Pic extends React.Component{
	render(){
		return(
			<div>
				<img className='img' src={require('./common/img/128H.jpg')} />
				<Menu />
			</div>
		)
	}
}
ReactDom.render(
	<div className='ui container'>
		<Menu></Menu>
		<Pic />
	</div>,
	document.getElementById('root')
);

        require()去引用css文件或者图片,其被执行的时候,在webpack.config.js找到格式规则和处理的方法,进行编译或者打包。require()引用的资源,会当作模块一样引入。


标签: 组件 react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码