DEV Community

Cover image for React JS Gif : Starter Kit
egfx
egfx

Posted on • Edited on

4 4

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

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay