Reactjs 如何在静态站点生成器（如jekyll）中使用react jsx模板

我像这样构建静态站点（about.html）：

但这不适用于在构建过程中从jsx生成html文件

照片上有我遗漏的东西吗？你试过这个吗

---

基本上，我想使用react作为一个哑模板引擎。

我认为Jekyll没有在服务器上呈现静态react组件的插件

但是，有一个（如Jekyll）但是使用React和Node代替

像Jekyll一样，你会用视图定义你的站点，但它们不是流动文件，而是完整的组件。然后只需

npm运行build

来创建静态站点（如

jekyll build

），它将创建一个可部署目录（如jekyll的

\u site

文件夹）

---

react jsx链轮

只是用于将jsx文件转换为JS文件（例如，

转换为

react.createElement（'img'，{src:a}）

作为Jekyll构建过程的一部分。它实际上不会呈现组件。

我认为Jekyll没有在服务器上呈现静态react组件的插件

但是，有一个（如Jekyll）但是使用React和Node代替

像Jekyll一样，你可以用视图来定义你的站点，但不是流动文件，而是完整的React组件。然后只需

npm运行build

来创建静态站点（比如

Jekyll build

），它将创建一个可部署的目录（比如Jekyll的

\u site

文件夹）

---

react jsx链轮

只是用于将jsx文件转换为JS文件（例如，

转换为

react.createElement（'img'，{src:a}）

作为Jekyll构建过程的一部分。它实际上不会呈现组件。

太棒了！还有什么我应该知道的吗？：）你似乎已经尝试过了，对吗？我已经尝试过了，但我还没有在任何大型项目中使用过。Jekyll周围的成熟度和生态系统很棒-目前它仍然是我的goto静态站点解决方案（主要是因为gh pages集成）。我想我可以生成html并在jekyll中使用它。但是使用react-static组件似乎更容易，因为我已经编写了：）对于我的情况，你有什么建议？我会说使用react-static，看看它是如何运行的。这将比将JSX渲染成Jekyll要简单得多（虽然这本身可能是一个有趣的项目）。在我看来很好，但是react静态样板文件看起来更加充实。已经准备好了一系列的集成和命令。热重新加载是很酷的，虽然…甜！还有什么我应该知道的吗？：）你似乎已经试过了，对吗？我已经玩过了，但我没有在任何大型项目中使用过。Jekyll的成熟度和生态系统非常好——目前它仍然是我的goto静态站点解决方案（主要是因为gh页面集成）。我想我可以生成html并在Jekyll中使用它。但是使用react-static组件似乎是一个更容易的选择，因为我已经写了：）对于我的情况，你有什么建议吗？我会说使用react-static，看看它是如何运行的。这将比将JSX渲染成Jekyll要简单得多（虽然这本身可能是一个有趣的项目）。在我看来很好，但是react静态样板文件看起来更加充实。已经准备好了一系列的集成和命令。虽然热重新加载很酷。。。

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,xxl@xs}">
            <h1 className="u-textSize-{xxl,3xl@xs} u-marginBottom-{3xl,xl@xs} u-lineHeight-uno u-width{5/12,6/12@xs}">
              Company Philosophy
            </h1>
            <h2 className="u-lineHeight-s u-textSize-l u-marginBottom-{s,xxl@s} u-width{10/12,6/12@xs}">
              Our mission is to give organizations a clear vision, idea and belief to become better, create something valuable and important. 
            </h2>
            <a href="#" className="u-color-brand u-colorHover-brandInvert u-display-{inlineBlock,none@s}">
              <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,flex@s}">
              <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 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 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 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

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