Интегрируйте шаблон администратора в ReactJS

Интеграция шаблона администратора в ReactJS — одна из ведущих тем сегодня. Мы используем React v16 , а также нам нужно загрузить шаблон из репозитория GitHub : https://github.com/almasaeed2010/AdminLTE/releases

Если вы хотите узнать больше о React и Redux, ознакомьтесь с этим курсом React 16.6 — Полное руководство (включая React Router и Redux).

Согласно требованию, во-первых, нам нужно чтобы загрузить шаблон HTML.

Шаг 1. Настройте одно приложение responsejs.

Согласно исходной документации, нам необходимо установить глобально create-response-app глобально.

 npm install -g create-response-appcreate-response-app admin  -app 

Это заставит шаблон с сервером разработки запускать необходимое приложение ReactJS .

Шаг 2. Включите все файлы css и js. 2>

Создайте две папки в общедоступном каталоге css и js. Скопируйте файлы css и js из шаблона admin lte .
Итак, наш файл index.html выглядит так.

               Для запуска этого приложения необходимо включить JavaScript.   
 
            

Шаг 3. Создайте компонент заголовка для шаблона администратора.

//Заголовок. jsimport React, {Component} из 'react'; экспорт класса по умолчанию Header расширяет Component {render () {return (
    A  LT    Admin  LTE    
)}} 

Теперь включите этот компонент в App.js file.

//App.jsimport React, {Component} из 'react'  ; импортировать заголовок из './components/Header';class App extends Component {render () {return (
 
 
);  }} экспортировать приложение по умолчанию; 

Шаг 4. Создайте один компонент боковой панели.

Внутри каталога компонентов создайте один файл с именем SideBar.js.

//SideBar.jsimport React, {Component} из 'react'; экспорт класса по умолчанию SideBar расширяет Component {render () {return ( 
 
 
  
 
 
 Александр Пирс 
    Онлайн  
 
   
        
  
 
 ГЛАВНАЯ НАВИГАЦИЯ 
 
     Параметры макета    4    
 
    Верхняя часть навигации  
 
    В штучной упаковке  
 
    Исправлено  
 
    Свернутая боковая панель  
 
 
 
     Виджеты    новый    
 
     Диаграммы        
  
    ChartJS  
 
    Моррис  
 
    Флот  
 
    Встроенные диаграммы  
 
 
 
 
 
    Простые таблицы  
 
    Таблицы данных  
 
 
 
     Календарь    3   17    
 
     Почтовый ящик    12   16   5    
 
 n> )}} 

Здесь я только что использовал один пункт меню для боковой панели , так как это всего лишь демонстрационный проект.

Обновите файл App.js .

//App.jsimport React, {Component} из 'react'; импортируйте заголовок из '  ./components/Header';import SideBar из './components/SideBar';class App расширяет компонент {render () {return (
 
  
);  }} экспортировать приложение по умолчанию; 

Шаг 5. Создайте один компонент содержимого.

//Содержимое. jsimport React, {Component} из 'react'; экспорт класса по умолчанию Content extends Component {render () {return (
 
 
 
 
 
 
 Ежемесячный обзорный отчет 
 
 
 
 
 
  Это  это текст  
 
 
 
 
 
 
 
     17%  
 35 210,43 доллара США 
  ОБЩАЯ ДОХОДНОСТЬ  
 
 
 
 
 
 
 
 
)}} 

Наконец, наш файл App.js смотри как это.

//App.jsimport React, {Component} из 'react'; импортировать заголовок из './components/Header';import SideBar из' ./components/SideBar ';  импортировать контент из './components/Content';class App extends Component {render () {return (
 
   
);  }} экспортировать приложение по умолчанию; 

Наша панель администратора выглядит так.

Fork Me On Github