add full react application to sharepoint

%3CLINGO-SUB%20id%3D%22lingo-sub-357580%22%20slang%3D%22en-US%22%3Eadd%20full%20react%20application%20to%20sharepoint%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357580%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3EI%20am%26nbsp%3B%20realy%20a%20novice%20about%20all%20sharepoint%20solution%20i%26nbsp%3B%20have%20myapplication%20devlopped%20in%20React%20i%20Mean%20%3A%3C%2FP%3E%3CP%3Epure%20React%20js%20not%20microsoft%20fabric%20Ui%26nbsp%3B%20.%26nbsp%3B%3C%2FP%3E%3CP%3Einside%20that%20appilcation%26nbsp%3B%20I%20a%20have%20the%20following%20part%26nbsp%3B%3C%2FP%3E%3CP%3E-Header%20with%20two%20buttons%20Home%20and%20select%20section%20%2B%20Search%20bar%20(for%20finding%20documents%20)%3C%2FP%3E%3CP%3E-a%20side%20bar%20with%26nbsp%3B%20two%20checklist%26nbsp%3B%3C%2FP%3E%3CP%3E-%20a%20body%20with%26nbsp%3B%20tabs%20bar.%3C%2FP%3E%3CP%3E-%20and%20footer%20with%20some%20centent%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3Bcan%20i%20export%20my%20application%20to%20sharePoint%20%3F%3C%2FP%3E%3CP%3Ecan%20i%26nbsp%3B%20create%20the%20same%20with%20fabric%20UI%20i%20dont%20found%26nbsp%3B%20the%20top%20nav%20bar%20each%20time%20i%26nbsp%3B%20found%20only%20the%20search%20barre%20integrate%20with%20sharepoint%20not%20with%20react%20Js%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20know%20this%20my%20first%20interaction%20with%20Sharepoint%20and%20i%20need%20realy%20some%20help%20%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20in%20advance%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-357580%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357651%22%20slang%3D%22en-US%22%3ERe%3A%20add%20full%20react%20application%20to%20sharepoint%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357651%22%20slang%3D%22en-US%22%3EThank%20you%20for%20reply%3CBR%20%2F%3Ei%20am%20using%20sharepoint%202016%20and%20i%20don't%20figr%20out%20the%20principal%20of%20widget%3CBR%20%2F%3Edid%20you%20mean%20%3A%3CBR%20%2F%3Ei%20devlopp%20all%20my%20application%20in%20my%20local%20machine%20without%20using%20Fabric%20UI%20.%20and%20After%20that%20i%20package%20my%20solution%20with%20gulp%20for%20example%20and%20after%20that%20i%20push%20all%20in%20Sharepoint%20%3F%3CBR%20%2F%3EThat%20exactly%20what%20i%20am%20looking%20for%20at%20the%20moment.%3CBR%20%2F%3EIf%20possible%20can%20i%20ask%20you%20more%20information%20(i%20read%20documentation%20but%20i%20can't%20find%20which%20part%20are%20realetd%20to%20my%20quesion%20)%3CBR%20%2F%3EThank%20you%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-357645%22%20slang%3D%22en-US%22%3ERe%3A%20add%20full%20react%20application%20to%20sharepoint%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-357645%22%20slang%3D%22en-US%22%3E%3CP%3EDepending%20on%20your%20version%20of%20SharePoint%2C%20you'll%20receive%20different%20answers.%20If%20SharePoint%20Online%2C%20SharePoint%202016%20FP2%20or%20SharePoint%202019%20I%20would%20look%20into%20the%20SharePoint%20Framework.%26nbsp%3B%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fsharepoint-framework-overview%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fsharepoint-framework-overview%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EThis%20will%20allow%20you%20to%20create%20an%20application%20and%20host%20it%20in%20a%20web%20part%20(like%20a%20widget)%20on%20a%20page%20in%20SharePoint.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you%20are%20using%20SharePoint%202013%2B%2C%20you%20can%20also%20use%20a%20SharePoint%20Add-In.%26nbsp%3B%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fsp-add-ins%2Fsharepoint-add-ins%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fsp-add-ins%2Fsharepoint-add-ins%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Hello,

I am  realy a novice about all sharepoint solution i  have myapplication devlopped in React i Mean :

pure React js not microsoft fabric Ui  . 

inside that appilcation  I a have the following part 

-Header with two buttons Home and select section + Search bar (for finding documents )

-a side bar with  two checklist 

- a body with  tabs bar.

- and footer with some centent 

 

 can i export my application to sharePoint ?

can i  create the same with fabric UI i dont found  the top nav bar each time i  found only the search barre integrate with sharepoint not with react Js

 

I know this my first interaction with Sharepoint and i need realy some help ?

 

Thanks in advance

 

 

 

2 Replies
Highlighted

Depending on your version of SharePoint, you'll receive different answers. If SharePoint Online, SharePoint 2016 FP2 or SharePoint 2019 I would look into the SharePoint Framework. 
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview

This will allow you to create an application and host it in a web part (like a widget) on a page in SharePoint.

 

If you are using SharePoint 2013+, you can also use a SharePoint Add-In. 
https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/sharepoint-add-ins


Highlighted
Thank you for reply
i am using sharepoint 2016 and i don't figr out the principal of widget
did you mean :
i devlopp all my application in my local machine without using Fabric UI . and After that i package my solution with gulp for example and after that i push all in Sharepoint ?
That exactly what i am looking for at the moment.
If possible can i ask you more information (i read documentation but i can't find which part are realetd to my quesion )
Thank you