Hi,
I've been working on the Java back end of my project but having to move over to doing some React enhancements on the UI.
I really want to get stuck in but finding it frustrating that I'm still trying to get React concepts into my thick head. Some of that is because, when I read web articles for assistance, nearly everything is (obviously) couched in terms of the latest guidelines.
What I mean by this is that React tutorials tend to present React class components in their ES6 format. Unfortunately, though, my project is stuck with AMD for the time being, for example:
define([], function(){
return function renderDOM($, React, ReactDOM, antd, Promise, widgetHeight, widgetWidth, element){
var CommSettings = React.createClass({
propTypes: {
widgetHeight: React.PropTypes.number,
widgetWidth: React.PropTypes.number,
setComm: React.PropTypes.func,
etc...
The above isn't helped by the fact that those who wrote the existing project code, erm..., shall we say, didn't take too much care over the Single Responsibility principle: so I'm not finding it easy to look at a single JSX file of 800 lines and appreciate what's going on.
But my real question is largely this: I'm getting to grips with the concepts explained in the ReactJS tic-tac-toe tutorial, but I want to understand how the standard ES6 declaration of a class constructor, passing of props and setting of initial state variables map back into the AMD way of doing things (as shown above). I just need an idiot's guide of how to achieve the same thing using React.createClass(), getInitialState(), propTypes:{...}, and so on.
Can anyone help ?
Top comments (3)
It may help to separate concerns. First look at just how to work with amd/requirejs and some plain javascript. Then dig into how older react works with the createClass stuff (nothing to do with amd) - e.g. search for "react createClass vs Component" and you should be able to find some articles that help map between the older and newer react syntax.
@nestedsoftware
Many thanks !
Possibly try a "transpile to AMD" strategy?
We are running a setup where React components that are written in CommonJS/ES5 on the backend need to be available on the front-end also for React rendering on both server and client.
I am trying to figure out how to transpile the React components from JSX to JS as well…