What is ReasonML? #javascript #reactjs #Facebook #Reason

What is ReasonML?  #javascript #reactjs #Facebook #Reason

  • This blog post gives a brief high-level explanation of Facebook’s new programming language, ReasonML.
  • ReasonML is a new object-functional programming language created at Facebook.
  • In essence, it is a new C-like syntax for the programming language OCaml.
  • ReasonML also supports JSX (the syntax for HTML templates inside JavaScript used by Facebook’s React framework).
  • The ReasonML team also aims to improve the OCaml ecosystem: – – ReasonML feels much like what you’d get if you cleaned up JavaScript and turned it into a statically typed functional programming language.

This blog post gives a brief high-level explanation of Facebook’s new programming language, ReasonML.
Continue reading “What is ReasonML? #javascript #reactjs #Facebook #Reason”

Migrating to react-router v4…the SSR way – Frontend Weekly – Medium

Check out our new article: Migrating to react-router v4…the SSR way  #ReactJS

  • Now you need 2 types of router :BrowserRouter on the Client side and StaticRouter on the stateless server side.v3const ReactRouterContext = ReduxProvider = routes, location: req.url }, (err, redirectLocation, renderProps) = { if (err) { res.status(503); } else if (redirectLocation) { return res.redirect(302, redirectLocation.pathname + redirectLocation.search); } else if (renderProps) { return res.send(`!
  • DOCTYPE ReduxProvider({ store }, } return null; });but in v4, match no longer exists, as StaticRouter handles it all on the server side.
  • All we need to do is to render the same Router configurations in the server as in Client to match the checksum and that’s it.
  • if (context.url) { return res.redirect(302, context.url); } else { const renderHTML = ReactDOMServer.renderToString( ReduxProvider( { store }, serverConfig(req, context) ) ); return res.send(`!
  • This only needs to be rendered on the server side.const serverConfig = (req, context) = ( StaticRouter location={req.url} context={context} App / /StaticRouter);In order to match the checksum, a client-side version router is needed of course.const history = Provider store={initStore} Router history={history} App / /Router /Provider, Up Server and ClientServer: ReduxProvider(essentially createFactory – props store in)Client: Provider

Migrating to React v15.5 is a good preparation for the full embrace of React v16 (:scream), and it wasn’t too much of a pain as it was mostly with React.PropTypes deprecation and some other API…
Continue reading “Migrating to react-router v4…the SSR way – Frontend Weekly – Medium”

Animating SVG Charts built with React and D3 by not important on CodePen

  • As the axes and line plot components receive new data, they also receive new scales based on this data.
  • Component { render () { const xScale = this.buildScale(/* …
  • Another critical ingredient in creating charts are the scales , which will handle fitting the line plot to the dimensions of the container.
  • {x1, x2}} className=”line-chart__axis-tick line-chart__axis-tick–vertical” y1={0} y2={0} /> {labelFn(tickValue)} ); }); } render () { const {scale, view, trbl, labelFn, tickValues, orientation} = this.props; let x1 = view[0]; if (orientation === VerticalAxis.orientation.RIGHT) { x1 = 0; } const x2 = x1; const transform = `translate(${trbl[3]}, ${trbl[0]})`; return (
  • Once the wrapped components are in place, the chart gains the new behavior of smoothly animating the line plot and axes to accommodate the new data.

Read the full article, click here.


@56clindsey: “wrote a blog post about my method of #svg #charts #animation using #reactjs & #d3js via @CodePen #DataVisualization”


One possible approach to creating data visualization charts is to use React and D3, where React handles building all of the SVG and D3 does the calculations required. D3 has the capacity to create SVG elements and manipulate the DOM directly but it’s also a toolbox with just about everything needed to build charts in any way imaginable. For this blog post’s experiments, SVG and React were used but could have also been done using the Canvas element and Pixi.js, for example, thanks to D3’s flexibility.


Animating SVG Charts built with React and D3 by not important on CodePen