DEV Community

Cover image for React JS Gif : Starter Kit
egfx
egfx

Posted on

React JS Gif : Starter Kit


The template includes everything you need to get started with a React project in gif.com.ai


Comes in two parts:

1) HTML Context

The HTML consists of a single img tag.

<img src="http://placekitten.com/200/200" />

We give you a generic {placekitten} with this confused kitten to look at every time you want to GIF. You can replace the HTML contents with any valid HTML.

Placekitten Dimensions

The canvas is preset to 200x200 pixels to match the dimensions of the generated image from {placekitten}. You can freely adjust the canvas dimensions manually or through code.

2) JS Context

$.when(
  $.getScript("//unpkg.com/react@17/umd/react.development.js"),
  $.getScript("//unpkg.com/react-dom@17/umd/react-dom.development.js"),
  $.Deferred(function(deferred){
      $(deferred.resolve);
  })
).done(function(){

    // code here

});
Enter fullscreen mode Exit fullscreen mode

Also included is a library loader with React JS and React Dom hot-loaded using the Universal Module Definition (UMD) versions of the libraries.

You can now code in React but remember JSX is not supported! You'll want to read https://reactjs.org/docs/react-without-jsx.html to know how to code in raw React without JSX.

Open template

Discussion (0)