부트 스트랩을 reactjs와 함께 사용하는 방법

저는 React.js의 초보자입니다. 문서와 튜토리얼을 읽기 시작한 이래로 부트 스트랩이 React.js와 어떻게 작동하는지 모르겠습니다.부트 스트랩을 reactjs와 함께 사용하는 방법

reactstrap 또는 react-bootstrap과 같은 몇 가지 npm 패키지를 보았지만 이해가되지 않습니다.

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    alert('A name was submitted: ' + this.state.value); 
    event.preventDefault(); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    ); 
    } 
}

내가 맞다면 ...이

그래서, 내 질문은 다음 중 하나입니다 :

부트 스트랩의 또는 <script/>을 body 또는 헤더에 index.html에 추가해야합니까?

또는

내가 내 App.js 파일에서 부트 스트랩을 포함하는 방법에서 그것을 사용해야합니까?

PS : 지금 년 동안 개발하고하지만, 모든 자바 스크립트/HTML/CSS 웹을 결코하지 않았다 당신은 어떤 조언을, 그래서 만약 사전에 감사합니다!

나는 당신의 질문에 제안 모두가 올바른지, 귀하의 질문에 대답하기 위해 어떤 도움

출처

2017-12-10 Emixam23

필요한 것은 바로 부트 스트랩을 추가하는 것입니다. 그렇다면'index.html'에 css cdn을 추가해야합니다. –

하지만 index.html에서 추가하면 js 쪽에서 어떻게 사용합니까? – Emixam23

을위한 HCI

감사를 실현하기 위해 부트 스트랩 그리드의 논리를 사용해야합니다. 어느쪽으로 든 할 수 있습니다.

는에 bootstrap CDN을 포함하여 index.html

npm

yarn

React-Bootstrap

App.js

당신은 첫 번째 방법은 당신이해야 할 모든 것을 할 경우 Bootstrap CDN을 index.html에 추가하고 Javascript로 클래스에 액세스하면 정상적으로 작동합니다.

참고 :에서 클래스를 액세스하는 동안 className을 사용하여 반응하지 여기

class 당신이 당신의 index.html

class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     value: '' 
 
    }; 
 

 
    this.handleChange = this.handleChange.bind(this); 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
    this.setState({ 
 
     value: event.target.value 
 
    }); 
 
    } 
 

 
    handleSubmit(event) { 
 
    alert('A name was submitted: ' + this.state.value); 
 
    event.preventDefault(); 
 
    } 
 

 
    render() { 
 
    return ( 
 
    <div> 
 
     <form onSubmit = {this.handleSubmit} > 
 
     <label> 
 
      Name: 
 
     </label> 
 
     <input type = "text" className="form-control" 
 
      value = {this.state.value} 
 
      onChange = {this.handleChange}/> 
 
     <input type = "submit" 
 
      value = "Submit" className="btn btn-primary"/> 
 
    </form> 
 
    </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(< App/> , document.getElementById('root'));

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> 
 
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
 
<div id='root'></div>

에 CDN을 추가하는 방법의 예입니다

편집 : - 설치 한 가정은

index.html을

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="/style/style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>   
    <!-- And then your bundled js --> 
    </head> 
    <body> 
    <div class="container"></div> 
    </body> 
    <script src="/bundle.js"></script> 
</html>

하는 index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import App from './components/app'; //Make sure it's the path to your App.js 

ReactDOM.render(
    <App /> 
    , document.querySelector('.container'));

에게 Official Installation

사용하여 다음과 같은 파일 구조에 따라 반작용

SRC/구성 요소 /이, 그것은 작동합니다

import React, { Component } from 'react'; 

export default class App extends Component { 
    render() { 
    return (
     <div> 
     <form onSubmit = {this.handleSubmit} > 
      <label> 
      Name: 
      </label> 
      <input type = "text" className="form-control" 
      value = {this.state.value} 
      onChange = {this.handleChange}/> 
      <input type = "submit" 
      value = "Submit" className="btn btn-primary"/> 
     </form> 
     </div> 
    ); 
    } 
}

확인 app.js.

출처

2017-12-10 23:55:19

정확히 어디에 코드를 넣을 지 지정할 수 있습니까? 첫 번째 부분을'App.js'에 넣었고 두 번째 부분은'intel.html' 본문에 넣었습니다. 디자인은 당신 것 같지 않습니다 :/ – Emixam23

어떻게 설치 했습니까? 공식 문서에 따르면,'App.js'에 1 부,'index.html'에 2 부를 추가합니다. 그러나'index.js'에서 약간의 변경이 필요할 수도 있으므로 알아 두어야 할 것입니다. 코드를 github에 넣을 수 있다면 더 쉽게 볼 수 있으며 필요한 부분을 변경할 수 있습니다. –

완벽한! :) 감사합니다 작동합니다. – Emixam23

부트 스트랩을 reactjs와 함께 사용하는 방법

답변

관련 문제