Check my Universal Reactjs boilerplate #es6 #javascript #mongodb #nodejs #reactjs #redux #webdev #webdevelopment

  • , contains dumb React components which depend on containers for data.
  • , contains starting template (if project got cleaned with ).
  • Container care about how things work, while Component care about how things look.
  • You can see the sample app with this script if you’re not cleaning the project yet

    Before start the new project, you can use this script to remove the sample app, this script will remove everything inside and directories, and generate the starting and

    Bundle all the files, it will create the for all the style files, for the client app, and for the server app.

  • If you want to see your project in production environtment

    This Universal ReactJS Starter-kit is packed with plop generator, you can generate component or container template using this script

universal-react-starter – Universal React starter with Redux, React Router, Express, CSS/SASS Module, Mongoose, Webpack.
Continue reading “Check my Universal Reactjs boilerplate #es6 #javascript #mongodb #nodejs #reactjs #redux #webdev #webdevelopment”

Using Electrode to Improve React Server Side Render Performance By Up To 70%

  • js application platform that powers with several goals in mind, including ease of use, re-usability of components across applications and, most importantly, performance.We use server side rendering for almost all of our applications for two reasons:Improved performance for the customerBetter for SEOIn our tests, however, we found that React’s renderToString() takes quite a while to execute — and since renderToString() is synchronous, the server is blocked while it runs.
  • Every server side render executes renderToString() to build the HTML that the application server will be sending to the browser.To solve this problem, we created two Electrode modules: Above the Fold Render (ATF) and Server Side Render Profiling and Caching (SSR Caching).
  • The average renderToString()call with this configuration took 153.80 ms.Electrode default, though, Electrode comes with renderWithIds:false, which gives us a renderToString() time of 124.80 ms. Not bad — Electrode’s default configuration has already improved render time by 19%!
  • That drops our renderToString() time all the way to 36.56 ms — an astounding 71% improvement from the default Electrode configuration, and a 76% improvement from our original, unoptimized test.
  • That means a 70% improvement won’t mean 90 ms, but 180 ms saved.Special Thanks:To Arunesh Joshi, Dmitry Yesin, and the home page team who have implemented the Electrode modules and are using them on the home page in production.To Caoyang Shi, for helping to gather data and ensuring we’re getting the right numbers!More Information:Check out Joel Chen’s post on ReactJS SSR Profiling and Caching or Arpan Nanavati’s post on Building React.js at Enterprise Scale.Check out my post about the release of Electrode, the customer-facing platform that powers Electrode website:

We built Electrode, the react/node.js application platform that powers with several goals in mind, including ease of use, re-usability of components across applications and, most…
Continue reading “Using Electrode to Improve React Server Side Render Performance By Up To 70%”

#Reactjs component to declaratively fetch data

  • You supply a single function as a child of which receives a single argument as an object.
  • The function will be called anytime the state of the fetch request changes (for example, before a request has been made, while the request is in flight, and after the request returned a response).
  • While you can pass a single property to the function (for example, ), it is common to instead use object destructuring to peel off the properties on the object you plan to use.
  • An example of destructing and using the most common properties , , and .

react-fetch-component – React component to declaratively fetch data
Continue reading “#Reactjs component to declaratively fetch data”

Using canvas with React Native – Over Engineering – Medium

Use canvas with React Native:  #ReactJS #JavaScript

  • Most of the work is in defining which methods and properties should be made public in React Native:Context uses the postMessage implementation, in Canvas; so the bridge is shared and all the queueing logic is reused.
  • When we call a method or set a property: canvas.webview.postMessage sends a message to a canvas in the Webview.
  • The Canvas component doesn’t expect a return message from this.If we need to call a canvas or context method, we call the method and send the serialized return value back.
  • This library has provided a way for me to access the canvas API, but I also need a way to load images from a remote source.The canvas API provides a drawImage method, which could accept another canvas (or a browser Image object) as a source.
  • So, I can now use either to load an image, and then make changes to the image; using the browser canvas API.That’s all, for nowI’ve enjoyed working with this library, so far.

React Native is the Wild West. There’s so much to discover and build, and it can be a fun journey. Sometimes, before you can start panning for gold, you have to make the tent you’re going to sleep in…
Continue reading “Using canvas with React Native – Over Engineering – Medium”

Refs in React : All you need to know ! – Hacker Noon

Refs in React : All you need to know !

#reactJS #javascript #developer

  • borrowed from evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it and finally sharing my thoughts with you people.According to react docs , refs are used to get reference to a DOM(Document Object Model) node or an instance of a component in a React Application i.e. refs would return the node we are referencing .
  • But i would suggest using classes for use-case of this kind as its much better and also refs has its caveats which we would see soon.When it returns a DOM node or a component’s instance?If the ref points to a standard component (DOM node, such as input, select, div etc) then to retrieve the element; you just need to call this.refs.ref.If the ref points to a composite component (a custom component you have created yourself) you need to use the new ReactDOM module like so is the ref value first set ?
  • Don’t Inline refs callbacks: I used inline callbacks to show you why it is bad thing to doArrow and bind functions in a render() produce a performance hit by creating a new function on EVERY re-render.
  • It should be done something like thisAlso If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element.
  • ExampleReact Official DocsAs MyFunctionalComponent has no instances , above code won’t work as intended.BUT ref attribute will work inside a functional component as long as you refer to a DOM element or a class component:React Official DocsHope you now have a good understanding of refs along with it use-cases and caveats.

Last evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it…
Continue reading “Refs in React : All you need to know ! – Hacker Noon”

Even Better Support for React in Flow – Flow – Medium

Even Better Support for React in Flow @calebmer  #Reactjs #Javascript #Webdev

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are making is to modify how you define React class components.
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return +; }}When your component has no state, you only need to pass in a single type argument.
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, }; render() { return; }}Flow will infer the type of default props from your static property.
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop returns a React.Node, which is the type for any value that can be rendered by React.
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);// We don’t need to pass in `foo` even though// `MyComponent` requires it!MyEnhancedComponent a={1} b={2} /;Here we use the new React.ComponentTypeProps utility along with an intersection to inject the prop foo.Even MoreThere is a lot more that we fit into this release for our React support.

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…
Continue reading “Even Better Support for React in Flow – Flow – Medium”