8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React95で Windows 95をなつかしもう

Last updated at Posted at 2019-04-26

React95を使うと、Windows 95のUIが簡単に作れます!

  • githubのreadmeの画像です↓   このようにあの懐かしいUIが簡単に再現できます。

Screen Shot 2019-04-27 at 3.15.04.png

storybookで簡単に動かせる

git clone https://github.com/arturbien/React95.git
cd React95/
yarn
yarn storybook

このように、簡単に試すことができました。

Screen Shot 2019-04-27 at 4.16.29.png

※ ↑と同じサンプルが https://arturbien.github.io/React95/ こちらにもあります。

webpackで3分で動かせるサンプル

webpackでも動かすことができました

自分で試したコード

yarn add react95 styled-components react react-dom webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/preset-react
webpack.config.js
module.exports = {
    mode: "development",
    module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env", "@babel/preset-react"]
                }
            }
        }]
    }
}
src/index.js
import React from "react";
import {render} from "react-dom";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import { reset, themes, List, ListItem, Divider } from "react95";

const ResetStyles = createGlobalStyle`
  ${reset}
`;

render(
    <div className="App">
        <ResetStyles />
        <ThemeProvider theme={themes.default}>
            <List>
                <ListItem>🎤 Sing</ListItem>
                <ListItem>💃🏻 Dance</ListItem>
                <Divider />
                <ListItem disabled>😴 Sleep</ListItem>
            </List>
        </ThemeProvider>
    </div>, 
    document.getElementById("root")
);
index.html
<!DOCTYPE html>
<meta charset=utf-8>
<title>React95 Test</title>
<div id=root></div>
<script src=dist/main.js></script>
yarn run webpack # ./dist/main.jsが出力

index.htmlを表示すると、このように簡単に使うことができました

Screen Shot 2019-04-27 at 3.27.14.png

小ネタライブラリ紹介でした :smile: 読んでいただいてありがとうございましたm(_ _)m

8
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?