Building React Components with Bootstrap Studio
Tags: react, bootstrap, ruby, rails
Published: 2017-11-12 01:10:21

---
title: Building React Components with Bootstrap Studio
published: true
description: How to use Bootstrap Studio for building Rails apps with React
tags: react,reactjs,bootstrap,ruby,rails
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0chjtaklzlmfezpb0ksc.jpeg
---
Do you know [Bootstrap Studio](https://bootstrapstudio.io)? It's a graphical HTML/Bootstrap builder. The latest version features support for Bootstrap 4 and includes a migration function for converting Bootstrap 3 projects to Bootstrap 4. It's not free, but at least the price tag is not very high. It looks like this:

![Screenshot of Bootstrap Studio 4](https://thepracticaldev.s3.amazonaws.com/i/0idh4he1rj8qi2zlc6l9.png)

Since I liked the idea of using it for building my Rails web application, I was wondering if there's a better way to use it than manually copy-and-pasting HTML and CSS code from BSS's export. Spoiler alert: **Yes, there is!**

I recently integrated React into my Rails app and that was just about the right decision, because a company called WIX has written [react-templates](https://github.com/wix/react-templates), which provides a way to wrap a BSS export into a React component. **So the idea is to export the BSS page to html, transform it to a React template, which is a Javascript function, and use that function as React's render function in a component.** Since BSS can run a custom export script each time I hit the export button, this process can be automated.

Here's a step-by-step guide:

1. Add react-rails to your rails application, see [github page](https://github.com/reactjs/react-rails) for details.
1. Create an additional directory `components_rt` under `app/assets/javascripts` of your rails application for the template files. You also need to add an import line for it right before the import line of the components directory in `app/assets/javascripts/application.js.coffee`: ```
#= require_tree ./components_rt
#= require_tree ./components
```
1. Install the rt command from react-templates: ```bash
npm install react-templates -g
```
1. In BSS you can supply an export script. Use this one and change the TARGET to your needs: ```bash
#!/bin/sh
TARGET=~/path/to/rails/app/assets/javascripts/components_rt
[[ -z $1 ]]          && echo "argument error: bss export directory required" && exit 1
[[ ! -d $1 ]]        && echo "bss export directory does not exist" && exit 1
[[ ! -d ${TARGET} ]] && echo "target does not exist: ${TARGET}" && exit 1
# is rt installed?
which rt >/dev/null 2>&1
[[ $? -ne 0 ]]       && echo "rt (react-template compiler) is not installed" && exit 1
# main
RC=0
for f in "$1"/*.html; do
        RTFILE="${f%.html}.rt"
        xmllint --html --xpath '/html/body/*' "$f" | tee ${RTFILE}
        sed -i 's|<script .*script>||g' "${RTFILE}"
        sed -i 's|%7B|{|g' "${RTFILE}" # fix due to xmllint/xpath bug 788398
        sed -i 's|%7D|}|g' "${RTFILE}" # fix due to xmllint/xpath bug 788398
        mv "${RTFILE}" "${TARGET}/"
        rt "${TARGET}/$(basename ${RTFILE})"
        RC=$(($RC+$?))
done
exit $RC
```
1. Write a React component, let's call it "Hello":```javascript
class Hello extends React.Component {
        render: helloRT
}
```
1. Now you can build your component in BSS. Rename the html file to "hello.html". It will be transformed into the Javascript function "helloRT" when you click on export.
1. Use the component in any view of your rails project:
```ruby
<%= react_component 'Hello' %>
```

Put your elements under /html/body in BSS. There's only 1 element allowed directly under /html/body, so wrap your stuff in a container element. And use 1 HTML file in BSS for each React component.

Have fun!

P.S.: You might want to extend the export script by the ability to bring CSS files from the BSS export into Rails.