Tutorial

1. Create react project with create-react-app

   npm install -g create-react-app
   create-react-app YOUR_APP_NAME
   

2. Install ironpt

   npm install --save ironpt
   

3. Edit /src/index.js

   import React from 'react'
   import ReactDOM from 'react-dom'
   import {
    Controller,
    Presentation,
    Slide,
    Cover,
    H1,
    H2,
    Ul,
    Li,
    P,
    Code,
    simple
   } from 'ironpt'
   import './index.css'
   
   const presentationStyle = {
    width: 600,
    height: 600
   }
   
   ReactDOM.render(
    <Controller>
      <Presentation
        theme={simple}
        style={presentationStyle}
      >
        <Slide>
          <Cover>
            <H1>Full screen presentation</H1>
            <H2>Hello world</H2>
          </Cover>
        </Slide>
        <Slide>
          <H1>H1 Result</H1>
          <H2>H2 Result</H2>
          <P>P Result1</P>
          <P>P Result2</P>
          <Ul>
            <Li>Li Result1</Li>
            <Li>Li Result2</Li>
          </Ul>
          <Code language='js'>
            const foo = 'bar'
          </Code>
        </Slide>
        <Slide>
          <Cover>
            <H2>End</H2>
          </Cover>
        </Slide>
      </Presentation>
    </Controller>,
    document.getElementById('root')
   )
   

4. Edit /src/index.css

   html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
   }
   

5. Start dev server

   npm start
   

6. See presentation in your browser

   open http://localhost:3000
   

7. Build presentation

   npm run build
   

8. Install gh-pages

   npm install gh-pages --save-dev
   

9. Add your Github Pages URL in your package.json

   {
    "homepage": "http://ironhee.github.io/ironpt/"
   }
   

10. Deploy to your github pages!

    gh-pages -d build
    

11. See presentation in your github page

    open http://ironhee.github.io/ironpt/