Add fronted frameworks on existing HTML with 5 steps. This article we learn how add React in this Website without create one NPM project or WebPack.
1. Create html
first create simple HTML structure, in this case we create index.html in main directory
2. Add React CDN
CDN (Content Delivery Network) refers to a geographically distributed groups of servers which work together to provide fast delivery of internet content, Allows quick transfer of assets needed for loading Internet Content including HTML pages, JavaScript files, Style-sheets, images, and videos.
Fist we add the necessary CDN to embed React into website or HTML.
NOTE: Is important add crossorigin , is important cause enables a better error handling experience.
3. Create React Component.
We create the React component, for this we create app.js with next structure.
4. Add React Component in your HTML
Once created your React component, we need import it on HTML. once done imported your component.
5. Add Logic into Component
The logic that we can add is consume a REST API, https://thecatapi.com/ we are call this API to show picture cats.
Add variables in component
Create functions to GET API.
Add structure jsx tags
Final project
https://duvanmorenocardona.github.io/React_on_HTML/
Github repository
Conclusion
This method we could add React in our existing projects, easy and without many changes in our project.
Top comments (0)