I downdloaded React Bootstrap and already included it in HTML file. This is impossible! javascript css twitter-bootstrap reactjs react-bootstrap.
Home
Public
Questions
Tags
Users
Collectives
ExploreCollectives
FindaJob
Jobs
Companies
Teams
StackOverflowforTeams
–Collaborateandshareknowledgewithaprivategroup.
CreateafreeTeam
WhatisTeams?
Teams
CreatefreeTeam
CollectivesonStackOverflow
Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost.
Learnmore
Teams
Q&Aforwork
Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch.
Learnmore
ReactBootstrapfailstorender
AskQuestion
Asked
6years,5monthsago
Modified
6years,4monthsago
Viewed
7ktimes
8
2
I'vejustinstalledReactBootstrapandstartedtolearnusingit
Istartedbydoingtutorialsonhttp://react-bootstrap.github.io/components.html
Demo
ThenIcopiedtotaltutorialofReactBootstrapButton,likethis:
constbuttonsInstance=(
{/*Standardbutton*/}
Default
{/*Providesextravisualweightandidentifiestheprimaryactioninasetofbuttons*/}
Primary
{/*Indicatesasuccessfulorpositiveaction*/}
Success
{/*Contextualbuttonforinformationalalertmessages*/}
Info
{/*Indicatescautionshouldbetakenwiththisaction*/}
Warning
{/*Indicatesadangerousorpotentiallynegativeaction*/}
Danger
{/*Deemphasizeabuttonbymakingitlooklikealinkwhilemaintainingbuttonbehavior*/}
Link
);
ReactDOM.render(buttonsInstance,mountNode);
Idon'tknowwhatthehellisgoingon.Nothingisrendered.DidIdoanythingwrong?IdowndloadedReactBootstrapandalreadyincludeditinHTMLfile.Thisisimpossible!
javascriptcsstwitter-bootstrapreactjsreact-bootstrap
Share
Follow
askedOct8,2015at9:59
necrofacenecroface
2,86577goldbadges3737silverbadges6363bronzebadges
4
CanyouchecktheerrorofChromedevelopertool,or,maybe,Firebug?
– asiniy
Oct8,2015at10:02
Itriedconsole.log(buttonInstance)andgot2errrors:UncaughtError:Minifiedexceptionoccurred;usethenon-minifieddevenvironmentforthefullerrormessageandadditionalhelpfulwarnings.UncaughtReferenceError:ButtonToolbarisnotdefinedIt'snowaythetutorialindocumentationiswrong
– necroface
Oct8,2015at10:06
Whichversionareyouusing?ThemostrecentversionrequiresReact0.14.
– JonnyBuchanan
Oct8,2015at10:10
0.13.3.ButevenwhenItrytoincludeReact0.14,itstilldoesn'twork
– necroface
Oct8,2015at10:12
Addacomment
|
1Answer
1
Active
Oldest
Votes
11
SinceyouareloadingthedistributionbundlewithoutCommonJSorAMDyou'llneedtoaccesstheglobalReactBootstrapforallthecomponents.
Sochangeyourexamplecodeto:
constbuttonsInstance=(
{/*Standardbutton*/}
Default
{/*Providesextravisualweightandidentifiestheprimaryactioninasetofbuttons*/}
Primary
{/*Indicatesasuccessfulorpositiveaction*/}
Success
{/*Contextualbuttonforinformationalalertmessages*/}
Info
{/*Indicatescautionshouldbetakenwiththisaction*/}
Warning
{/*Indicatesadangerousorpotentiallynegativeaction*/}
Danger
{/*Deemphasizeabuttonbymakingitlooklikealinkwhilemaintainingbuttonbehavior*/}
Link
);
ReactDOM.render(buttonsInstance,mountNode);
Share
Follow
editedNov1,2015at17:52
stack888
2333bronzebadges
answeredOct9,2015at14:27
MattSmithMattSmith
47333silverbadges1010bronzebadges
1
IthinkyoucanvarButtonToolbar=ReactBootstrap.ButtonToolbarandmakeyourcodeabitmorereadable.AlsovarButton=ReactBootstrap.Button.YouwillhavesomethinglikeWarning`
– Spyros
Mar24,2016at11:15
Addacomment
|
YourAnswer
ThanksforcontributingananswertoStackOverflow!Pleasebesuretoanswerthequestion.Providedetailsandshareyourresearch!Butavoid…Askingforhelp,clarification,orrespondingtootheranswers.Makingstatementsbasedonopinion;backthemupwithreferencesorpersonalexperience.Tolearnmore,seeourtipsonwritinggreatanswers.
Draftsaved
Draftdiscarded
Signuporlogin
SignupusingGoogle
SignupusingFacebook
SignupusingEmailandPassword
Submit
Postasaguest
Name
Email
Required,butnevershown
PostYourAnswer
Discard
Byclicking“PostYourAnswer”,youagreetoourtermsofservice,privacypolicyandcookiepolicy
Nottheansweryou'relookingfor?Browseotherquestionstaggedjavascriptcsstwitter-bootstrapreactjsreact-bootstraporaskyourownquestion.
TheOverflowBlog
Howshardingadatabasecanmakeitfaster
FeaturedonMeta
StackExchangeQ&AaccesswillnotberestrictedinRussia
PlannedmaintenancescheduledforFriday,March18th,00:30-2:00UTC...
AnnouncinganA/BtestforaTrendingsortoption
Improvingthefirst-timeaskerexperience-Whatwasaskingyourfirst...
Related
1236
HowtomakeTwitterBootstrapmenudropdownonhoverratherthanclick
649
Bootstrapmodalappearingunderbackground
907
HowtoopenaBootstrapmodalwindowusingjQuery?
1204
CenteracolumnusingTwitterBootstrap3
1084
HowcanImakeBootstrapcolumnsallthesameheight?
950
vertical-alignwithBootstrap3
1694
LoopinsideReactJSX
1295
WhatdothesethreedotsinReactdo?
1980
ProgrammaticallynavigateusingReactrouter
928
WhatisthedifferencebetweenReactNativeandReact?
HotNetworkQuestions
HowdoordinarycitizensgetaroundtheFederation?
HowdoesclassbalancechangewhenIremovespellcasting?
Zipunevenlists
Howtogeneratealltriangulationsofanorientablesurface?
WhattodoifyouareassignedtoTAacourseyouarenotqualifiedtoteach?
Whateventcouldnullifynuclearweaponsuse?
Canbeansbeovercooked?
WhatdidTolkienmeanbythisawkwardsentencestructure?
"Super"HiddenFolder?
DoestheDragonHidefeatcountasArmorforthepurposesofMonk’sunarmedmovement?
CanIrequestmycommentbedeletedfromaforumifImadethatpostwhenIwas12?
CanTuckerCarlsonbesanctionedbytheUSgovernment?
Howdobelieversinpost-mortalconsciousnessrespondtoobjectionsbytheJewishEncyclopediaarticleontheimmortalityofthesoul?
HowdidIndiaandPakistanavoidwarwhenIndiaaccidentallylaunchedamissileatPakistan?
PatchingOTproductsinamanufacturingassemblyline?
Acolorfulaffixriddle
"Whoever"or"whomever"
WhyisLadyJaneGreycalledLadyinsteadofQueen?
HowIcanconvertapointlayertoapolygonlayerinQGIS?
QualityofShowwithtwoGraphics3D:intersectionquality
WhereintheSFDXtreedotranslationsofquickactionsgo?
Howtoplacecertainpiecesona5x5chessboardwithoutanyofthemattackingeachother?
WhyistheTravellingSalespersonProblem"Difficult"?
CanIdrivealow-voltageMOSFETgatedirectlyfromamicrocontroller?
morehotquestions
Questionfeed
SubscribetoRSS
Questionfeed
TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader.
lang-js
Yourprivacy
Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy.
Acceptallcookies
Customizesettings
how to import bootstrap in react