我刚刚安装了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