Ad

How To Use React Jsx Templates In Static Site Generator Like Jekyll

- 1 answer

I build my static sites like this (about.html):

import React from 'react'
import Main from './main'
import {Grid, GridBlock} from '../ui/objects/Grid/Grid'
import Content from '../ui/components/Content/Content'
import RegionIndicator from '../ui/components/RegionIndicator/RegionIndicator'
import Navigation from '../ui/components/Navigation/Navigation'
import Footer from '../ui/components/Footer/Footer'
import Page from '../ui/components/Page/Page' 
import Cover from '../ui/components/Cover/Cover'
import Subscribe from '../ui/components/Subscribe/Subscribe'
import ArticleText from '../ui/components/ArticleText/ArticleText'
import Services from '../ui/components/Services/Services'
import StorySlider from '../ui/components/StorySlider/StorySlider'
import FullCover from '../ui/components/FullCover/FullCover'
import StickyNav from '../ui/components/StickyNav/StickyNav'
import Timeline from '../ui/components/Timeline/Timeline'
import Team from '../ui/components/Team/Team'
import Icon from '../ui/objects/Icon/Icon'
import Input from '../ui/objects/Input/Input'
import Select from '../ui/objects/Select/Select'
import Checkbox from '../ui/objects/Checkbox/Checkbox'
import Textarea from '../ui/objects/Textarea/Textarea'

const toHTML = (text) => ({ __html:text })

@Main
class About extends React.Component {
  render() {
    const root = this.props.config.root
    return (
      <Page navigation={<Navigation root={root}/>}>
        <FullCover 
          image={`${root}/assets/images/about_bg.png`} 
          title="Think big. Act with knowledge."
          text="ACT is the leading public opinion research and strategic consulting company in the Caucasus Region.  Through science and creativity, we provide our client with knowledge, idea and inspiration to become more powerful and create something valuable and important."
          action="Find out More"
        />
        <StickyNav title="About Us" items={[
          {href:'#timeline', title:'Timeline'},
          {href:'#philosophy', title:'Company Philosophy'},
          {href:'#team', title:'Our Team'},
          {href:'#innews', title:'In the News'},
        ]}/>
        <Timeline id="timeline" items={[{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2002',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2002',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2003',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2003',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2003',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2003',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2003',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2003',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2004',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2004',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2004',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2004',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2004',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2005',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2005',
          day: '09',
        },{
          title: 'Analysis and Consulting Team (ACT) was founded.',
          month: 'March',
          year: '2008',
          day: '13',
        },{
          title: 'Company became a member of ESOMAR',
          month: 'October',
          year: '2008',
          day: '25',
        },{
          title: 'Became the member of the Mystery Shopping Providers Association.',
          month: 'January',
          year: '2008',
          day: '03',
        },{
          title: 'ACT became the leader on Georgian research & consulting market.',
          month: 'July',
          year: '2008',
          day: '12',
        },{
          title: 'We rebranded the visual language of the company.',
          month: 'March',
          year: '2009',
          day: '09',
        },]}/>
        <div style={{
          backgroundImage:`url(${root}/assets/images/marketing_expect_bg.png)`,
          backgroundSize:'contain',
          backgroundPosition:'right 0% top',
          backgroundRepeat:'no-repeat'
        }} id="philosophy">
          <Content className="u-padding{Top,Bottom}-{xl,[email protected]}">
            <h1 className="u-textSize-{xxl,[email protected]} u-marginBottom-{3xl,[email protected]} u-lineHeight-uno u-width{5/12,6/[email protected]}">
              Company Philosophy
            </h1>
            <h2 className="u-lineHeight-s u-textSize-l u-marginBottom-{s,[email protected]} u-width{10/12,6/[email protected]}">
              Our mission is to give organizations a clear vision, idea and belief to become better, create something valuable and important. 
            </h2>
            <a target="_blank" rel="nofollow noreferrer" href="#" className="u-color-brand u-colorHover-brandInvert u-display-{inlineBlock,[email protected]}">
              <span className="u-align-middle">Find out More</span>
              <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
            </a>
            <Grid gutter="Wide" className="u-display-{none,[email protected]}">
              <GridBlock className="u-size4/12">
                <p className="u-lineHeight-s  u-marginBottom-s">
                  We love what we do and this gives energy to our work, we appreciate and love people, our client companies for which we create product, we love our staff, who are our friends and we enjoy the environment in which these products are created. We take care of each other and the environment where we work. We always protect client’s interests and confidentiality...

                </p>
                <ul>
                  <li>
                    <a target="_blank" rel="nofollow noreferrer" href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                      <span className="u-align-middle">View our Credo</span>
                      <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                    </a>
                  </li>
                  <li>
                    <a target="_blank" rel="nofollow noreferrer" href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                      <span className="u-align-middle">Policy of Cooperation With Clients</span>
                      <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                    </a>
                  </li>
                </ul>
              </GridBlock>
              <GridBlock className="u-size4/12">
                <p className="u-lineHeight-s  u-marginBottom-s">
                  Through science and creativity, we provide our client with knowledge, idea and inspiration to become more powerful and create something valuable and important.
                </p>
                <a target="_blank" rel="nofollow noreferrer" href="#" className="u-color-brand u-colorHover-brandInvert u-display-inlineBlock">
                  <span className="u-align-middle">View our Mission</span>
                  <Icon.arrowRight className="u-align-middle u-textSize-xs u-marginLeft-xxs"/>
                </a>
              </GridBlock>
            </Grid>
          </Content>
        </div>
        <Team id="team" members={[{
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {/* @dublicates >>> */
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        },{
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isEmpty: true,
        }, {
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        },{
          fName: 'Natalie',
          lName: 'Kvitsinashvili',
          position: 'Operations Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',           
        }, {
          fName: 'Tatiana',
          lName: 'Mariam',
          position: 'Global Marketing',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tinatin',
          lName: 'Rukhadze',
          position: 'General Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusudan',
          lName: 'Telia',
          position: 'CEO',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Tamar',
          lName: 'Babukhadia',
          position: 'Business Research Director',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Rusiko',
          lName: 'Endzela',
          position: 'General Manager, Georgia',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          fName: 'Levan',
          lName: 'Abraam',
          position: 'General Manager, Azerbaijan',
          image: `${root}/assets/images/about_team_2.png`,
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
        }, {
          isSeeAll: true
        }]}/>       

        <StorySlider id="innews" className="u-marginBottom-xxl" items={[{
          title: 'ACT became the Gold Sponsor of the biggest marketing event - Spotlight. ',
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...',
          image: `${root}/assets/images/story_2_news.png`,
          action: 'Read Full Story',
        }, {
          title: 'Jane M. Smith from Microfinance Solutions',
          text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.',
          action: 'Find out More',
        }, {
          title: 'Baseline, Monitoring and Evaluation Surveys',
          text: 'The effectiveness of programs and projects is highly determined by adequately assessing the existing situation, formation of right indicators for project evaluation and the monitoring of their implementation.',
          action: 'Read Full Story',
        }]} image={`${root}/assets/images/story_2.png`} title={'Act in the News'}/>

        <Subscribe className="u-marginBottom-xxl"/>
        <Footer root={root}/>
      </Page>
    )
  }
}

export default About

This is fine and dandy for all front-end work, I run build process and transform it into a proper html - than I slap onto it a backend software and call it a day.

But I wanted to try something different like static site generators: jekyll, middleman.

I managed to get jekyll read jsx using:

require "jekyll-assets"
require "react-jsx-sprockets"

But this doesn't work for generating html files from jsx during build process.

Is there something I'm missing from the picture? have you tried this?

Basically I want to use react as a dumb templating engine.

Ad

Answer

I don't think Jekyll has a plugin for rendering static React components at the server.

However, there is a boilerplate for static sites (like Jekyll) but using React and Node instead.

Like Jekyll you'd define your site with views, but rather than being liquid files, they'd be full blown React components. Then just npm run build to create the static site (like jekyll build) which will create a deployable directory (like Jekyll's _site folder).

react-jsx-sprockets is just for converting JSX files into JS files (e.g. <img src={a} /> into React.createElement('img', { src: a }) as part of the Jekyll build process. It won't actually render the components.

Ad
source: stackoverflow.com
Ad