教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git
1.目录结构
- src
- component
- TodoHeader #组件
- index.js
- index.css/sass/less
- TodoInput #组件
- index.js
- index.css/sass/less
- TodoList #组件
- index.js
- index.css/sass/less
- TodoItem #子组件
- index.js
- index.css/sass/less
- index.js #用于导出所有组件
- App.js #主页面
- index.js #react主入口
2.目录结构解释
2.1.src/index.js
主入口
把所有的组件及引用关系组件添加到DOM中
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App title={"新标题"}/>,document.getElementById("root"));
2.2.src/App.js
主页面
引用所有组件及页面排版
import React, {Component, Fragment} from 'react';
import {
TodoHeader,
TodoInput,
TodoList
} from './component'
class App extends Component {
render() {
return (
//Fragment表示空标签
//如果不需要的话可以使用Fragment进行替代
//如果需要添加class等信息还是需要用div
//或空标签 <> </> 这样也不会报错
<Fragment>
<TodoHeader/>
<TodoInput/>
<TodoList/>
</Fragment>
);
}
}
export default App;
2.3.src/components
组件目录
所有组件都放在此目录下
2.4.src/components/index.js
用于整合及导出所有组件
优点:不需要在src/App.js
中把所有组件都引用上,这种方式显得结构清晰
2.4.1.导出组件第一种方式
import TodoHeader from './TodoHeader'
import TodoInput from './TodoInput'
import TodoList from './TodoList'
export {
TodoHeader,
TodoInput,
TodoList
}
2.4.2.导出组件第二种方式
export {default as TodoHeader} from './TodoHeader'
export {default as TodoInput} from './TodoInput'
export {default as TodoList} from './TodoList'
两种方式区别:
方式1:如果组件需要做一些处理的话推荐使用第一种方式
方式2:如果不需要处理组件,且显得清晰的话推荐第二种
2.5.src/components/TodoList
组件结构
2.6.src/components/TodoList/index.js
组件
react组件
2.6.1.组件文件名称命名规则
2.6.1.1.使用index.js
#推荐
2.6.1.2.使用父文件名命名TodoList.js
//在index.js中引用 例如:
//2.6.1.1:
import TodoList from './TodoList' #推荐使用
//2.6.1.2:
import TodoList from './TodoList/TodoList'
2.7.src/components/TodoList/TodoItem
子组件目录
3.组件代码
3.1.src/components/TodoHeader/index.js
import React, {Component} from 'react';
export default function TodoHeader(){
return (
<h1>待办事项</h1>
)
};
3.2.src/components/TodoInput/index.js
import React, {Component} from 'react';
class TodoInput extends Component {
render() {
return (
<div>
组件1
</div>
);
}
}
export default TodoInput;
3.3.src/components/TodoList/index.js
import React, {Component} from 'react';
import TodoItem from './TodoItem'
class TodoList extends Component {
render() {
return (
<ul>
<TodoItem/>
</ul>
);
}
}
export default TodoList;
3.4.src/components/TodoList/TodoItem/index.js
import React, {Component} from 'react';
class TodoItem extends Component {
render() {
return (
<li>
子组件
</li>
);
}
}
export default TodoItem;
yarn start
运行
网友评论