ReactJS не компилирует компоненты Boostrap. возвращает только компоненты HTML. 0xerr011d

Пишу простой код для присвоения. Я ссылаюсь на документацию и несколько серий видеоуроков на YouTube. Мой код реакции правильный. Я не получаю никаких ошибок при запуске кода. но эти элементы response-boostrap не отображаются. этот код возвращает только вывод html. пожалуйста, взгляните на этот код и помогите мне решить эту проблему.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Login from './components/Login';

import Test from './text';
ReactDOM.render(

    <Router>
        <div>
            <div>
                <App/>
            </div>
            
        </div>
        
    </Router>, document.getElementById('root'));

registerServiceWorker();

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name = "theme-color" content = "#000000">
    <link rel = "manifest" href = "%PUBLIC_URL%/manifest.json">
    <link rel = "shortcut icon" href = "%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">

<!-- Optional theme -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity = "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin = "anonymous">
    <title>React App</title>
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id = "root"></div>
  </body>
</html>

Это страницы index.html и index.js. Думаю, этого достаточно, чтобы обнаружить проблему. Я буду размещать компетентные, а также дополнительную информацию.

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
import Logo from '../images/logo.png';
import Dashboard from './Dashboard';
import AdminList from './AdminList';
import ClientList from './ClientList';
import ServiceList from './ServiceList';
import AdminView from './AdminView';
import ClientView from './ClientView';
import ServiceView from './ServiceView';
import AdminNew from './AdminNew';
import ClientNew from './ClientNew';
import ServiceNew from './ServiceNew';
import Category from './Category';
import CategoryNew from './CategoryNew';
import Login from './Login';
import App from '../App';


const Main = () => (
  <main>
    <Switch>
    
      <Route exact path='/' component = {Dashboard} />
      <Route exact path='/login' component = {Login}/>
      <Route path='/Category'
        render = {({ match: { url } }) => (
          <div>
            <Route exact path = {`${url}/`} component = {Category} />
            <Route path = {`${url}/new`} component = {CategoryNew} />

          </div>
        )} />

      <Route path='/Client'
        render = {({ match: { url } }) => (
          <div>
            <Route exact path = {`${url}/`} component = {ClientList} />
            <Route path = {`${url}/new`} component = {ClientNew} />
            <Route path = {`${url}/view`} component = {ClientView} />
          </div>
        )} />

      <Route path='/Service'

        render = {({ match: { url } }) => (
          <div>
            <Route exact path = {`${url}/`} component = {ServiceList} />
            <Route path = {`${url}/new`} component = {ServiceNew} />
            <Route path = {`${url}/view`} component = {ServiceView} />
          </div>
        )} />

      <Route path='/Admin'

        render = {({ match: { url } }) => (
          <div>
            <Route exact path = {`${url}/`} component = {AdminList} />
            <Route path = {`${url}/new`} component = {AdminNew} />
            <Route path = {`${url}/view`} component = {AdminView} />
          </div>
        )} />
    </Switch>
  </main>
)

export default Main;

Main.js

import React, { Component } from 'react';
import axios from 'axios';

class ServiceNew extends Component {
    constructor(){
        super();
        this.state = {
            Name:'',
            NIC:'',
            Email:'',
            Password:'',
            Contact:'',
            District:'',
            Category:'',
        }
        this.handleNameChange=this.handleNameChange.bind(this)
        this.handleNICChange=this.handleNICChange.bind(this)
        this.handleEmailChange=this.handleEmailChange.bind(this)
        this.handlePwdChange=this.handlePwdChange.bind(this)
        this.handlePhoneChange=this.handlePhoneChange.bind(this)
        this.handleDistrictChange=this.handleDistrictChange.bind(this)
        this.handleCategoryChange=this.handleCategoryChange.bind(this)
        this.handleClick=this.handleClick.bind(this)
    }
    handleNameChange(e){
        this.setState({
            Name:e.target.value
        })
        console.info(this.state.Name)
    }
    handleNICChange(e){
        this.setState({
            NIC:e.target.value
        })
        console.info(this.state.NIC)
    }
    handleEmailChange(e){
        this.setState({
            Email:e.target.value
        })
        console.info(this.state.Email)
    }
    handlePwdChange(e){
        this.setState({
            Password:e.target.value
        })
        console.info(this.state.Password)
    }
    handlePhoneChange(e){
        this.setState({
            Contact:e.target.value
        })
        console.info(this.state.Contact)
    }
    handleDistrictChange(e){
        this.setState({
            District:e.target.value
        })
        console.info(this.state.District)
    }
    handleCategoryChange(e){
        this.setState({
            Category:e.target.value
        })
        console.info(this.state.Category)
    }
    handleClick = event =>{
        event.preventDefault();
        axios.post('http://localhost:4000/api/serviceproviders-insert',{
            name:this.state.Name,
            _id:this.state.NIC,
            email:this.state.Email,
            password:this.state.Password,
            contact:this.state.Contact,
            district:this.state.District,
            category:this.state.Category,
        })
        .then(res =>{
            alert("Successfully Registered");
            console.info(res);
            console.info(res.data)
            this.setState = {
                Name:'',
                NIC:'',
                Email:'',
                Password:'',
                Contact:'',
                District:'',
                Category:'',
            }
        })
        .catch(err=>{
            console.info(err)
        })
       
        
        
    }
    render() {
        return (
            <div>

                <div>
                    <div class = "well">

                        <a href = "#" class = "list-group-item list-group-item-danger"><h4><b>Add New</b></h4></a>

                    </div>


                    <form>
                        <div class = "form-group">
                            <label for = "name">Name:</label>
                            <input type = "name" class = "form-control" value = {this.state.Name} id = "name" placeholder = "Enter name" name = "name" onChange = {this.handleNameChange}/>
                        </div>
                        <div class = "form-group">
                            <label for = "nic">NIC:</label>
                            <input type = "nic" class = "form-control" value = {this.state.NIC} id = "nic" placeholder = "Enter NIC" name = "nic" onChange = {this.handleNICChange}/>
                        </div>

                        <div class = "form-group">
                            <label for = "email">Email:</label>
                            <input type = "email" class = "form-control" value = {this.state.Email} id = "email" placeholder = "Enter email" name = "email"onChange = {this.handleEmailChange} />
                        </div>
                        <div class = "form-group">
                            <label for = "pwd">Password:</label>
                            <input type = "password" class = "form-control"value = {this.state.Password} id = "pwd" placeholder = "Enter password" name = "pwd" onChange = {this.handlePwdChange} />
                        </div>
                        <div class = "form-group">
                            <label for = "phone">Contact No:</label>
                            <input type = "phone" class = "form-control" value = {this.state.Contact} id = "phone" placeholder = "Enter contact number" name = "phone" onChange = {this.handlePhoneChange} />
                        </div>
                        <div class = "form-group">
                            <label for = "dis">District:</label>
                            <input type = "dis" class = "form-control" value = {this.state.District} id = "dis" placeholder = "Enter district" name = "dis" onChange = {this.handleDistrictChange} />
                        </div>
                        <div class = "form-group">
                            <label for = "cat">Working Category:</label>
                            <input type = "cat" class = "form-control" value = {this.state.Category} id = "cat" placeholder = "Enter working category" name = "cat" onChange = {this.handleCategoryChange}/>
                          </div>


                        <button type = "button" onClick = {this.handleClick} class = "btn btn-primary">Add New</button>
                    </form>

                </div>

            </div>





        );
    }
}
export default ServiceNew;

ServiceNew.js

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

className вместо class

— 08.06.2018 02:54

javascript reactjs reactstrap

08.06.2018 02:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Вы должны использовать className вместо class в React.

<div className = "form-group">
   ...
</div>

08.06.2018 03:02

Другие вопросы по теме

Множественный или одиночный импорт в es6 с помощью webpack

Почему мой ForEach выполняется без вызова? ReactJs?

Как определить PropTypes для стиля атрибута в Reactjs

Как мне не получить сразу все данные API

Есть ли способ добавить личность в Amazon SES через форму в Javascript?

Скопировать реквизиты от родителя в ReactJs?

Как открыть камеру React Native Expo при нажатии кнопки

Перехват событий React Click

React Nested Router изменяет только URL-адрес, но не отображает страницу

Есть ли у средства выбора дня реакции выбор времени?

ReactJS не компилирует компоненты Boostrap. возвращает только компоненты HTML. 0xerr011d

Ответы 1

Другие вопросы по теме

Похожие вопросы