Сделал отображение списка сайтов и конкретного сайта

cp/application/controllers/users/Typos.php

@@ -20,6 +20,9 @@ class Typos extends CI_Controller {
     /* @var $parser CI_Parser */
     public $parser;
 
+    /* @var $output CI_Output */
+    public $output;
+
     /* user id */
     private $login_id;
 
@@ -69,19 +72,10 @@ class Typos extends CI_Controller {
 
     /*Получить список сайтов для пользователя*/
     function getSiteList()  {
-        $data['page'] = $this->input->get('page');
-        $data['limit'] = $this->input->get('rows', 1);
-        $data['sord'] = $this->input->get('sord');
-        $data['sidx'] = $this->input->get('sidx');
-        $data['search'] = $this->input->get('_search');
-        $data['searchField'] = $this->input->get('searchField');
-        $data['searchOper'] = $this->input->get('searchOper');		
-        $data['searchString'] = $this->input->get('searchString');
-        $data['login_id'] = $this->login_id;
-        
-        log_message("error", $this->login_id);
-        
-        echo json_encode($this->typo->getSitesList($data));
+        return $this->output
+            ->set_content_type('application/json')
+            ->set_status_header(200)
+            ->set_output(json_encode($this->typo->getSitesList($this->login_id)));
     }
     
     /*Получить список сообщений об опечатках для пользователя*/

cp/application/models/Typo.php

@@ -162,19 +162,23 @@ class Typo extends CI_Model {
         
         return $data;
     }
-    
-    //Получаем список сайтов, доступных для пользователя
-    function getSitesList($data) {
 
-        $this->db->select("sites.*");
+    /**
+     * Получает список сайтов определенного пользователя
+     *
+     * @param $userId integer Идентификатор пользователя
+     *
+     * @return array Массив сайтов пользователя
+     */
+    function getSitesList($userId) {
+
+        $this->db->select("sites.id as id, sites.site as name, sites.status as status, sites.date as date");
         $this->db->from("sites");
         $this->db->join("responsible", "sites.id = responsible.id_site");
-        $this->db->where("responsible.id_user", $data['login_id']);
+        $this->db->where("responsible.id_user", $userId);
         //$this->db->where("sites.status", 1);
 
         return $this->db->get()->result();
-
-//        return $this->filterResults("sites", $data);
     }
 
     /* Получаем список сообщений об опечатках */

cp/application/views/users/typos.php

+<div id="root" class="body">
 
-
-<div class="body">
-    <h1>Here we are!</h1>
 </div>
\ No newline at end of file

cp/javascript/src/components/Application.jsx

+import React from 'react';
+import Typo from './Typo'
+
+export default class Application extends Component {
+    render() {
+        return (
+            <div>
+                <h1>Управление опечатками</h1>
+                <Typo/>
+                <div className="controlPanel">
+                    <button className="accept">Принять исправление</button>
+                    <button className="decline">Отклонить исправление</button>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file

cp/javascript/src/components/Site.jsx

+import React, {Component} from 'react';
+
+export default class Site extends Component {
+
+    render() {
+        const {site} = this.props;
+
+        return (
+            <div className="site">
+                <h2>{site.name}</h2>
+                <p className="date-container">Добавлено: <span className="date">{site.date}</span></p>
+                <button className="siteTyposButton">Перейти к опечаткам данного сайта</button>
+            </div>
+        )
+    }
+
+}
\ No newline at end of file

cp/javascript/src/components/SiteList.jsx

+import React, {Component} from 'react'
+import Site from "./Site";
+
+export default class SiteList extends Component {
+
+
+    render() {
+        const {sites} = this.props;
+
+        const siteElements = sites.map(site =>
+          <li key={site.id}><Site site={site}/></li>
+        );
+
+        return (
+            <div className="site-list">
+                <h1>Список сайтов, за которые вы отвечаете:</h1>
+                <ul>
+                    {siteElements}
+                </ul>
+            </div>
+        )
+    }
+}
\ No newline at end of file

cp/javascript/src/components/Typo.jsx

+import React, {Component} from 'react';
+
+export default class Typo extends Component {
+
+    render() {
+        const {article} = this.props;
+
+        return (
+            <div>
+                <h1>Опечатка #{article.id}</h1>
+                <div className="typo-body">
+                    <div className="context">
+                        {article.context}
+                    </div>
+                    <div className="original-text">{article.original}</div>
+                    <div className="corrected-text">{article.corrected}</div>
+                    <div className="comment">{article.comment}</div>
+                </div>
+            </div>
+        );
+    }
+
+}
\ No newline at end of file

cp/javascript/src/typos.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
 
-ReactDOM.render(
-    <h1>Hello, world!</h1>,
-    document.getElementById('root')
-);
\ No newline at end of file
+import SiteList from "./components/SiteList";
+
+// Get json array of typos and render component application
+$.ajax({
+    url: window.baseUrl + "/users/typos/getSiteList",
+}).done((sites) => {
+    renderSiteList(sites);
+}).fail((error) => {
+    console.log(error);
+});
+
+function renderSiteList(sites) {
+    ReactDOM.render(<SiteList sites={sites}/>, document.getElementById("root"));
+}
\ No newline at end of file

cp/package.json

@@ -23,6 +23,7 @@
   },
   "scripts": {
     "webpack": "webpack --config webpack.config.js",
-    "webpack:w": "webpack -w webpack.config.js"
+    "webpack:vv": "webpack --display-error-details --config webpack.config.js",
+    "webpack:w": "webpack -w --config webpack.config.js"
   }
 }

cp/webpack.config.js

@@ -12,8 +12,17 @@ module.exports = {
         path: path.resolve(__dirname, "javascript/dist")
     },
 
+    resolve: {
+        extensions: [".js", ".jsx"]
+    },
+
     mode: "development",
 
+    // Fix an error about 'fs'
+    node: {
+        fs: "empty"
+    },
+
     module: {
         rules: [
             {