HTML to React

Convert annotated HTML exported from Bootstrap Studio to React components.

Sample

<!-- Start: About Us --><divid="about_us" class="highlight-clean"><divclass="container"><!-- Start: Intro --><divclass="intro"><h2class="text-center section_heading"><strong>ALL-ROUND SOFTWARE DEVELOPMENT COMPANY</strong></h2><pclass="text-center section_text">Our cross-functional personnel work to create customized digital services that improve your productivity and market value. We are your reliable provider of software development and consulting services. We help you propel your SMEs to harness the power of advances in technology by create amazing digital experiences while optimizing and automating your operations.</p></div><!-- End: Intro --></div></div><!-- End: About Us -->

The above HTML snippet converts to the following directory structure:

|-src
|-components
|-about_us
|-index.jsx
|-intro
|-index.jsx

And the individual components created are as follows:

/* src/components/about_us/index.jsx */importIntrofrom"./intro";constAboutUs=(props)=>{return(<divis="about_us"className="highlight-clean"><divclassName="container"><Intro/></div></div>);}exportdefaultAboutUs;

/* src/components/about_us/intro/index.jsx */constIntro=(props)=>{return(<divclassName="intro"><h2className="text-center section_heading"><strong>
ALL-ROUND SOFTWARE DEVELOPMENT COMPANY
</strong></h2><pclassName="text-center section_text">
Our cross-functional personnel work to create customized digital services that improve your productivity and market value. We are your reliable provider of software development and consulting services. We help you propel your SMEs to harness the power of advances in technology by create amazing digital experiences while optimizing and automating your operations.
</p></div>);}exportdefaultIntro;