Question

我实际上在这里有点不知所措..我已经在google上搜索了很多，但是我还没有弄清楚如何在页面上看到React组件。.尽管我知道一些基础知识，但我对Web开发还是超级新手HTML，CSS和JavaScript

这是我从安装Node开始一直遵循的所有步骤，它们是非常标准的步骤。

从.pkg安装节点
将路径添加到.bash_profile
转到父目录然后执行sudo npm install create-react-app -g，尽管我认为转到任何特定目录都不重要，因为-g表示它将在全局安装。
留在父目录中，然后执行create-react-app project_name
npm start：向我显示了一个带有漂亮React标志的默认页面
在project_name步骤创建的同一文件夹create-react-app中，我运行了npm install -g gulp
然后我运行了语义UI网站上列出的npm install semantic-ui --save
npm audit fix来解决一些它认为很关键的问题（运行它并没有改变任何东西）
在project_name文件夹中，我运行了cd semantic
然后在文件夹semantic中，我做了gulp build

这就是我假设应该安装语义UI的方式。

现在为了帮助您了解我的项目的结构，它看起来像这样：

所有这些文件都是您执行create-react-app..并按照我完成的步骤创建的标准默认文件

即使您也可以重新创建的我的App.js看起来像这样（我假设该文件是将return()内部的内容呈现给root中的index.html div的东西位于您可以在我的图片中看到的目录public中。

在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组件的组成部分。

比方说我想看这个Multiple Selection component of Semantic 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中尝试

.torre{
height: 500px;
width: 300px;
border: black solid 2px;
display: flex;
flex-direction: column;
align-items: center;
top: 100%;
}

我刚刚安装了Node.js，然后安装了React.js，需要一些如何显示单个语义UI组件的信息

1 个答案: