TODO với React + Rails Part 1: Basic Component
Bài đăng này đã không được cập nhật trong 5 năm
Đây là bài hướng dẫn làm React dành cho những bạn mới học React. Trong Part 1 này mình sẽ giới thiệu cách tạo các Component cho TODO project của mình.
Tạo Project
-
Bạn cần phải cài dặt
NodeJS
vànpm
nếu chưa có. -
Cài đặt create-react app với
npm install create-react-app --global
- Tạo project mới:
create-react-app todo_app
Nó sẽ tạo project với các file và folder cần thiết để chạy được Reactjs.
- package.json chứa các module/library,
- node_modules: chứa các package của module/library trong package.json
- src: chứa các source code React của bạn.
- public: chứa các file tĩnh như stylesheets, ảnh ....
cd vào todo_app và chạy
npm start
hoặc
yarn start
Components
src/index.js
: Đây là component chạy đầu tiên khi App start.src/App.js
: Đây là component import vào trong index.js, cũng là component render trên screen.- Ở đây mình sẽ chia ra các component chính như sau:
ToDoList.js
: component chaToDoItem.js
: item của từng TodoCreateForm.js
: form để tạo Todo
ToDoList.js
import React, { Component } from 'react'
import CreateForm from './CreateForm';
import ToDoItem from './ToDoItem';
class TodoList extends Component {
constructor() {
super()
this.state = {
items: [
{id: 1, name: 'task1'},
{id: 2, name: 'task2'},
{id: 3, name: 'task3'},
{id: 4, name: 'task4'},
],
taskName: ''
}
}
onAddItem(e) {
e.preventDefault();
let newTask = {id: Date.now(), name: this.state.taskName}
this.setState({
items: [...this.state.items, newTask]
})
}
onDelete(id) {
const filteredItems = this.state.items.filter(item => {
return item.id !== id
})
this.setState({
items: filteredItems,
})
}
onChange(e) {
const taskName = e.target.value;
this.setState({
taskName: taskName
})
}
renderItem() {
const items = this.state.items.map((task) =>
<ToDoItem
key={task.id}
name={task.name}
onDelete={() => this.onDelete(task.id)}
/>
)
return items;
}
render() {
return (
<div className="container">
<ul>{this.renderItem()}</ul>
<CreateForm
onAddItem={(e) => this.onAddItem(e)}
value={this.state.taskName}
onChange={(e) => this.onChange(e)}
/>
</div>
)
}
}
export default TodoList
Trong component này chứa component con: ToDoItem
và CreateForm
và các method để Add, delete, ... Nó khởi tạo bằng state Items để hiển thị trong danh sách và state taskName là value của CreateForm.
-
Component
ToDoItem
có props:name, onDelete
-
Component
CreateForm
có props:onAddItem, value, onChange
ToDoItem.js
import React, { Component } from 'react'
class ToDoItem extends Component {
render() {
return (
<li>
{this.props.name}
<button onClick={this.props.onDelete}>Delete</button>
</li>
)
}
}
export default ToDoItem
CreateForm.js
import React, { Component } from 'react'
class CreateForm extends Component {
render() {
return (
<div className="formCreate">
<form onSubmit={this.props.onAddItem}>
<input
placeholder="task name"
value={this.props.value}
onChange={this.props.onChange}/>
<button type="submit">Add</button>
</form>
</div>
)
}
}
export default CreateForm
Style component
Để style cho các component, bạn thêm className, sau đó viết css cho className đó như bình thường.
Nếu bạn tách style vào file riêng thì phải import .css đó vào component của bạn.
Trong ToDoList.js
...
import './ToDoList.css';
...
src/ToDoList.css
.todo-items ul {
list-style: none;
}
Đến đây bạn đã làm xong một demo về ToDo đơn giản với React, nhưng chưa có connect với server. Bài sau mình sẽ viết Rails API và connect nó vào Reactjs.
All rights reserved