Documentation

ReactJS development

ReactJS can be used to create ThoughtFarmer custom cards. If you wish to use JSX templates you will first need to compile this to proper JavaScript in order to paste into the Client (JavaScript) area of the card editor.

If you already have an environment set up to compile your own JSX templates, or you are creating React code using React.DOM then you can skip this page and proceed to the ReactJS sample card

Tools and packages

  • Command shell (e.g. Command Prompt, Powershell, Terminal, bash)
  • Text editor: can use anything but we highly recommend Sublime.
  • Node.js with Node Package Manager (npm): Used to install Grunt and the other required packages.
  • Grunt: a JavaScript task runner.
  • Grunt-Babel: The package that will actually convert your jsx files into pure JavaScript for use in ThoughtFarmer custom cards. NOTE: do not use the installation instructions in the link. We will provide specific instructions in the next section.
  • Grunt-ESLint: not required but highly recommended to ensure you have clean JavaScript. Steps to configure are not included here. 

Development environment instructions

  1. Install Node.js with the Node Package Manager using the detailed instructions here. If you are a Mac or Windows user you can just download and run the proper installer available at https://nodejs.org/
  2. Create a project directory where you will be making your ThoughtFarmer React components.
  3. Download this GruntFile.js and place it into the project directory.
  4. Switch to that directory in your command shell and run the following:
    npm init
    
  5. Follow the command line prompts to create a projects.json file. At a minimum you should enter a value for name and version. NOTE: Ensure the entry point is set to be GruntFile.js. You can just hit "enter" to leave other fields blank. Confirm the creation of the file to complete. 
  6. Run the following to install grunt:
    npm install grunt --save-dev
    
  7. Run the following to install grunt-babel:
     npm install --save-dev grunt-babel babel-preset-es2015 babel-preset-react
    
  8. Install load-grunt-tasks by running the following:
     npm install --save-dev load-grunt-tasks
    
Once the steps are complete your are ready to begin creating ReactJS components using JSX.
 

Testing development environment

  1. Create a subfolder in the project directory called "hellothoughtfarmer"
  2. Create a file in sublime called "hellothoughtfarmer.jsx" and paste in the following code:  
    var HelloThoughtFarmer = React.createClass({
        render: function(){
            return <div>
                <h2>Hello ThoughtFarmer!</h2>
            </div>;
        }
    });

    _replaceView(<HelloThoughtFarmer />);

  3. In your command shell run the following from the project root (not the sub folder you just created):
    grunt -folder=hellothoughtfarmer
    
  4. Once that runs you should see a hellothoughtfarmer.js file has been created for you in the subfolder
  5. Open that file and copy and paste the contents into a new custom card
  6. Add that card to a test page. 
You should now see the Hello ThoughtFarmer heading added via the custom card on the page.

NOTE: The supplied GruntFile.js accepts a single argument -folder to specify the subfolder to run against. This is helpful if you are working on multiple cards. If no arguments are supplied it will simply look in the root directory.