Bài tập thực hành công nghệ thông tin phần 2 - Tài liệu tham khảo | Đại học Hoa Sen

Bài tập thực hành công nghệ thông tin phần 2 - Tài liệu tham khảo | Đại học Hoa Sen   và thông tin bổ ích giúp sinh viên tham khảo, ôn luyện và phục vụ nhu cầu học tập của mình cụ thể là có định hướng, ôn tập, nắm vững kiến thức môn học và làm bài tốt trong những bài kiểm tra, bài tiểu luận, bài tập kết thúc học phần, từ đó học tập tốt và có kết quả cao cũng như có thể vận dụng tốt những kiến thức mình đã học.

7 4 lượt tải Tải xuống
Chia sẻ Báo cáo tài liệu

Môn: information technology (IT Sotfware)

Trường: Đại học Hoa Sen

Thông tin:

5 trang 3 ngày trước

Tác giả:

Profile Kim Oanh
BÀI T P TH C HÀNH CNTT 2 Ậ Ự
Tuần 2: Front-End (1)
Bài t p v ậ ề nhà
- Tạo giao di n sau trên ReactJSệ
Bài t p th c hành trong phòng lab ậ ự
Bài tập 1. Tìm hiểu NodeJS / ReactJS
Bước 1. Cài đặ t Visual code
Bước 2. Cài đặ t NodeJS
- https://nodejs.org
- npm v –
Bước 3. Cài đặ t ReactJS
- npm install -g create-react-app
Bước 4. Tạo project ReactJS gọi api
- npx create-react-app <project_name>
- cd <project_name>
- npm start
Bước 5. Chạy nghi m thử ệ
- c a s trình duy t và gõ Mở ử ổ ệ http://localhost:3000
- K t qu ế ả
Bài tập 2. Tạo giao diện sau trên ReactJS
Các bước thực hiện
Bước 1. Tạo project ReactJS
Bước 2. Copy các thư mụ c images, js,.. vào project\public
Bước 3. Edit file App.js
import logo from './logo.svg';
import './App.css';
function App() {
( return
<div className="wrap">
<div className="left">
<ul className="menu">
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Property</a>
</li>
<li>
<a href="#">Device</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ >ul
</div>
<div className="right">
<h3>Dashboard</h3>
</div>
</div>
);
}
export default ; App
Bước 4. App.css
body ul h1 h2 h3 h4, , , , , ,h5{
; margin: 0px
; padding: 0px
}
.wrap{
; display: flex
/*width: 960px;*/
}
.left{
; width: 25vw
height: 100vmax;
; background color- : orange
; padding: 30px
}
.right{
; width: 75vw
height: 100vmax;
background color- : #000000;
color: #FFFFFF;
; padding: 30px
}
.menu{
; list style type- - : none
}
.menu li {
padding-bottom: 10px;
padding top- : ; 10px
border-bottom: 1px solid #eeeeee;
}
.menu li { a
text-decoration: none;
color: #000000;
; font size- : 18px
}
Bước 5. Test
| 1/5
| | Tải xuống

Có thể bạn quan tâm:

Preview text:

BÀI TẬP THỰC HÀNH CNTT 2
Tuần 2: Front-End (1)
 Bài tập về nh à
- Tạo giao diện sau trên ReactJS
 Bài tập thực hành trong phòng lab
Bài tập 1. Tìm hiểu NodeJS / ReactJS
Bước 1. Cài đặt Visual code Bước 2. Cài đặt NodeJS - https://nodejs.org - npm v –
Bước 3. Cài đặt ReactJS
- npm install -g create-react-app
Bước 4. Tạo project ReactJS gọi api - npx create-react-app - cd - npm start Bước 5. Chạy th nghi ử ệm - Mở cửa s trình duy ổ
ệt và gõ http://localhost:3000 - Kết quả
Bài tập 2. Tạo giao diện sau trên ReactJS
 Các bước thực hiện
Bước 1. Tạo project ReactJS
Bước 2. Copy các thư mục images, js,.. vào project\public Bước 3. Edit file App.js
import logo from './logo.svg'; import './App.css'; function App() { retur n ( v className="wrap"> l className="menu"> Dashboard Property Device Login l Dashboard ) ; } export default Ap ; p Bước 4. App.css body,ul,h1,h2,h3,h4,h5{ margin: 0p ; x padding: 0px; } .wrap{ display: flex; /*width: 960px;* / } .left{ width: 25v ; w height: 100vmax; background-color: orange; padding: 30px; } .right{ width: 75v ; w height: 100vmax; background-color: #000000; color: #FFFFFF; padding: 30px; } .menu{ list-style-type: none; } .menu li{ padding-bottom: 10px; padding-top: 10p ; x
border-bottom: 1px solid #eeeeee; } .menu li a{ text-decoration: none; color: #000000; font-size: 18p ; x } Bước 5. Test