Bài 04 : Nhúng giao diện vào trong ứng dụng ReactJS


Ở bài trước bạn đã tìm hiểu về cách phân chia các Component trong ứng dụng ReactJS đúng không nào ? Tiếp theo trong khóa học lập trình ReactJS này tôi sẽ cũng cố kiến thức cho bạn bằng cách hướng dẫn bạn nhúng một giao diện vào trong một ứng dụng được xây dựng bằng ReactJS để từ đó bạn có thể biết cách phân chia các Component sao cho phù hợp và hiệu quả.

Bước đầu tiên chúng ta sẽ di chuyển nhưng thành phần như javascript và css của giao diện vào trong thư mục public của reactjs để quản lý.

Tiếp theo chúng ta sẽ khai báo css và javascript vào ứng dụng ReactJS bằng cách khai báo trong public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link rel="stylesheet" href="%PUBLIC_URL%/template/css/style.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Lưu ý : đường dẫn của CSS và JS nếu nằm trong thư mục publc thì phải khai báo %PUBLIC_URL%

Tiếp tục chúng ta tiến hành nhúng giao diện HTML vào trong ReactJS.Nhưng trong ReactJS hiện tại không hỗ trợ HTML mà hỗ trợ giao diện dạng JSX cho nên chúng ta cần phải chuyển đổi giao diện từ HTML sang JSX.Để cho nhanh và dễ làm việc lúc này chúng ta sẽ sử dụng nhưng công cụ chuyển đổi có sẵn trên Internet để làm.Và ở đây tôi sẽ sử dụng Website 

https://magic.reactjs.net/htmltojsx.htm

Website này giúp chúng ta đổi nhanh mã nguồn từ HTML sang JSX từ đó giúp bạn dễ dàng nhúng giao diện có sẵn vào trong dự án ReactJS của chúng ta

Tiếp theo chúng ta sẽ nhúng toàn bộ mã nguồn JSX vào trong component App với đường dẫn thư mục như sau src/components/App/App.js và sau đó bạn có thể chạy thử

Sau khi chạy hoàn tất ứng dụng chúng ta có thể tiến hành tách component thành những phần riêng biệt như sau

import React, { Component } from 'react';
import './App.css';
import Header from '../Header/Header';
import Menu from '../Menu/Menu';
import Pane from '../Pane/Pane';
import Lower from '../Lower/Lower';
import Footer from '../Footer/Footer';

class App extends Component {
  render() {
    return (
      <div id="wrapper">
        <Header />

        <Menu />

        <Pane />

        <div className="clear" />

        <Lower />

        <div className="clear" />

        <Footer />
      </div>
    );
  }
}

export default App;

 


Tags

giao diện reactjs nhúng giao diện trong reactjs template reactjs xử lý giao diện trong reactjs

Khóa học lập trình PHP & MySQL cơ bản Khóa học lập trình PHP & MySQL nâng cao Khóa học lập trình Laravel Framework Khóa học lập trình Angular 4 Khóa học lập trình NodeJS Khóa học lập trình Python Khóa học lập trình Android Khóa học lập trình iOS Swift