반응형
하위 등급의 반응 코드에 대한 구문 강조 표시
기본적인 리액트 코드를 숭고한 글씨로 쓰기 시작했어요구문 강조 표시는 다음과 같습니다.부분적으로 강조되어 있습니다.완전한 구문 강조 표시를 위해 사용할 수 있는 권장 서브 라임 플러그인이 있습니까?
import React, { Component } from 'react'
import { connect } from 'react-redux' // <-- is the glue between react and redux
import { bindActionCreators } from 'redux'
import { selectBook } from '../actions/index'
// there is no intrinsic connection between React and Redux
// they are two seperate libraries
// they are connected using a seperate library called ReactRedux
// container? its a React component that hasa direct connection to state managed by Redux
class BookList extends Component {
constructor(props) {
super(props)
//this.props = props;
}
renderList() {
return this.props.books.map((book) => {
return (
<li key={book.title} className="list-group-item">{book.title}</li>
)
})
}
render() {
return (
<ul className="list-group col-sm-4">
{this.renderList()}
</ul>
)
}
}
// function is the glue between react and redux
function mapStateToProps(state) {
// Whatever gets retrieved from here will show up as props inside
// of book-list
return {
books: state.books
}
}
// anything returned from this function will end up as props on the BookList container
function mapDispatchToProps(dispatch) {
return bindActionCreators({selectBook: selectBook}, dispatch)
}
// Promote BookList from a component to a container - it needs to know
// about this new dispatch method, selectBook. Make it available as a prop
export default connect(mapStateToProps, mapDispatchToProps)(BookList);
편집: [잘못된 구문 수정, 코드 텍스트 추가]
babel을 설치하면 구문 강조 표시가 수정됩니다.
sublime3에 babel을 설치하는 단계:
- Windows의 경우: ++ShiftP를 누릅니다(Mac의 경우:ShiftP ++).
- 그런 다음 입력합니다.
install
를 선택합니다.Package control: Install Package
- 그런 다음 입력합니다.
Babel
를 선택합니다.'Babel-Snippets'
. 잠시 후 babel이 설치됩니다. - 다음으로 Sublime3 Editor에서 Babel 구문을 설정합니다.
View > Syntax > Babel > Javascript
일부 사용자의 경우,Babel
4단계에서 누락되었습니다.추가 설치 가능 Babel
같은 절차를 밟아 선택함으로써Babel
대신 이번에는Babel-Snippets
스텝 3에서.
테스트한 것을 확인합니다.
를 인스톨 할 필요가 있습니다.babel-sublime
플러그 인.
설치처:package control
숭고한
https://github.com/babel/babel-sublime 의 링크는 다음과 같습니다.
- 순서 1 - [Package Control](++)으로 이동합니다.
- 순서 2 - 설치 패키지 선택
- 스텝 3 - JSX 플러그인을 검색하여 설치합니다.
- 스텝 4 - 다음으로 Sublime3 Editor에서 JSX 구문을 설정합니다.[ View ]> [ Syntax ]> [ JSX ]를 표시합니다.
파일 이름 사용.jsx
확장
1- 패키지 제어로 이동합니다.2- naomi-syntax를 검색하여 설치합니다.3- Sublime3 Editor에서 naomi-syntax 구문을 설정합니다.[ View ]> [ Syntax ]> [ nomii - syntax
구문을 JSX로 설정하여 해결할 수 있었습니다.이 플러그인은 설치할 필요가 없었습니다.
언급URL : https://stackoverflow.com/questions/41319547/syntax-highlighting-for-react-code-in-sublime
반응형
'programing' 카테고리의 다른 글
JSON 해석 및 결과 접근 방법 (0) | 2023.03.06 |
---|---|
JSON 키 이름 가져오기 (0) | 2023.03.06 |
재사용 가능한 컴포넌트인 디렉티브에서 퍼블릭 API를 공개하려면 어떻게 해야 합니까? (0) | 2023.03.06 |
TypeScript의 개체 리터럴에 정의를 입력합니다. (0) | 2023.03.06 |
React에서 JSON 파일 가져오기 (0) | 2023.03.06 |