Mở Đầu: Khóa học React

Mở Đầu: Khóa học React

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

  



link Khóa học : 

https://www.youtube.com/watch?v=s6 WS8gLaqc&list=PLJ5qtRQovuEOoKffoCBzTfvzMTTORnoyp&index=4

1: Khái niệm :

React là thư viện javascript phổ biến sử dụng để xây dựng các giao diện người dùng.được xây dựng và phát triển bởi facebook năm 2011 và instagram năm 2012 và open năm 2013. đối với react.js giúp xây dựng  các ứng dụng single best application. giúp chúng ta xử lý các vấn đề liên quan đến các trang web lớn và nhỏ.nó rất dễ đọc và bảo trì.

2: Cài đặt môi trường:

2.1: React Developer Tools

    -      React-detector : là chome-extension để xác định trang web nào xài react.
    -     Show-me-the-react : firefox và chome.
    -    React Developer Tools : là một plugin có thể mở rộng chức năng của các công cụ phát triển trình duyệt. Nó tạo ra một tab mới trong các công cụ dành cho nhà phát triển. Nếu thích Chome, có thể cài  đặt nó dưới dạng tiện ích mở rộng. Bạn cũng có thể cài đặt nó như một add-on cho Firefox.

cách cài : Chome  chọn tùy chọn khác (nút 3 chấm)  => công cụ khác =>  tiện ích mở rộng =>
chọn tải thêm tiện ích. Tìm React Developer Tools trên cửa hàng chome trực tuyến =>  thêm vào chome => thêm tiện ích chờ cài đặt thành công sẽ hiện một thông báo đã được thêm vào .
để ý trên góc phải màn hình lúc này có một icon react, nếu trang web sử dụng react thì icon sẽ sáng lên.

2.2: Cài Node.JS

    -     là ngôn ngữ lập trình phía server.
    -    là runtime environment(nền tảng để chạy ứng dụng), dùng để xây dựng úng dụng full-stack javascript.
    -    mã nguồn mở cài đặt trên windows, macOS, Linux,platforms khác.
    -    không cần phải biết nếu chỉ học react. chỉ cần biết sử dụng Node Package Manager (npm) để cài đặt  dependencies (tự động cài đặt khi cài đặt node).
    -    Kiểm tra phiên bản Windows + R nhập  node -v và npm -v.
    -    Cú pháp cài đặt các package bằng npm : npm install [package-name] --save.

2.3: YARN (là lựa chọn thay thế cho npm)

    -    Quản lý  dependency với Yarn.
    -    Là lựa chọn thay thế npm.
    -    Phát hành năm 2016 bởi Facebook + exponent,google,tilde.
    -    Nhanh hơn nhiều so với npm.
    -    Cú pháp npm install -g yarn.
    -    Cú pháp cài đặt package bằng yarn : yarn add[package-name].
    -    Xóa yarn remove [package-name].

2.4: IDE : Sublime Text 3

    -     Cài đặt các package cần thiết:
            -    JSX/Bable Syntax Highlighting.
            -    Bable Snippets.
            -    Emmet.

3: React JS : khởi tạo project đầu tiên

    -     Giới thiệu Create-react-app.
    -    Cài đặt bằng câu lệnh : npm install -g create-react-app.
    -    Tạo mới ứng dụng: create-react-app tên_Project.
    -    Chạy ứng dụng : npm start.
    -    Đổi port tại package.json:
        "start":"set port=420 && react-scripts start"
Truy cập : https://reactjs.org/ => Get Stated => Create  New App xem hướng dẫn trên trang và tạo theo.
Cài đặt qua npm: npm install -g create-react-app
create-react-app  my app

cd my-app
npm start

Tiến hành cài đặt thông qua npm:
    Windows + R => cmd => npm install -g create-react-app => enter 
Tạo project-app mới:
tạo thư mục chứa => vào thư mục đó mở cmd lên => create-react-app ten_project

4: Cấu trúc thư mục

    -     Khái niệm Compenent
    -    Cấu trúc thư mục
    -    Các file quan trọng
    -    Sử dụng cú pháp ES6
    -    File chạy đầu tiên: index.html => src/index.js
    -    Giới thiệu App Component( sử dụng JSX để render giao diện)

5: Component

 5.1: Tạo Component đầu tiên,trong src tạo tập tin Demo.js và nhập mã nguồn sau vào:( chỉ nhập phần tô màu)

<script type='text/javascript'>
//<![CDATA[

 import React, { Component} from 'react';
    class Demo extends Component {
          render(){
               return (
                  <div className= "Demo">
                      <h1>wellcome</h1> 
                      <p> React </p>  
                  </div>
                  );
              }
        }

//]]> 
</script>   

Trong tập tin index.js Thêm đoạn mã sau : import Demo from './Demo';  vào như dưới
<script type='text/javascript'>
//<![CDATA[

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Demo from './Demo';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(<Demo />, document.getElementById('root'));
reportWebVitals();
export default Demo;

//]]>
</script>


=> và chạy lại chương trình ta được kết quả như sau:
* Lưu ý hàm render: trả ra giao diện người dùng,trả ra lời chào : helloword.

6: Sử dụng resource, template

    -     Bootstrap v3.3.7
    -     Template.
    -      Mateeialize.
    -     Download và đưa vào thư mục : public
    -     Khai thác và sử dụng tại index.html
    -    Nhúng bootstrap vào  file index.html:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="header">
        <nav class="navbar navbar-inverse">
            <div class="navbar-header">
                <a href="" class="navbar-brand">Freetuts.net</a>
            </div>
            <div class="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="">Trang chủ</a></li>
                    <li><a href="">Giới thiệu</a></li>
                    <li><a href="">Tin tức</a></li>
                    <li><a href="">Thương hiệu</a></li>
                    <li><a href="">Liên hệ</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div id="root"></div>
   <script src="%PUBLIC_URL%/js/jquery-3.5.1.min.js"></script>
   <script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
  </body>
</html>
    -    lưu ý : %PUBLIC_URL%
Trong tập tin App.js nhập mã nguồn (chỉ nhập phần tô màu)
<script type='text/javascript'>
//<![CDATA[

import React, { Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>wellcome</h2>
          <p >
          To get started,edit <code>src/App.js</code> and save to reload.
          </p>
          <div>
                <h1>App component</h1>
            </div>
        </header>
      </div>
    );
  }
}
export default App;

//]]>
</script>

Trong tập tin index.js nhập : (chỉ nhập phần tô màu)
<script type='text/javascript'>
//<![CDATA[

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Demo from './Demo';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(<App />, document.getElementById('root'));
reportWebVitals();


//]]>
</script>
kết quả khi chạy lại trang web:

7: Component

    -    Tạo folder chứa các component.
Tạo thư mục component chứa header.js và product.js trong header.js nhập:(chỉ nhập phần tô màu)
<script type='text/javascript'>
//<![CDATA[

import React, { Component} from 'react';

class Header extends Component {
  render(){
    return (    
        <div>
              <h1>header</h1>
        </div>
    );
  }
}
export default Header;


//]]>
</script>

trong tập tin App.js sửa lại mã nguồn: (chỉ nhập phần tô màu)

<script type='text/javascript'>
//<![CDATA[

import React, { Component} from 'react';
import logo from './logo.svg';
import './App.css';
import header from './component/header'

class App extends Component {
  render(){
    return (
      
          <div>
                <h1>App component</h1>
                <header></header>
            </div>
       
    );
  }
}
export default App;

//]]>
</script>

kết quả 



    -    Tạo component:
                -    Tạo component: function hoặc ES6 Class.
                -    Hàm render return về JSX hoặc React.createElement('selector',{attribute},'value').
                -    Khuyến cáo JSX.
    -    Tạo style
    -    Thực hành:
                -    Tạo component hiển thị danh sách sản phẩm.
                -    Phân chia Component.
                -    Giới thiệu Tag Wrapper.
Tạo thư mục component trong src: tạo tập tin Product.js và Header.js. Trong tập tin Header.js nhập mã nguồn:(chỉ nhập phần tô màu)
<script type='text/javascript'>
//<![CDATA[

import React, { Component} from 'react';

class Header extends Component {
  render(){
    return (    
        <div>
              <nav className="navbar navbar-inverse">
                  <div className="container-fluid">
                      <a className="navbar-brand" >Bài 02</a>
                      <ul className="nav navbar-nav">
                          <li >
                              <a href="#">Trang chủ</a>
                          </li>
                          <li className="active">
                              <a href="#">Danh mục</a>
                          </li>
                      </ul>
                  </div>
              </nav>
        </div>
    );
  }
}
export default Header;

//]]>
</script>

Trong tập tin Product.js nhập mã nguồn: (chỉ nhập phần tô màu)

<script type='text/javascript'>
//<![CDATA[

import React, { Component} from 'react';

class Product extends Component {
  render(){
    return (        
      	<div> 
            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            	<div className="thumbnail">
            		<img alt="Iphone 10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/IPhone_11_Product_RED.jpg/800px-IPhone_11_Product_RED.jpg" />
            		<div className="caption">
            			<h3>Iphone</h3>
            			<p>
            				30.000.000 VNĐ
            			</p>
            		</div>
            	</div>
            </div>
            <button type="button" className="btn btn-default">Mua Hàng</button>
      </div>       
      
    );
  }
}
export default Product;

//]]>
</script>

Sữa lại tập tin App.js:  (chỉ nhập phần tô màu)

<script type='text/javascript'>
//<![CDATA[

import React, { Component} from 'react';
import './App.css';
import Header from './component/Header';
import Product from './component/Product';

class App extends Component {
  render(){
    return (     
      <div>
            <Header/>
            <div className="row">
                <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <Product/>
                    
                </div>
                <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <Product/>
                   
                </div>
            </div>
      </div> 
    );
  }
}
export default App;
//]]>
</script>

Kết quả :


Chú ý : tạo foder mời  thêm tập tin js,bootstrap, font vào  public.
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