Using Dashboard Bootstrap Theme with React js

Asked

Viewed 534 times

-1

Good afternoon Personal,

I’m new to React js and would like to know how I could use a Dashboard bootstrap theme that uses local Imports of css and js files located in the "Assets" folder of the project.

I tried to put the Imports in the project index.html in the head and at the end of the body tag in the js pages I used the plugin to convert html to jsx and in the desktop version it worked normal but in mobile the menu n opens, I would like to know the ideal way to do this, have some tutorial?

Note: using Cdn I managed to however this theme uses its own import files. follow my project index.html and folder structure.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <link href="assets/plugins/bootstrap-datepicker/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
    <!-- DataTables -->
    <link href="assets/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <!-- Responsive datatable examples -->
    <link href="assets/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" /> 

    <!-- App css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
   
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  
    <!-- jQuery  -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/metisMenu.min.js"></script>
    <script src="assets/js/waves.min.js"></script>
    <script src="assets/js/jquery.slimscroll.min.js"></script>

    <script src="assets/plugins/apexcharts/apexcharts.min.js"></script>
    <script src="assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="assets/plugins/datatables/dataTables.bootstrap4.min.js"></script>
    <script src="assets/pages/jquery.hospital_dashboard.init.js"></script>

    <!-- App js -->
    <script src="assets/js/app.js"></script>
  </body>
</html>

javascript node.js react

3 answers

0

The ideal would be to use some solution built with React, such as React Bootstrap (v3 and v4) or reactstrap (v4). Mixing "not React" and jQuery components with React components - and probably other React ecosystem technologies - is a bad idea.

0

Expensive a good solution would be to use a package called Styled-Components, it is a package that gives you the freedom to create React components with your css style, I think a very good idea, besides you can split and reuse your components you can still use css + js passing dynamic properties on tags and etc... The following is an example of the syntax: 

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`

https://styled-components.com/

  • Another solution to validate is to install the bootstrap package by your package manager (npm install --save bootstrap), and then import it 'bootstrap/dist/css/bootstrap.css' into src/index.js.

0

Luan Mário

Good afternoon. It is not a good idea to mix technologies like jQuery and React. This will bring harm to the organization and readability of the project. The cool of React is its ecosystem of diverse libs that bring agility and help maintain standards within the project.

An alternative I recommend is React-bootstrap (https://react-bootstrap.netlify.com/getting-started/introduction/). Or any other UI you prefer. So I believe your project can stay within good practices with React.

Browser other questions tagged javascript node.js react

You are not signed in. Login or sign up in order to post.