簡易CMS作成で無料ブログを公開する。表示機能 React版 #React #React.js #node

knaka Tech-Blog

2020年7月24日 10:13

■ 概要:

React で、CMS表示の機能となります。

・編集機能は、前のVue-CLI版を使用、
　投稿データ等を、jsonファイルで、エクスポート

・Rect表示で、読み込み

■　関連のページ / 　編集機能

・編集
　・Update :2020/07/26
　React版の編集機能を追加しました。下記となります

・Vue版の、編集機能はこちら
https://cms3edit-kuc.netlify.app/#/edit

■ 環境

react
react-dom
react-router-dom

■ 参考のBuild
React / build ファイルとなります (yarn build)

■ 参考のコード

・CMSレイアウト変更等が可能です, React Componentの修正となります

app.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Head from './component/Layouts/Head';
import About from './component/About';
import Home from './component/Home';
import Show from './component/Show';
import Test from './component/Test';

//
class App extends Component {
 render() {
   return (
     <div className="App">
       <Router>
         <div>
           <Head />
           <Route exact path='/' component={Home}/>
           <Route path="/show/:id" component={Show} />
           <Route path='/about' component={About}/>

           <Route path='/test' component={Test}/>

         </div>
       </Router>
     </div>
   );
 }
}

export default App;

■ 画面

・詳細

・トップ

■デモのページ

マガジン内の、デモページ紹介にURL記載しております

ここから先は

0字

React + IndexedDB 製作事例

100円

React + IndexedDB 開発の事例、ノウハウに関する記事を集めました。 ■ 免責事項 / 注記 , 内容について動作確認し…

ログイン

この記事が気に入ったらサポートをしてみませんか？