{"id":6098,"date":"2021-12-15T06:30:06","date_gmt":"2021-12-15T06:30:06","guid":{"rendered":"https:\/\/www.codebee.co.th\/labs\/?p=6098"},"modified":"2021-12-18T04:44:25","modified_gmt":"2021-12-18T04:44:25","slug":"%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99-codeigniter-4-%e0%b8%a3%e0%b9%88%e0%b8%a7%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a-reactjs","status":"publish","type":"post","link":"https:\/\/www.codebee.co.th\/labs\/%e0%b9%83%e0%b8%8a%e0%b9%89%e0%b8%87%e0%b8%b2%e0%b8%99-codeigniter-4-%e0%b8%a3%e0%b9%88%e0%b8%a7%e0%b8%a1%e0%b8%81%e0%b8%b1%e0%b8%9a-reactjs\/","title":{"rendered":"\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 codeigniter 4 \u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a reactjs"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23 \u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 codeigniter 4 \u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a reactjs \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e19\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e19\u0e35\u0e49 \u0e08\u0e30\u0e21\u0e35\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 reactjs \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19 \u0e41\u0e25\u0e30 jsx ( \u0e15\u0e31\u0e27 jsx \u0e08\u0e30\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e35\u0e22\u0e19 html tags \u0e20\u0e32\u0e22\u0e43\u0e19 javascript \u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 )<\/li><li>\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d api \u0e43\u0e19 codeigniter 4 \u0e41\u0e25\u0e30\u0e01\u0e32\u0e23 response json \u0e17\u0e35\u0e48\u0e21\u0e35\u0e02\u0e49\u0e2d\u0e41\u0e15\u0e01\u0e15\u0e48\u0e32\u0e07\u0e08\u0e32\u0e01 codeigniter 3<\/li><li>\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 CI Model \u0e41\u0e25\u0e30 Connect Database <\/li><li>\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e27\u0e32\u0e07 Folder Path \u0e40\u0e0a\u0e48\u0e19 assets ( css,js,image,etc) api path \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19<\/li><\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 Create Database Table \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e15\u0e32\u0e23\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/h5>\n\n\n\n<p>\u0e43\u0e2b\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e15\u0e32\u0e23\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e2a\u0e33\u0e44\u0e27\u0e49\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e15\u0e32\u0e21\u0e19\u0e35\u0e49 \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e01\u0e47\u0e43\u0e2b\u0e49 insert \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e27\u0e49\u0e40\u0e23\u0e35\u0e22\u0e01\u0e21\u0e32\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<amp-fit-text layout=\"fixed-height\" min-font-size=\"6\" max-font-size=\"72\" height=\"80\"><pre title=\"jobs table\" class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE TABLE <code>jobs<\/code> (\n   <code>jobs_id<\/code> int(11) NOT NULL,\n   <code>jobs_name<\/code> varchar(200) NOT NULL,\n   <code>jobs_company<\/code> varchar(200) NOT NULL,\n   <code>timestamp<\/code> timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP\n ) ENGINE=InnoDB DEFAULT CHARSET=utf8;<\/code><\/pre><\/amp-fit-text>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\">\u0e2a\u0e23\u0e49\u0e32\u0e07 Controller, Model, View \u0e41\u0e25\u0e30 JSX<\/h5>\n\n\n\n<p>\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c Controller, Model, View \u0e41\u0e25\u0e30 JSX \u0e15\u0e32\u0e21\u0e25\u0e33\u0e14\u0e31\u0e1a \u0e42\u0e14\u0e22\u0e43\u0e19\u0e42\u0e1b\u0e23\u0e40\u0e08\u0e04\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e08\u0e30\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c\u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e2b\u0e25\u0e31\u0e01\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e41\u0e1a\u0e1a camelCase \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e31\u0e1a\u0e15\u0e31\u0e27\u0e40\u0e1f\u0e23\u0e21\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e04\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2b\u0e25\u0e31\u0e01\u0e01\u0e32\u0e23\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e44\u0e1f\u0e25\u0e4c\u0e41\u0e25\u0e30\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e41\u0e1a\u0e1a\u0e19\u0e35\u0e49<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e2a\u0e23\u0e49\u0e32\u0e07 Home Controller<\/li><\/ul>\n\n\n\n<amp-fit-text layout=\"fixed-height\" min-font-size=\"6\" max-font-size=\"72\" height=\"80\"><pre title=\"app\/Controllers\/Home.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">&lt;?php namespace App\\Controllers;\nclass Home extends BaseController\n{\n\tpublic function index()\n\t{\n\t    echo view('homeView');\n\t}\n}<\/code><\/pre><\/amp-fit-text>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e2a\u0e23\u0e49\u0e32\u0e07 Home Model<\/li><\/ul>\n\n\n\n<pre title=\"app\/Models\/ModelHome\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">&lt;?php namespace App\\Models;\nuse CodeIgniter\\Model;\nclass ModelHome extends Model\n{\n\tprotected $table      = 'jobs'; \n\tprotected $primaryKey = 'jobs_id';\n\tprotected $returnType = 'array';\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e2a\u0e23\u0e49\u0e32\u0e07 Home View<\/li><\/ul>\n\n\n\n<p>\u0e40\u0e23\u0e32\u0e08\u0e30 include babel.js \u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e14\u0e49\u0e27\u0e22 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e35\u0e22\u0e19 jsx \u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e02\u0e35\u0e22\u0e19 html syntax \u0e43\u0e19 javascript \u0e44\u0e1f\u0e25\u0e4c\u0e44\u0e14\u0e49 \u0e14\u0e39\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e17\u0e35\u0e48\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d <span style=\"font-size: Revert; color: initial;\">\u0e2a\u0e23\u0e49\u0e32\u0e07 jsx assets <\/span>\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07 div id homeContainer \u0e44\u0e27\u0e49\u0e23\u0e2d\u0e43\u0e2b\u0e49 react dom \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\n\n\n\n<pre title=\"app\/Views\/homeView.php\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup line-numbers\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\" crossorigin&gt;&lt;\/script&gt;\n    &lt;script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\" crossorigin&gt;&lt;\/script&gt;\n\t&lt;script src=\"https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div id=\"homeContainer\"&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e2a\u0e23\u0e49\u0e32\u0e07 Home Api \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Response Json<\/li><\/ul>\n\n\n\n<p>\u0e01\u0e48\u0e2d\u0e19\u0e43\u0e2b\u0e49\u0e2d\u0e37\u0e48\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07 Folder \u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32 Api \u0e20\u0e32\u0e22\u0e43\u0e19 Controller \u0e41\u0e25\u0e30\u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e32\u0e2a\u0e27\u0e48\u0e32 HomeApi \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e40\u0e02\u0e35\u0e22\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21 json \u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e1d\u0e31\u0e48\u0e07 javascript \u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<p>\u0e43\u0e19 Codeigniter 4 \u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 $this-&gt;response \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23 content type \u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49 setJSON \u0e41\u0e17\u0e19 json_encode \u0e01\u0e23\u0e13\u0e35\u0e43\u0e0a\u0e49 json_encode \u0e08\u0e30\u0e40\u0e01\u0e34\u0e14 error \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e30\u0e44\u0e1b\u0e0a\u0e19\u0e01\u0e31\u0e1a\u0e2a\u0e48\u0e27\u0e19 debug toolbar<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">&lt;?php namespace App\\Controllers\\api;\nuse App\\Controllers\\BaseController;\nuse App\\Models\\ModelHome;\nclass HomeApi extends BaseController\n{\n    public function getJobs()\n    {\n\t\t$modelHome = new ModelHome();\n\t\t$result = $modelHome-&gt;findAll();\n\t\t\n\t\t$this-&gt;response-&gt;setContentType('Content-Type: application\/json');\n\t\treturn $this-&gt;response-&gt;setJSON($result);\n    }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e2a\u0e23\u0e49\u0e32\u0e07 JSX assets <\/li><\/ul>\n\n\n\n<p>\u0e01\u0e48\u0e2d\u0e19\u0e2d\u0e37\u0e48\u0e19\u0e43\u0e2b\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07 Folder \u0e20\u0e32\u0e22\u0e43\u0e19 public default folder \u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e27\u0e48\u0e32 assets \u0e41\u0e25\u0e30\u0e17\u0e33\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c Home.jsx \u0e41\u0e25\u0e30\u0e40\u0e02\u0e35\u0e22\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 json \u0e08\u0e32\u0e01 HomeApi \u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n\n\n\n<pre title=\"public\/assets\/Home.jsx\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\n'use strict';\nclass Home extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      error: null,\n      isLoaded: false,\n      items: []\n    };\n  }\n  componentDidMount() {\n    this.loadJobs();\n  }\n\n  loadJobs(){\n    fetch(\"api\/HomeApi\/getJobs\")\n      .then(res =&gt; res.json())\n      .then(\n        (result) =&gt; {\n          this.setState({\n            isLoaded: true,\n            items: result\n          });\n        },\n        (error) =&gt; {\n          this.setState({\n            isLoaded: true,\n            error\n          });\n        }\n      )\n  }\n\n  render() {\n    const { error, isLoaded, items } = this.state;\n    if (error) {\n      return &lt;div&gt;Error: {error.message}&lt;\/div&gt;;\n    } else if (!isLoaded) {\n      return &lt;div&gt;Loading...&lt;\/div&gt;;\n    } else {\n      return (\n        items.map((item, index) =&gt; (\n          &lt;PostColumn key={item.jobs_id} items={item}\/&gt;\n        ))\n      );\n    }\n  }\n\n}\nReactDOM.render(&lt;Home\/&gt;, document.getElementById(\"homeContainer\"));<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">class PostColumn extends React.Component {\n  constructor(props){\n     super(props);\n     this.state = {\n      items: props.items,\n    };\n  }\n \n  render(){\n     return (\n        &lt;div className=\"jmg-right-caption-text\"&gt;\n          &lt;ul&gt;\n            &lt;li&gt;&lt;b&gt;Job Title:&lt;\/b&gt; {this.state.items.jobs_name}&lt;\/li&gt;\n            &lt;li&gt;&lt;b&gt;Company Name:&lt;\/b&gt; {this.state.items.jobs_company}&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n     );\n  }\n}<\/code><\/pre>\n\n\n\n<p>\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 home.jsx \u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 homeView <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;script type=\"text\/babel\" src=\"&lt;?php echo site_url('public\/assets\/home.jsx'); ?&gt;\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 Home Controller \u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49 \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e43\u0e19\u0e15\u0e32\u0e23\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 Jobs \u0e21\u0e35\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 3 Record \u0e01\u0e47\u0e08\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 json \u0e21\u0e32 loop \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25 \u0e42\u0e14\u0e22\u0e21\u0e35\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19 \u0e04\u0e37\u0e2d<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>ModelHome \u0e17\u0e33\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e08\u0e31\u0e14\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/li><li>HomeController \u0e17\u0e33\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e41\u0e1b\u0e25\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1b\u0e47\u0e19 Json<\/li><li>ReactJS \u0e17\u0e33\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48 Connect API \u0e41\u0e25\u0e30\u0e19\u0e33\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 JSON \u0e21\u0e32\u0e08\u0e31\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a html \u0e42\u0e14\u0e22\u0e2d\u0e32\u0e28\u0e31\u0e22\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e2d\u0e07 JSX \u0e41\u0e25\u0e30\u0e19\u0e33\u0e44\u0e1b\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e17\u0e35\u0e48 HomeView<\/li><li>\u0e08\u0e30\u0e40\u0e2b\u0e47\u0e19\u0e27\u0e48\u0e32\u0e40\u0e23\u0e32\u0e41\u0e17\u0e1a\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e22\u0e38\u0e48\u0e07\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 View \u0e40\u0e25\u0e22 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e22\u0e01\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08.png\"><img loading=\"lazy\" decoding=\"async\" width=\"940\" height=\"690\" src=\"https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08-940x690.png\" alt=\"\" class=\"wp-image-6117\" data-full=\"https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08.png\" data-full-size=\"1442x1058\" srcset=\"https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08-940x690.png 940w, https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08-620x455.png 620w, https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08-300x220.png 300w, https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08-768x563.png 768w, https:\/\/www.codebee.co.th\/labs\/wp-content\/uploads\/2021\/12\/Screen-Shot-2564-12-15-at-13.04.08.png 1442w\" sizes=\"auto, (max-width: 940px) 100vw, 940px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23 \u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 codeigniter 4 \u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a reactjs \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e19\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e19\u0e35\u0e49 \u0e08\u0e30\u0e21\u0e35\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49\u0e04\u0e23\u0e31\u0e1a \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 reactjs \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19 \u0e41\u0e25\u0e30 jsx ( \u0e15\u0e31\u0e27 jsx \u0e08\u0e30\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e35\u0e22\u0e19 html tags&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"video","meta":{"footnotes":""},"categories":[168],"tags":[2547,2544,2546,2548,2545,2549,933,371,43,549,501,7,11],"class_list":["post-6098","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category--php-codeigniter-framework","tag-babel-js","tag-ci4","tag-codeigniter4","tag-react-js","tag-reactjs","tag-unpkg","tag-933","tag-371","tag-43","tag-549","tag-501","tag--codeigniter","tag-11","post_format-post-format-video"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/6098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/comments?post=6098"}],"version-history":[{"count":24,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/6098\/revisions"}],"predecessor-version":[{"id":6124,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/6098\/revisions\/6124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media\/6119"}],"wp:attachment":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media?parent=6098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/categories?post=6098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/tags?post=6098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}