How to define constants in ReactJS

Question

I have a function that maps text to letters   sizeToLetterMap  function           return                   small square   s                   large square   q                   thumbnail   t                   small 240   m                   small 320   n                   medium 640   z                   medium 800   c                   large 1024   b                   large 1600   h                   large 2048   k                   original   o                     these letters are used to create flickr photo urls  So  the photoUrl function takes in a image object and size text object and calls the sizeToLetterMap to come up with the letter for that size text   The function   photoUrl image  size text   function            var size   this sizeToLetterMap size text       I don t think its proper design to have the sizeToLetterMap as a function  I think it fits better as a constant  How can I define constants in ReactJS

User · Answer

well  there are many ways to do this in javascript just like other says  I don t think there s a way to do it in react  here s what I would do   in a js file   module exports         small square   s       large square   q      in your react file    use strict    var Constant   require  constants         var something   Constant small square    something for you to consider  hope this helps

User · Answer

Warning  this is an experimental feature that could dramatically change or even cease to exist in future releases  You can use ES7 statics   npm install babel-preset-stage-0   And then add  stage-0  to  babelrc presets          presets     es2015    react    stage-0       Afterwards  you go  class Component extends React Component       static foo    bar       static baz    a  1  b  2      And then you use them like this   Component foo

User · Answer

You don t need to use anything but plain React and ES6 to achieve what you want  As per Jim s answer  just define the constant in the right place  I like the idea of keeping the constant local to the component if not needed externally  The below is an example of possible usage   import React from  react    const sizeToLetterMap       small square   s     large square   q     thumbnail   t     small 240   m     small 320   n     medium 640   z     medium 800   c     large 1024   b     large 1600   h     large 2048   k     original   o      class PhotoComponent extends React Component     constructor args        super args          photoUrl image  size text        return   lt span gt        Image   image   Size Letter   sizeToLetterMap size text        lt  span gt           render         return          lt div className  photo-wrapper  gt          The url is   this photoUrl this props image  this props size text          lt  div gt               export default PhotoComponent      Call this with  lt PhotoComponent image  abc png  size text  thumbnail    gt     Of course the component must first be imported where used  example     import PhotoComponent from    photo component jsx

User · Answer

You can also do   getDefaultProps  - gt    firstName   Rails    lastName   React    now access  those constant  default value  using    props firstName   props lastName   Hope this help

User · Answer

If you want to keep the constants in the React component  use statics property  like the example below  Otherwise  use the answer given by  Jim  var MyComponent   React createClass       statics            sizeToLetterMap                small square   s               large square   q               thumbnail   t               small 240   m               small 320   n               medium 640   z               medium 800   c               large 1024   b               large 1600   h               large 2048   k               original   o                     someOtherStatic  100             photoUrl  function  image  size text            var size   MyComponent sizeToLetterMap size text

[reactjs] How to define constants in ReactJS

Examples related to reactjs