Reactjs - импорт CSS / JS в компонент

Question

Я пытаюсь создать веб-страницу, используя тему HTML на Reactjs . Я изучил и нашел 4 способа импортировать CSS на по этой ссылке . Все эти способы выводятся одинаково, т.е. <style>MY_CSS</style> непосредственно перед закрытием тега HEAD.

Это нормально для одного CSS, но когда мы используем несколько CSS, это может конфликтовать с другим.

Итак, мой вопрос: можем ли мы импортировать CSS, чтобы он отображался не как <style></style>. Поскольку <style> теги работают как встроенный CSS, и я не хочу использовать его встроенным.

2-й вопрос: как я могу импортировать Js? Поскольку я использую requirejs для загрузки нескольких js, для этого я пытаюсь импортировать require.config.js, где другие мои js называются.

Пожалуйста, посмотрите, что я получаю

нужно иметь вот так ниже

Пожалуйста, помогите, заранее спасибо!

Answer 1

Импортируйте ваш файл .css с правильного пути. Я безуспешно пытался использовать <link rel="stylesheet" href="css/style.css"> в index.html. Но вместо этого:

index.html

<link rel="stylesheet" href="/src/css/style.css"/>

style.css

div.custom-div {
   background-color: red;
}

Теперь вы можете использовать

<div className="custom-div">

Answer 2

Это просто делается через обычный ES. Например:

import React, { Component } from 'react'
import './SomeFileWithStyle.css'

Вторая строка импортирует файл CSS, содержащий, ну, в общем, код CSS. Теперь вы можете использовать классы, указанные там. Следуйте этому руководству, если вам нужна дополнительная помощь: Стиль и CSS - React .

Подробнее об операторе импорта ES читайте здесь: import - JavaScript | MDN

Answer 3

Вам необходимо использовать css-загрузчик при создании пакета с wepback.

Установите его:

npm install css-loader --save-dev

Подробнее здесь

Answer 4

Самый простой способ узнать React и способ структурирования проекта React (включая все, от css до нескольких js файлов и т. Д.) - это использовать create-react-app

Позвольте мне немного уточнить.

React - библиотека JavaScript. Например, вы можете получить библиотеку из cdn и включить ее в свой файл index.html почти так же, как вы, например, получили бы jquery. И с включенной библиотекой вы можете делать такие вещи:

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);
const container = document.getElementById('root');
ReactDOM.render(element, container);

Поскольку у вас есть библиотека из cdn, у вас есть доступ к ее методам, например createElement, и библиотека будет искать узел в dom с id с именем root и вставлять туда h1 узел, содержащий Hello, world!. Затем вы можете применить к вновь созданному узлу стиль по вашему выбору.

Этот пример взят из здесь

Хотя, конечно, можно использовать React таким образом, на мой взгляд, не стоит.

Что вам нужно сделать, это выполнить шаги, описанные в ссылке create-react-app, и запустить проект, используя create-react-app. Это даст вам предварительно настроенный проект, который позволит вам использовать библиотеку современным способом.

Проект, который предлагает вам create-react-app, настроен на использование инструмента с именем webpack и инструмента с именем babel. Webpack - это module bundler. Используя набор правил, он возьмет несколько файлов и свяжет их вместе. Как и почему это работает, выходит за рамки этого вопроса. Babel - это компилятор JavaScript или преобразователь синтаксиса. Также используя набор правил, он превращает ES6 в обычный javascript. Опять же, как и как выходят за рамки. Что вам следует знать, так это то, что благодаря webpack и babel вы сможете писать такой код.

import styles from 'style.module.css'

Это делается без усилий с вашей стороны, потому что все уже настроено create-react-app.

Вот почему я рекомендую вам начать с этого. Просто установите его, загрузите проект и взгляните на настройку App.js. Там вы увидите css импорт, component импорт и дадите вам хороший, если поверхностный обзор того, как работает современный React проект.