Bài 01 :Khoá Học React

Bài 01 :Khoá Học React

codersulution Thứ Tư, tháng 8 24, 2022

 


 1: JSX

    -    JSX (javascript Syntax Extension- JS XML) viết theo kiểu XML. Thay thế cho React.createElement.
    -    JSX không phải là HTML.
    -    Có thể viết như HTML.
    -    thuộc tính class => className.
    -    Search google : HTML to JSX
                - -magic.reacjs.net.
    => chuyển đổi mã lệnh html sang jsx:
                             https://magic.reactjs.net/htmltojsx.htm
    -    thực hành : hiển thị các biểu thức, các đối tượng. mã nguồn như HTML nhưng phải đươc bao bởi thẻ div ngoài cùng để mã JSX chạy được.

2: JSX mở rộng

    -     Sử dụng câu điều kiện để hiển thị.
    -    Hiển thị danh sách các đối tượng: sử dụng hàm map.
    -    Nếu báo lỗi key : thêm thuộc tính key là index của mảng.

3: Props

    -    là caccs thuộc tính của 1 component.
    -    truyền dữ liệu từ cha => con, theo dạng key**" Value"(Không đặt key == children).Value nhận vào có kiêu dữ liệu là kiểu chuổi. Bỏ trong dấu {} để truyền đúng kiểu dữ liệu.
    -     Nhận lại thông qua từ khóa : this.Props.key
Ví Dụ: Tạo một foder mới. nhúng bootstrap,node.js vào foder.
ở file app.js nhập mã nguồn: (Phần được bôi đậm)
<script type='text/javascript'>
//<![CDATA[

import Product from './Component/Product';

class App extends Component{
 	render() {
 		return (
 			<div>
 				<nav className="navbar navbar-inverse">
					<div className="container-fluid">
						<a className="navbar-brand">Props</a>
					</div>
				</nav>
				<div className="container">
					<div className="row">
						<div className="row">
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<Product
									name="Apple Iphone 7 Plus 32GB"
									price="8.000.000 VNĐ"
									image="https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png"
								/>
								<Product
									name="Apple Iphone 8 Plus 32GB"
									price="10.000.000 VNĐ"
									image="https://manhinhdienthoai.net/wp-content/uploads/2019/07/iphone-8-plus-new.jpg"
								/><Product
									name="Apple Iphone 10 Plus 32GB"
									price="15.000.000 VNĐ"
									image="https://blogger.googleusercontent.com/img/proxy/AVvXsEhSiInrSMkoKB2eCDmIO6ff2AllzJrCO7HfNIJKl5wXxfCGgm7bb-BHj7brbnX0jm5nizCxfa03wT6ie6yLdufWQqAHOPFhHg531mZzMXBcIsHYIT7eLUtx_AkwDk8Cj_rTRgM-UJD5rMuw0nC2YY1UOnqYWlLHu2RBBIxvbwMO39uC0DxqKHMVhL082nz0tCGz="
								/>
							</div>	
						</div>
					</div>
				</div>
			</div>
  		);
 	}
 }

export default App;

//]]>
</script>


Tạo tập tin Product.js cà nhập mã nguồn sau:(Phần được bôi đậm)
<script type='text/javascript'>
//<![CDATA[

import React, { Component} from 'react';

class Product extends Component{
 	render() {
 		return (
 			<div>
 				<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 					<div className="thumbnail">
 						<img  alt={this.props.name} src={this.props.image}/>
 						<div className="caption">
 							<h3>
 								{ this.props.name}
 							</h3>
 							<p>
 								{this.props.price}							
 							</p>
 							<p>
 								<a  className="btn btn-primary">Mua Ngay</a>
 							</p>
 						</div>
 					</div>
 				</div>
 			</div>
  		);
 	}
 }

export default Product;

//]]>
</script>

 => chạy lại trên trình duyệt ta được kết quả :
  -    Nhận nội dung bên trong thẻ : this.Props.children
Ví Dụ: Tạo một foder mới. nhúng bootstrap,node.js vào foder.
ở file app.js nhập mã nguồn: (Phần được bôi đậm)
<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Product from './Component/Product';

class App extends Component{
 render() {
 	return (
 	<div>
             <nav className="navbar navbar-inverse">
		<div className="container-fluid">
		    <a className="navbar-brand">Props</a>
		</div>
	    </nav>
            <div className="container">
	        <div className="row">
		    <div className="row">
		        <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		        <Product
				price="8.000.000 VNĐ"
				image="https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png"
			>Apple Iphone 7 Plus 32GB</Product>
			<Product
				price="10.000.000 VNĐ"
				image="https://manhinhdienthoai.net/wp-content/uploads/2019/07/iphone-8-plus-new.jpg"
			>Apple Iphone 8 Plus 32GB</Product>
		        <Product
				price="15.000.000 VNĐ"		                                            image="https://blogger.googleusercontent.com/img/proxy/AVvXsEhSiInrSMkoKB2eCDmIO6ff2AllzJrCO7HfNIJKl5wXxfCGgm7bb-BHj7brbnX0jm5nizCxfa03wT6ie6yLdufWQqAHOPFhHg531mZzMXBcIsHYIT7eLUtx_AkwDk8Cj_rTRgM-UJD5rMuw0nC2YY1UOnqYWlLHu2RBBIxvbwMO39uC0DxqKHMVhL082nz0tCGz="
			>Apple Iphone 10 Plus 32GB</Product>
			    </div>	
		        </div>
		    </div>
		</div>
	    </div>
  	);
     }
 }

export default App;

//]]>
</script>
Tạo tập tin Product.js cà nhập mã nguồn sau:(Phần được bôi đậm)
<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';

class Product extends Component{
 	render() {
 		return (
 			<div>
 				<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 					<div className="thumbnail">
 						<img  alt={this.props.children} src={this.props.image}/>
 						<div className="caption">
 							<h3>
 								{ this.props.children}
 							</h3>
 							<p>
 								{this.props.price}							
 							</p>
 							<p>
 								<a  className="btn btn-primary">Mua Ngay</a>
 							</p>
 						</div>
 					</div>
 				</div>
 			</div>
  		);
 	}
 }

export default Product;
//]]>
</script>
  
=> chạy lại và xem kết quả

  -    Sử dụng điều kiện để hiển thị.
        -    Sử dụng function(ES6).
        -    Toán tử 3 ngôi.
-    Sử dụng vòng lặp.
    -    Thực hành hiển thị danh sách sản  phẩm (Tên , giá , trạng thái), chiir hiển thị sản phẩm có trạng thái là true.
Ví Dụ: Tạo một foder mới. nhúng bootstrap,node.js vào foder.
ở file app.js nhập mã nguồn: (Phần được bôi đậm)
<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Product from './Component/Product';

class App extends Component{
 	render() {
 		var product =[
 			{
 				id : 1,
 				name : 'Apple Iphone 7 Plus 32GB',
 				price : 8000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 2,
 				name : 'Apple Iphone 8 Plus 32GB',
 				price : 10000000,
 				image : 'https://znews-photo.zadn.vn/w660/Uploaded/ynssi/2016_08_16/1.png',
 				status :true,
 			},
 			{
 				id : 3,
 				name : 'Apple Iphone 10 Plus 32GB',
 				price : 15000000,
 				image : 'https://blogger.googleusercontent.com/img/proxy/AVvXsEhSiInrSMkoKB2eCDmIO6ff2AllzJrCO7HfNIJKl5wXxfCGgm7bb-BHj7brbnX0jm5nizCxfa03wT6ie6yLdufWQqAHOPFhHg531mZzMXBcIsHYIT7eLUtx_AkwDk8Cj_rTRgM-UJD5rMuw0nC2YY1UOnqYWlLHu2RBBIxvbwMO39uC0DxqKHMVhL082nz0tCGz=',
 				status :false,
 			},
 		];
 		let elements = product.map((product,index) => {
			if(product.status){
				return	<Product
						key = {product.id}
						price={product.price}
						image={product.image}
						>
							{product.name}
						</Product>
			}
		});
 		return (
 			<div>
 				<nav className="navbar navbar-inverse">
					<div className="container-fluid">
						<a className="navbar-brand">Props</a>
					</div>
				</nav>
				<div className="container">
					<div className="row">
						<div className="row">
							<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								{elements}						
							</div>	
						</div>
					</div>
				</div>
			</div>
  		);
 	}
 }

export default App;

//]]>
</script>
    Tạo tập tin Product.js cà nhập mã nguồn sau:(Phần được bôi đậm)

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';

class Product extends Component{
 	render() {
 		return (
 			<div>
 				<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 					<div className="thumbnail">
 						<img  alt={this.props.children} src={this.props.image}/>
 						<div className="caption">
 							<h3>
 								{ this.props.children}
 							</h3>
 							<p>
 								{this.props.price}	VNĐ						
 							</p>
 							<p>
 								<a  className="btn btn-primary">Mua Ngay</a>
 							</p>
 						</div>
 					</div>
 				</div>
 			</div>
  		);
 	}
 }

export default Product;

//]]>
</script>
Chú ý : kiểm tra file app.js có status :true mới được hiển thị ra man hình.
=> xem kết quả:



 
codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash