我剛剛安裝了Node.js，然后安裝了React.js，需要一些如何顯示單個語義UI組件的信息

Question

我實際上在這里有點不知所措。.我已經在google上搜索了很多，但是我還沒有弄清楚如何在頁面上看到React組件。。盡管我了解HTML的基礎知識，但我對Web開發還是超級新手， CSS和JavaScript

這是我從安裝Node開始一直遵循的所有步驟，它們是非常標准的步驟。

從.pkg安裝節點
將路徑添加到.bash_profile
轉到父目錄，然后執行sudo npm install create-react-app -g ，盡管我認為轉到任何特定目錄都不重要，因為-g表示將在全局安裝。
留在父目錄中，然后執行create-react-app project_name
npm start ：向我顯示了一個帶有漂亮React徽標的默認頁面
在通過create-react-app步驟create-react-app的同一文件夾project_name中，我運行了npm install -g gulp
然后，我運行了npm install semantic-ui --save如語義UI網站上所列
npm audit fix以解決一些它認為很關鍵的問題（運行此命令不會更改任何內容）
在project_name文件夾中，我運行了cd semantic
然后文件夾semantic ，我做了gulp build

這就是我假設應該安裝語義UI的方式。

現在，為了幫助您了解我的項目的結構，它看起來像這樣：

所有這些文件都是在執行create-react-app..並遵循我已完成的步驟時create-react-app..的標准默認文件create-react-app..

我的App.js甚至可以重新創建，它看起來像這樣（我假設這個文件是將return()內的內容呈現到位於目錄public中的index.html中存在的root div的組成部分，您可以在我的圖像中看到該div。。

在相同index.html在public文件夾，我也在添加這部分<head>節

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
  <script src="semantic/dist/semantic.min.js"></script>

我假設這是所有語義UI組件的組成部分。

假設我想查看語義UI的多選組件

此代碼定義：

import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const options = [
  { key: 'angular', text: 'Angular', value: 'angular' },
  { key: 'css', text: 'CSS', value: 'css' },
  { key: 'design', text: 'Graphic Design', value: 'design' },
  { key: 'ember', text: 'Ember', value: 'ember' },
  { key: 'html', text: 'HTML', value: 'html' },
  { key: 'ia', text: 'Information Architecture', value: 'ia' },
  { key: 'javascript', text: 'Javascript', value: 'javascript' },
  { key: 'mech', text: 'Mechanical Engineering', value: 'mech' },
  { key: 'meteor', text: 'Meteor', value: 'meteor' },
  { key: 'node', text: 'NodeJS', value: 'node' },
  { key: 'plumbing', text: 'Plumbing', value: 'plumbing' },
  { key: 'python', text: 'Python', value: 'python' },
  { key: 'rails', text: 'Rails', value: 'rails' },
  { key: 'react', text: 'React', value: 'react' },
  { key: 'repair', text: 'Kitchen Repair', value: 'repair' },
  { key: 'ruby', text: 'Ruby', value: 'ruby' },
  { key: 'ui', text: 'UI Design', value: 'ui' },
  { key: 'ux', text: 'User Experience', value: 'ux' },
]

const DropdownExampleMultipleSelection = () => (
  <Dropdown placeholder='Skills' fluid multiple selection options={options} />
)

export default DropdownExampleMultipleSelection

我在哪個特定文件中添加此代碼，並在執行npm start時呈現/返回UI？

如果遵循上面列出的步驟，則可以從文件夾重新創建我的文件結構。

Answer 1

在App.js中嘗試

import React, { Component } from 'react';
import DropdownExampleMultipleSelection from '/path/yourFile';

class App extends Component {
  render() {
    return (
      <div>
           <DropdownExampleMultipleSelection></DropdownExampleMultipleSelection> 
      </div>
    );
  }
}

export default App;

我剛剛安裝了Node.js，然后安裝了React.js，需要一些如何顯示單個語義UI組件的信息

問題描述

1 個解決方案

解決方案1
-1 2018-10-07 22:07:52

我剛剛安裝了Node.js，然后安裝了React.js，需要一些如何顯示單個語義UI組件的信息

問題描述

1 個解決方案

解決方案1 -1 2018-10-07 22:07:52

解決方案1
-1 2018-10-07 22:07:52