Nội dung chính
Để dễ theo dõi mình sẽ tạo folder
bai-tap-ve-nha nằm trong ổ E và để file zip vừa tải về ở trên nằm trong folder này. Sau khi giải nén ra ta sẽ có cấu trúc thư mục như hình dưới.
1. Tạo project React JS
Trong folderbai-tap-ve-nha, vì máy tính của mình là win 10 nên các bạn ấn tổ hợp phím Shift + chuột phải và chọn Open PowerShell window here để mở cmd lên.Sau đó bạn gõ dòng code sau
npm install -g create-react-app như hình bên dưới và ấn enter.
Sau khi cài đặt xong các bạn gõ tiếp câu lệnh
create-react-app my-app như hình bên dưới và ấn enter
Sau khi tạo được xong project với tên là
my-app các bạn gõ tiếp câu lệnh này cd my-app như hình bên dưới và ấn enter.
Sau khi chuyển cmd vào trong folder
my-app các bạn gõ tiếp câu lệnh npm start như hình bên dưới và ấn enter để bắt đầu chạy project.
Nếu các bước trên các bạn làm thành công thì trình duyệt web sẽ tự động bật lên và mở một trang web có địa chỉ là
http://localhost:3000, giao diện trang web như hình bên dưới (hoặc khác chút xíu tùy phiên bản ^^)
2. Copy giao diện HTML vào project
Quay trở lại với folderbai-tap-ve-nha các bạn copy 3 folder css, fonts, js và để vào trong folder public nằm trong folder my-app như hình bên dưới
Với file
index.html ở trên ta phải thêm các đường dẫn tới các file css cần thiết. Code file này sẽ như hình bên dưới. Lưu ý là khi làm sang react mình hạn chế sử dụng jquery nên không add nó vào trong file html.
<html lang="en">
<head>
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link href="%PUBLIC_URL%/manifest.json" rel="manifest">
<link href="%PUBLIC_URL%/favicon.ico" rel="shortcut icon">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link href="%PUBLIC_URL%/css/bootstrap.min.css" rel="stylesheet">
<link href="%PUBLIC_URL%/css/style.css" rel="stylesheet">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Bước tiếp theo ta phải chuyển toàn bộ code HTML sang JSX, để làm được điều này ta nên vào trang https://magic.reactjs.net/htmltojsx.htm để chuyển tự động, các bạn vào trang giao diện của html và copy toàn bộ div với class là container để chuyển.
Sau khi convert nó sang JSX giờ ta mở file
App.js nằm trong folder src và paste code giao diện đó vào bên trong như sau.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="container">
<div className="page-header">
<h1>Project 01 - ToDo List <small>ReactJS</small></h1>
</div>
<div className="row">
<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div className="input-group">
<input type="text" className="form-control" placeholder="Search item name" />
<span className="input-group-btn">
<button className="btn btn-info" type="button">Clear</button>
</span>
</div>
</div>
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div className="dropdown">
<button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Sort by <span className="caret" />
</button>
<ul className="dropdown-menu">
<li><a role="button">Name ASC</a></li>
<li><a role="button">Name DESC</a></li>
<li role="separator" className="divider" />
<li><a role="button">Level ASC</a></li>
<li><a role="button">Level DESC</a></li>
</ul>
<span className="label label-success label-medium">NAME - DESC</span>
</div>
</div>
<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<button type="button" className="btn btn-info btn-block marginB10">Add Item</button>
</div>
</div>
<div className="row marginB10">
<div className="col-md-offset-7 col-md-5">
<form className="form-inline">
<div className="form-group">
<input type="text" className="form-control" placeholder="Item Name" />
</div>
<div className="form-group">
<select className="form-control">
<option value={0}>Small</option>
<option value={1}>Medium</option>
<option value={2}>High</option>
</select>
</div>
<button type="button" className="btn btn-primary">Submit</button>
<button type="button" className="btn btn-default">Cancel</button>
</form>
</div>
</div>
<div className="panel panel-success">
<div className="panel-heading">List Item</div>
<table className="table table-hover">
<thead>
<tr>
<th style={{ width: '10%' }} className="text-center">#</th>
<th>Name</th>
<th style={{ width: '15%' }} className="text-center">Level</th>
<th style={{ width: '15%' }}>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">1</td>
<td>Tìm thấy mảnh vỡ máy bay rơi ở Iran làm 66 người chết</td>
<td className="text-center"><span className="label label-danger">High</span></td>
<td>
<button type="button" className="btn btn-warning btn-sm">Edit</button>
<button type="button" className="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td className="text-center">2</td>
<td>Không còn tranh cướp lộc hoa tre ở lễ hội đền Gióng 2018</td>
<td className="text-center"><span className="label label-default">Small</span></td>
<td>
<button type="button" className="btn btn-warning btn-sm">Edit</button>
<button type="button" className="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td className="text-center">3</td>
<td>Hơn 37.000 người nhập viện vì tai nạn giao thông, đốt pháo</td>
<td className="text-center"><span className="label label-info">Medium</span></td>
<td>
<button type="button" className="btn btn-warning btn-sm">Edit</button>
<button type="button" className="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td className="text-center">4</td>
<td>Gần 200 người chết vì tai nạn giao thông 7 ngày nghỉ Tết</td>
<td className="text-center"><span className="label label-info">Medium</span></td>
<td>
<button type="button" className="btn btn-warning btn-sm">Edit</button>
<button type="button" className="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td className="text-center">5</td>
<td>VFF giải ngân 15 tỷ đồng, tiền thưởng tới tay U23 VN trước Tết</td>
<td className="text-center"><span className="label label-info">Medium</span></td>
<td>
<button type="button" className="btn btn-warning btn-sm">Edit</button>
<button type="button" className="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
<tr>
<td className="text-center">6</td>
<td><input type="text" className="form-control" defaultValue="F1 muốn tổ chức giải đua xe tại Việt Nam vào năm 2020" /></td>
<td className="text-center">
<select className="form-control">
<option>Small</option>
<option>Medium</option>
<option>High</option>
</select>
</td>
<td>
<button type="button" className="btn btn-default btn-sm">Cancel</button>
<button type="button" className="btn btn-success btn-sm">Save</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
}
export default App;
Nếu các bước làm chính xác thì khi ta quay lại trang web của mình
http://localhost:3000 sẽ có giao diện mới như hình bên dưới.
Danh sách bài học về ReactJS
- ReactJS B1 - Tạo giao diện HTML-CSS
- ReactJS B2 - Tạo project và copy giao diện
- ReactJS B3 - Phân chia Component
- ReactJS B4 - Tạo mockdata và render Item
- ReactJS B5 - Delete Item
- ReactJS B6 - Edit Item (P1)
- ReactJS B6 - Edit Item (P2)
- ReactJS B7 - Add Item
- ReactJS B8 - Sort Item
- ReactJS B9 - Search Item
ReactJS cơ bản qua ví dụ thực tế - B2 tạo project và copy giao diện HTML
Reviewed by kentrung
on
March 08, 2018
Rating:
Reviewed by kentrung
on
March 08, 2018
Rating:
No comments: