react笔记之组件之间的关系及目录结构

责编:menVScode 2017-07-08 17:54 阅读(798)

        组件的内容和样式可以不一样,但至少要写好目录结构和组件之间的关系。

        注意:后面学习过程中,都是基于下面这个小案例来进行的。

QQ截图20170708173513

components-nav-nav.js

import React,{Component} from 'react';
class Nav extends Component{
	render(){
		return(
			<div className='ui menu'>
				<div className='item'>home</div>
				<div className='item'>list</div>
				<div className='item'>about</div>
			</div>
		)
	}
	
}
export default Nav;

components-card-Card.js

import React,{Component} from 'react';
export default class Card extends Component{
	render(){
		return(
			<div className='ui card'>
				<div className='image'>
					<img src={require('img/m01.png')} />
				</div>
				<div className='content'>
					<div className='header'>Matt</div>
					<div className='meta'>
						<a href=''>Friends</a>
					</div>
					<div className='description'>Matthew</div>
				</div>
				<div className='extra content'>
					<span className='fight floated'>Joined in 2013</span>
					<span>
						<i className='empty heart icon'></i>78 Like
					</span>
				</div>
			</div>
		)
	}
}

components-cardWrao-CardWrap.js

import React,{Component} from 'react';
import Card from 'card/Card.js';
export default class CardWrap extends React.Component{
	render(){
		return(
			<div className='ui cards'>
				<Card />
				<Card />
				<Card />
			</div>
		)
	}
}

src-app.js

import React,{Component} from 'react';
import ReactDom from 'react-dom';
import Nav from 'nav/Nav.js';
import CardWrap from 'cardWrap/CardWrap.js';
import Card from 'card/Card.js';
require('./common/style/main.css');
require('../semantic/dist/semantic.css');//引用的是semantic UI框架
ReactDom.render(
	<div className='ui container'>
		<div className='ui dividing'></div>
		<Nav />
		<CardWrap />
	</div>,
	document.getElementById('root')
);

if(module.hot){
	module.hot.accept()
}

目录结构:

QQ截图20170708173953

注意:

        1、组件的导出有两种写法

//第一种
export default class Card extends Component{......}
//第二种
class Card extends Component{......}
export default Card

        2、大家可能注意到require()引入组件或者图片的路劲不对,这是因为在webpack.config.js配置文件中增加了设置:

resolve: {
    modules: [
        'node_modules',
        path.resolve(__dirname, 'src/common'),
        path.resolve(__dirname, 'src/components')
    ]
}

        当执行这句代码(import Nav from 'nav/Nav.js';)的时候,会先去node_modules文件夹下找,没找到就去common目录下找,在没找到就去components目录下找。

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

邮箱快速注册

忘记密码