Я на самом деле немного перегружен здесь ... Я гуглил много, но я не понял, как увидеть компонент React на моей странице ... Я супер новичок в веб-разработке, хотя я знаю основы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 - Затем я запустил
npm install semantic-ui --save, как указано на веб-сайте семантического интерфейса пользователя npm audit fix, чтобы исправить возникшую проблемуявляются критическими (запуск этого ничего не изменил) - В папке
project_name, япобежал cd semantic - А затем папка
semantic, я сделал gulp build
Вот как я предполагаю, что я должен установить Semantic UI.
Чтобы помочь вам понять, как устроен мой проект, он выглядит следующим образом:
project_name structure">
Все эти файлы являются стандартными файлами по умолчанию, которые создаются привы делаете create-react-app.. и выполняете шаги, которые я проделал
My App.js, которые даже вы можете воссоздать, выглядит примерно так (этот файл, который я предполагаю - это то, что отрисовывает все, что находится внутри return(), root div присутствует в index.html, расположенном в каталоге public, который вы можете видеть на моем изображении ..
В том же index.html в папке public я также добавляю эту часть в<head> section
<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>
, который, как я предполагаю, включает в себя все компоненты Semantic UI ..
Допустим, я хочу видеть этот компонент множественного выбора SemanticUI
, который определяется этим кодом:
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?
Вы можете воссоздать мою файловую структуру из папки, если вы выполните действия, перечисленные выше ...