2017-09-09 2 views
1

私はweb uiの面で洞窟人です - 私はnpm/nodejsやその他の優れたインフラストラクチャがなくても好きです。私は昔のようなテキストファイルにすべてを必要とします:HTMLページとのやりとり/リンクとそれが完了しました。 semantic-ui + ReactJSの組み合わせでは、このような洞窟アプローチが可能ですか?つまり、フロントエンドが動作するためのnpm/nodes/otherサーバーコードがないことを意味しますか?洞窟の人間はSemantic-UI + ReactJSを利用できますか?

答えて

1

あなたは常に「パッケージのあなたのhtmlページのヘッダ内のスクリプトタグとして希望を置くことによって、NPM/nodejs /バンドルを使用してスキップすることができます

これは始めるために便利なツールです。これにより、余分なライブラリを手に入れることができますが、単純なままにしたい場合は、バンドリングやトランスリンギングを必要としません。あなたが言及したように、これは標準であった方法ですが、それでも問題なく動作します。ここでは例として

は、NPMせずにどのように反応するかを使用することです:

:次に反応し使用するためのJSのコードは次のようになります

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
</head> 
<body> 
    <div id="root"></div> 
</body> 
</script> 
</html> 

JSBIN

あなたのHTMLは次のようになります。

const Child =() => <div>Child</div> 

const Parent =() => { 
    return (
    <div> 
     Parent 
     <Child /> 
    </div> 
) 
} 

ReactDOM.render(
    <Parent />, 
    document.getElementById('root') 
); 

この回答は、npmをスキップしてまとめてバンドルする場合に特に役立ちます。私は間違いなくあなたがあなたの設定/バンドリング/ transpilingを行うことを持っていると大丈夫であれば、create-react-appをチェックアウトすることをお勧めします。

+0

[この](http://jsbin.com/cesupobiqa/edit?html,js,console,output)のようなもの - あなたはsemantic-UI =を見逃していました) – DuckQueen

1

私はあなたの質問を理解している場合、答えははいですと思います。 react(セマンティックUIのようなcss lib)を使用する方法の1つは、静的なホスティングサービス(すべてのテキストファイル、古い時代のようなもの)で非常に簡単にホスティングできる静的なビルドを生成することです。ただし、開発中にnpmとnodeを使用するのが一般的です。 https://github.com/facebookincubator/create-react-app

関連する問題