2019년 React의 JS에 있는 CSS-React JSS를 살펴보겠습니다.

어이제 시리즈의 두 번째 부분으로 돌아왔습니다. js 솔루션에서 React 응용 프로그램 스타일을 디자인하는 데 사용되는 CSS를 토론하기로 했습니다.
만약 이것이 당신의 작품이라면, 언제든지 나의 첫 번째 작품을 보십시오!저는 기초 지식부터 시작해서 React의 순수한 CSS를 토론했고 CSS의 일반적인 함정에 대한 자원과 React에서 만났던 개인적인 함정을 제공했습니다.나는 또한 React의 내연 스타일과 그 중의 몇 가지 문제를 어떻게 해결하는지 계속 소개할 것이다. 그러나 유감스럽게도 그것은 W를 완전히 채택하지 않았다.
좋은 점은 매트릭스 인용으로 가득 차 있기 때문에 적어도 그것을 보아야 한다는 것이다.

2019년 React에서 JS의 CSS-CSS 및 인라인 스타일 살펴보기

Phil Tietjen・ 2019년 9월 9일・ 5분 읽기

#webdev #react #css #tutorial

JSS란 무엇입니까?

나는 가능한 한 일을 간단하게 유지할 것이다. 그러면 우리는 React를 사용하여 실현할 수 있기 때문에 우리는 편리한 dandy JSS 문서를 사용하여 우리에게 무엇을 알아야 하는지 알려줄 것이다.

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.

Jee Wizz Philly boy, 이것은 당신들이 지난번에 보여준 React 내연 스타일과 매우 비슷하게 들립니다.실제로 유사하게 이루어졌기 때문에 저는 JSS를 제 두 번째 항목으로 삼기로 결정했습니다. 왜냐하면 우리는 자바스크립트의 작문 스타일에 익숙해졌기 때문입니다!우리는 엔진 뚜껑 아래의 작업이 좀 다르기 때문에 같은 장점과 약간의 추가 수확을 얻었다.

JSS is framework agnostic. It consists of multiple packages: the core, plugins, framework integrations and others.

총결산
핵심 - 자바스크립트를 사용하여 우리의 스타일을 설명할 수 있습니다.
플러그인 - 기능을 추가하기 위해 핵심적인 것에 추가할 수 있습니다. 우리는 우리의 스타일을 어떻게 설명합니까?
프레임워크 통합 - JSS를 특정 프레임워크와 쉽게 결합하여 사용할 수 있습니다!

이것이 바로 React JSS의 용무지입니다.

Let's pretend that this little guy here is React-JSS. for me?

React JSS는 React 응용 프로그램에서 JSS를 사용할 수 있는 프레임워크 통합입니다.이것은 단독 패키지이기 때문에 우리는 JSS 핵심을 설치할 필요가 없다. 우리는 React JSS 패키지만 필요로 한다.JSS 플러그인과 구성 설정도 함께 제공될 수 있습니다.우선 JSS에 반응하기 위해 마지막으로 신뢰할 수 있는 단추 구성 요소와 내연 스타일을 비교해 봅시다.
내연 스타일

// Button.js
import React from 'react'

const Button = () => {
  const buttonGreen = {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonGreen}>
      I think I'm green
    </button>
  )
}

반응 JSS

React-JSS combining with React

// Button.js
import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  buttonGreen: {
    backgroundColor: "green",
    border: "2px solid white",
    borderRadius: "2rem"
  }
})

const Button = () => {
  const {buttonGreen} = useStyles()

  return(
    <button className={buttonGreen}>
      I think I'm green
    </button>
  )
}

Sorry, maybe it's more like this.

구현 상황은 어떻게 변화합니까?

React JSS 패키지에서 createUseStyles 함수를 가져왔습니다.

우리는 호출useStyles을 통해 createUseStyles 갈고리를 만들었다.

매개변수

에서 객체 속성 buttonGreen 아래의 CSS 스타일을 설명합니다.

우리는 createUseStyles 갈고리의 되돌아오는 값에서 buttonGreen 구조를 풀었다.

우리는 useStyles 속성에 buttonGreen 전달하지 않고 className

지난번에 우리의 버튼 구성 요소와 우리의 스타일에 영향을 준 도구를 비교해 봅시다.
아이템과 내장 스타일을 결합하여 사용

// Button.js
import React from 'react'

const Button = ({backgroundColour, children}) => {
  const buttonStyles = {
    backgroundColor: backgroundColour,
    border: "2px solid white",
    borderRadius: "2rem"
  };

  return(
    <button style={buttonStyles}>
      {children}
    </button>
  )
}

React JSS와 함께 도구 사용하기

// Button.js
import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
    buttonStyles: {
      backgroundColor: backgroundColour => backgroundColour,
      border: "2px solid white",
      borderRadius: "2rem"
    }
})

const Button = ({backgroundColour, children}) => {
  const {buttonStyles} = useStyles(backgroundColour)

  return(
    <button className={buttonStyles}>
      {children}
    </button>
  )
}

또한: 이런 용법은 두 가지 실현에 적용된다!

// SomePage.js
import React from 'react';
import Button from 'Button';

const SomePage = () => (
  <Button backgroundColour="blue">I'm going to be blue</Button>
)

구현 상황은 어떻게 변화합니까?

우리는 style 도구를 매개 변수로 backgroundColour에 전달

우리의 useStyles 중에서 우리는 createUseStyles를 함수 값으로 방문하고 그에 상응하여 분배할 수 있다.

React-JSS in React looks pretty cool huh?

내연에서 React JSS로의 변화는 우리에게 어떤 이익을 가져다 줍니까?

JSS

JSS는 내연 스타일이 아닌 CSS를 생성합니다.

JSS는 선택기의 충돌을 피하기 위해 해시 클래스 이름을 생성합니다.

JSS는 관리 애니메이션을 사용할 수 있는 효율적인 CSS 업데이트를 제공합니다.

다음은 features list from the JSS documentation 의 전체 이점 목록입니다.
React JSS

React 기반 컨텍스트 API에서 주제를 사용할 수 있습니다.

렌더 어셈블리에서 CSS만 추출합니다.

설치된 구성 요소와 설치되지 않은 구성 요소에 따라 생성된 스타일시트를 만들고 삭제합니다.

전체 이점 목록 참조React-JSS documentation

저는 개인적으로 React JSS의 어떤 부분을 좋아합니까?

이해하기 쉽다

React JSS는 내연 스타일의 구현 방식에서 멀리 떨어지지 않기 때문에 내연 스타일로 쉽게 넘어갈 수 있습니다.처음 학습하든 응용 프로그램을 내장에서 반응 JSS로 변환하든 상관없습니다.

연결

이것은 정말 간단한 점과 연결될 수 있지만, React의 갈고리 API가 출시된 이래로 나는 줄곧 그의 맹종자였다.이것 또한 JSS에 반응하는 방식을 시도해 왔고 그것을 좋아하지 않는다는 것을 밝히고 인정할 수 있는 좋은 기회이다.당시에, 너는 반드시 Higher Order Component 스타일 변수를 구성 요소에 주입해야 했다. 다른 구성 요소에 비해 이것은 나에게 너무 많다.그러나 backgroundColour를 가진 비교적 새로운 API는 나에게 거의 전환점이다.이것은 그로 하여금 현재 발생하고 있는 일을 이해하기 쉽고 타자를 치기 쉽게 한다.

Html에 인라인 스타일 없음

예!내연 스타일링의 단점 기억나세요?좋아, 그것은 이곳에서 거의 먼지를 털지 않을 거야.

저는 개인적으로 React JSS의 어떤 부분을 좋아하지 않습니까?

객체 스타일

나는 여전히 Javascript 대상에서 나의 스타일을 묘사하는 것을 좋아하지 않는다.페티라고 불러도 되지만 문법이 튀어나오는 것을 놓치는 것을 좋아하지 않아서 제가 쓴 것에 대해 3%를 더 생각해야 합니다. 왜냐하면 제 뇌는 CSS를 자바스크립트로 바꿔야 하기 때문입니다.원본 CSS를 가져와 변환하는 것도 지루한 일입니다.

클래스 이름에 스타일 지정

이것은 확실히 createUseStyles 에서 style={styles} 로 전환하는 것을 쉽게 했지만, 나는 그것이 구성 요소 파일에 있는 외관을 좋아하지 않는다.JSS가 백그라운드에서 CSS 스타일시트를 만들고 있고 구성 요소가 산열 클래스를 인용해야 한다는 것을 감안하면 일리가 있다.나는 단지 더욱 아름다운 형식이 있기를 바란다.

Was that too much foreshadowing for the next entry?

React JSS를 사용할 수 있습니까?

이것은 나의 선택과 포아스널 검사 시간이 될 것이다.이것은 react 응용 프로그램을 설계하는 간단한 해결 방안으로 충분한 성능을 가지고 사용하기 쉽다.인라인 스타일을 사용하는 응용 프로그램을 사용하고 있거나 인라인 스타일에만 익숙하다면 React JSS를 사용하는 것이 좋습니다.
다음 방송에서 뵙기를 바랍니다!2019년이 끝나기 전에 이 시리즈를 완성할 수 있는지 살펴보자.완성이 무엇을 의미하든지!
어이만약 네가 나와 걷거나 거기서 이야기를 나누고 싶다면, 나는 있을 것이다.나는 때때로 물건을 거기에 붙인다!