React.js (5) Оформление. React + CSS

React.js (5) Оформление. React + CSS - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul React.js (5) Оформление. React + CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Babel, Artikel bootstrap, Artikel ES6, Artikel javascript, Artikel npm, Artikel React.js, Artikel Webpack, Artikel Теория программирования, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : React.js (5) Оформление. React + CSS
link : React.js (5) Оформление. React + CSS

React.js (5) Оформление. React + CSS

Пришло время сделать наше приложение более привлекательным. Для этого давайте научимся работать со стилями в React.js

Все статьи по React.js

Для того, чтобы стилизовать React.js приложение существует огромное количество подходов, библиотек, разнообразных стилизованных компонентов. Мы возьмем самый популярный фреймворк - Bootstrap. Даже когда вы принимаете решение использовать Bootstrap, вы можете легко найти в Гугл множество библиотек, которые интегрировали в себя Bootstrap и дают вам возможность использовать уже готовые стилизованные компоненты. Вы можете выбрать для себя любую из них. Этих библиотек огромное количество.

Мы пойдем классическим путем и будем использовать чистый (классический) css от Bootstrap.

Подключение Bootstrap.

Для этого идем в консоль и устанавливаем с помощью npm сам bootstrap



   npm install bootstrap

npm - установит нам библиотеку и теперь мы сможем подключать стили. Для того, чтобы не тянуть стили руками в какой-либо html файл, мы можем подключать в наш проект css стили, как модули.

Это нам позволит сделать webpack, у которого для этого есть специальные возможности (модули), которые позволят подключать стили css в наш проект.

Для этого достаточно в файле App.js написать import и какой именно css модуль мы хотим подключить.

В нашем случае это 'bootstrap'. Обратите внимание, что подключаем без всяких слешей, потому что webpack и так поймет, что этот модуль стоит искать в папке -> node_modules. Указываем путь к файлу bootstrap.css.

Подключать файл bootstrap.min.css не имеет смысла, поскольку перед продакшн вы будете все равно минимизировать файлы с помощью webpack.

App.js



  import React from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  function App() {
    return (
      <div>
          <h1>App Name</h1>
          <ArticleList articles={articles}/>
      </div>
    );
  }

  export default App

Теперь мы можем использовать bootstrap в нашем проекте.

Для того, чтобы дать класс какому-либо элементу нам достаточно написать className = "имя класса"

Например, пометить весь код в контейнер - в файле App.js первому тегу div добавили -



<div className="container" >

Убедиться, что все работает, вы можете открыв браузер и "исследовав элемент"

Класс добавился. И стили bootstrap прменились к нашим элементам.

Теперь давайте оформим каждый элемент.

Завернем наш header в div классом jumbotron, а самому заголовку дадим класс display-3



  import React from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  function App() {
    return (
      <div className="container">
        <div className="jumbotron">
          <h1 className="display-3">App Name</h1>
        </div>  
          <ArticleList articles={articles}/>
      </div>
    );
  }

  export default App

Результат:

Теперь, перейдет к оформлению статей.

В файле Article.jsмы добавим стили сразу на всю статью в className="card".

Заголовок поместим в header - div className="card-header", а сам текст статьи и дату в отдельный div className="card-header". Тело статьи в div className="card-body",

Article.js



import React, {Component} from 'react'

  class Article extends Component {
        state = {
          isOpen: true
      }

    render() {
        const {article} = this.props
        const body = this.state.isOpen && <section>{ article.text }</section> 
      return(
        <div className="card">
          <div className="card-header">
            <h2>
                { article.title }
                <button onClick={this.handleClick}>
                    {this.state.isOpen ? 'close' : 'open'}
                </button>
            </h2>
          </div>
          <div className="card-body"> 
               { body }
                <h3>
                   "creation date : "{ (new Date(article.date)).toDateString()}
                </h3>
          </div>
        </div>
      );
    }
    handleClick = () =>{
      console.log('---', 'clicked')
      this.setState({
        isOpen: !this.state.isOpen
      })
    }
  }

  export default Article

Посмотрим:

Немного изменим тело самой статьи и кнопку.

В файле Article.js


  import React, {Component} from 'react'

class Article extends Component {
      state = {
        isOpen: true
    }

  render() {
      const {article} = this.props
      const body = this.state.isOpen && <section className="card-text">{ article.text }</section> 
    return(
      <div className="card">
        <div className="card-header">
          <h2>
              { article.title }
              <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right">
                  {this.state.isOpen ? 'close' : 'open'}
              </button>
          </h2>
        </div>

        <div className="card-body"> 
              <h6 className="card-subtitle text-muted">
                 "creation date : "{ (new Date(article.date)).toDateString()}
              </h6>
              { body }
        </div>

      </div>
    );
  }
  handleClick = () =>{
    console.log('---', 'clicked')
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
}

export default Article

Результат:

Делаем статью на пол экрана и работаем с инлайновыми стилями.

Для того. чтобы дать инлайновый стиль какому-либо элементу, достаточно прописать property style и в двойных фигурных скобках прописать свойство и значение.

Никакой магии в этом нет. Просто одни фигурные скобки говорят о том, что мы используем javascript переменную (выражение, или что-то еще), а вторые скобки говорят, что внутри обычная литеральная нотация.

Например так: <div className="card" style={{width:'50%'}}>

В принципе, мы могли бы вынести это таким вот образом -

const style = {width: '50%'}

а уже в самом теге оставить только <div className="card" style={style}>

Можно писать и так и так.


import React, {Component} from 'react'

  class Article extends Component {
        state = {
          isOpen: true
      }

    render() {
        const {article} = this.props
        const style = {width:'50%'}
        const body = this.state.isOpen && <section className="card-text">{ article.text }</section> 
      return(
        <div className="card" style={style}>
          <div className="card-header">
            <h2>
                { article.title }
                <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right">
                    {this.state.isOpen ? 'close' : 'open'}
                </button>
            </h2>
          </div>
          <div className="card-body"> 
                <h6 className="card-subtitle text-muted">
                   "creation date : "{ (new Date(article.date)).toDateString()}
                </h6>
                { body }
          </div>
        </div>
      );
    }
    handleClick = () =>{
      console.log('---', 'clicked')
      this.setState({
        isOpen: !this.state.isOpen
      })
    }
  }

  export default Article

То, что получилось:

Для того, чтобы позиционировать нашу статью по центру добавим: mx-auto элементу

.card <div className="card mx-auto" style={style}>

Теперь нам остается убрать маркер списка.

Для этого мы напишем в файле ArticleList.js специальный стиль для тега li, а за одно научимся создавать собственные css-модули.

Нам придется создать отдельный css- файл для нашего ArticleList.js и в таких случаях, чтобы не создавать путаницу в общей папке компонентов, лучше создать для такого компонента отдельную папку!

Подключением файла стилей React - компоненту.

В папке components мы создадим отдельную папку -> ArticleList внутри которой мы будем держать реактовский код index.js, так и стили ArticleList.js

В файл index.js мы вставим весь код из нашего ArticleList.js, только поправим пути:

index.js



  import React from 'react'
  import Article from '../Article'
  import './style.css'
  export default function ArticleList({articles}) {
        const articleElements = articles.map(article =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
  }

и здесь же создадим файл style.css -здесь будут стили данного компонента.

Файл ArticleList.js удаляем.

При этом webpack поймет, что в App.js ->ArticleList - это папка, и коль в ней есть файл index.js, то он возьмет именно этот файл. Поэтому файл index.js не нужно отдельно указывать в этом пути (т.е делать так - > import ArticleList from './ArticleList/index.js')
App.js



  import React from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  function App() {
    return (
      <div className="container">
        <div className="jumbotron">
          <h1 className="display-3">App Name</h1>
        </div>  
          <ArticleList articles={articles}/>
      </div>
    );
  }

  export default App

Теперь добавим стили компоненту в файле style.css

Лучше всего себя показала методология БЭМ (сайт в России с vpn - отдельное спасибо РосКомНадзору) Блок Элемент Модификатор от Яндекса. Вы можете с ней ознакомиться. Мы пока что запишем:

style.css



   .article-list__li {
     list-style: none;
    }

Теперь, для того, чтобы воспользоваться этими стилями. нам необходимо сделать импорт. Мы сделаем это на уровне нашего компонента в файле index.js import './style.css'

Теперь каждый раз, когда кто-то захочет подключать наш компонент, он будет его подключать вместе с соответствующими стилями.

Нам остается только добавить класс className="article-list__li" к тегу li

Сохраняем, и... Не пугайесь. Ваш компилятор может сломаться и получите такое предупреждение, вместо приложения.

Это происходит, потому что webpack ожидал файл ArticleList.js, а теперь он живет в папке.

Чтобы это исправить, достаточно перезапустить сервер -> Ctrl + C



    npm start

Для того. чтобы он собрал уже все с index.js Таким образом, мы с вами подключили Bootstrap к нашему React-приложению, научились добавлять стили инлайн двумя способами и научились подключать стили непосредственно к React - компонентам. сделав их по настоящему независимыми "строительными блоками" React - приложения.

Все статьи по React.js

Файлы, которые мы изменяли в этот раз:

components/App.js



  import React from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  function App() {
    return (
      <div className="container">
        <div className="jumbotron">
          <h1 className="display-3">App Name</h1>
        </div>  
          <ArticleList articles={articles}/>
      </div>
    );
  }

  export default App

components/Article.js



  import React, {Component} from 'react'

  class Article extends Component {
        state = {
          isOpen: true
      }

    render() {
        const {article} = this.props
        const style = {width:'50%'}
        const body = this.state.isOpen && <section className="card-text">{ article.text }</section> 
      return(
        <div className="card mx-auto" style={style}>
          <div className="card-header">
            <h2>
                { article.title }
                <button onClick={this.handleClick} className="btn btn-primary btn-lg float-right">
                    {this.state.isOpen ? 'close' : 'open'}
                </button>
            </h2>
          </div>
          <div className="card-body"> 
                <h6 className="card-subtitle text-muted">
                   "creation date : "{ (new Date(article.date)).toDateString()}
                </h6>
                { body }
          </div>
        </div>
      );
    }
    handleClick = () =>{
      console.log('---', 'clicked')
      this.setState({
        isOpen: !this.state.isOpen
      })
    }
  }

  export default Article

components/ArticleList/index.js



  import React from 'react'
  import Article from '../Article'
  import './style.css'
  export default function ArticleList({articles}) {
        const articleElements = articles.map(article =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
  }

components/ArticleList/style.css



  .article-list__li {
    list-style: none;
  }

Demikianlah Artikel React.js (5) Оформление. React + CSS

Sekianlah artikel React.js (5) Оформление. React + CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel React.js (5) Оформление. React + CSS dengan alamat link https://dev-create.blogspot.com/2018/05/reactjs-5-react-css.html

React.js (5) Оформление. React + CSS

React.js (5) Оформление. React + CSS

Подключение Bootstrap.

Делаем статью на пол экрана и работаем с инлайновыми стилями.

Подключением файла стилей React - компоненту.

Файлы, которые мы изменяли в этот раз:

Demikianlah Artikel React.js (5) Оформление. React + CSS

Fanspage Kami

Categories

Menu Footer Widget

React.js (5) Оформление. React + CSS

Baca juga

React.js (5) Оформление. React + CSS

Подключение Bootstrap.

Делаем статью на пол экрана и работаем с инлайновыми стилями.

Подключением файла стилей React - компоненту.

Файлы, которые мы изменяли в этот раз:

Demikianlah Artikel React.js (5) Оформление. React + CSS

Anda mungkin menyukai postingan ini

TEMUKAN KAMI

Fanspage Kami

Categories

Menu Footer Widget