In the official website , there is a way to import the Module to the project
import { Link } from 'react-router-dom'
import Button from '#material-ui/core/Button';
<Button component={Link} to="/open-collective">
Link
</Button>
However is there anyway to call the object by Browser global(window object)?
You can use a CDN version, include that in your index.html, then you will be able to access it.
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
and the font file.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
Here is an example https://github.com/mui-org/material-ui/tree/master/examples/cdn
It should be noted according to their documentation
You can start using Material-UI with minimal Front-end infrastructure,
which is great for prototyping. We discourage using this approach in
production though - the client has to download the entire library,
regardless of which components are actually used, affecting
performance and bandwidth utilisation.
Related
I can't seem to find a way on how to use bootstrap locally in react without npm or yarn bootstrap installation or even without CDN, every tutorial I find on how to use bootstrap they don't explain using bootstrap locally.
Please I need steps on how I can achieve this thanks
So I don't know this for sure, so please correct me if I am wrong. I am just trying to help you to the best of my knowledge.
There are multiple ways.
The first way is to import the CSS in the app.js (or the start of the React app). For the CSS you should have a file called bootstrap.css that contains all the CSS for Bootstrap. import './bootstrap.css'.
The second way is to import it in the html file. If you add the the <link rel="stylesheet" type="text/css" href="bootstrap.css">.
I don't know if this is the way it should be done!
Just starting learning ReactJS. I'm trying to redirect using the Redirect component <Redirect to="/dashboard" />. However, ReactJS is not familiar with this component by default (getting Redirect is not defined on console log).
After some reading, I saw that the Redirect component needs to be imported (import React from 'react'). However, since it's a web project, I do not use a webpack but rather import the entire library with:
<script crossorigin src="https://unpkg.com/react/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
So my question(s) is how do I use Redirect for a web project, or rather how to import components for a web project for ReactJS.
Redirect component is not part of react. import React from 'react' is importing the react object which contains things like React.Component.
I'm assuming you mean Redirect from react-router in which case you should also add a script for react-router-dom and reference via ReactRouterDOM.Redirect.
P.S. If you're creating something you intend to release you're better off generating a project with create-react-app. Nobody uses scripts directly anymore and you are using development versions of babel and react which are slow and large.
I am importing {Button, ButtonToolbar} from 'react-bootstrap' (it's saved in the dependencies list), however my page still appears bare. What is the reason for this?
Did you include stylessheet of bootstrap in your index.html? react-bootstrap still needs this to work properly. Hope it helps
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
However, I think you should just use normal button bootstrap by adding className of btn btn-primary, it still works fine with reactjs and give you ability to customize
Creating an app with the angular-cli, if I link the Material theme from my index.html (following instructions from https://getmdl.io/started/):
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-amber.min.css">
The complete code is in a github repo on linked-theme-bad branch where the components are not correctly styled with the theme:
However, if I follow the exact instructions in the angular-cli doc to include Angular Material and import the style in styles.scss:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
The complete code on basic-theme-works branch) where the components appear correctly:
My understanding is that the import merges into a single stylesheet and the link in the HTML page will make a separate request for the style theme. The question is why doesn't the linked style sheet approach work.
By the way, I'm running the app with ng serve but this is an isolated example from another app which also seemed to fail in the same way with files that were built with ng build.
You're importing the CSS file from the wrong source (material-design-lite). (and by the way, you're also looking at the wrong documentation. See the link below for the correct docs)
From material.angular.io:
Alternatively, you can just reference the file directly. This would look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
More Information on using a prebuilt theme
Are Cards added to React-Bootstrap yet?
Or is there any other undocumented way of adding it?
What I am thinking of right now is -> className = 'bootstrap card class syntax', but I guess, it won't work because it won't recognise it.
Sort of found the answer, but it doesn't go by the name of card
You can use <Thumbnail>, it gives the same feel as that of a card.
Bootstrap classes can be used the same way in react like in any non-react project, even without the use of react-bootstrap. It can be imported as a CDN in your index.html file...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
... or it can also be saved locally and imported that way. Or you can configure webpack to import css files directly into your project.
You'd just have to make sure to use className= instead of class=, but otherwise, it works exactly the same way.
<div className="col-xs-12 well"></div>
react-bootstrap is an add-on that provides components that do the same thing. So, even if it's not in react-bootstrap yet, you can still use the functionality, but just as a straight css class.