Initializers in React.js?

Question

I am using react 0.13.1 in a rails 4.2.1 application with react-rails and browserify-rails. I am not doing a single page application, but instead adding react components on rendered pages and using the rails routing system.

When I load a page, I want to initialize a few things, but I'm not sure where this code should go. Does react have a initializer function that it always calls before rendering components or does it always render the first component first such that I can just add initializer code to the first component?

How would I go about putting react initializer code in my multi page rails application? (should work for client or server rendered react code)

Note: Assume only react and plain javascript is being used.

Edit: not asking about initializing on each component, but rather initializing code after page load, but before react starts going through and rendering any components.

Anders Ekdahl · Accepted Answer · 2015-05-01 19:58:15Z

3

The entry point to initialize React is the call to React.render(), so you should perform any initialization before that call. If the initialization is async, just call React.render() in the callback.

And there's also the componentWillMount method on every component which can be used for component specific initialization.

answered May 1, 2015 at 19:58

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derek Over a year ago

Thanks for the answer, but it's not really what I'm looking for. I edited my question, hopefully it clarifies my question.

Anders Ekdahl Over a year ago

I answered both how you do initialization before React kicks off, and component initialization. Like I said, do it on page load before you call React.render().

PythonIsGreat · Accepted Answer · 2015-05-02 02:32:56Z

0

Yeah it's all there in React's documentation. Each component has a getInitialState which is called when the object is first requested, you then have oncompentdidmount and another for when the component is dismounted. It's all JavaScript code so initialization code can be done inside each component or just declared globally before or after the React code is executed.

I have a similar setup with Django, where I use Django for it's strengths. Routing, Sessions, Authentication, Rest API ect... and have Django render a bar bones template which loads the React UI. This process seems to work really well, it's greatly sped up my site from where it was before, and the UI is awesome.

So in one particular case with my django app I need certain data to be initialized before the React components try to render themselves. therefore I wrap the initialization code into a function which is called on page load, then as a callback after that function has completed I call another function that actually add's my react components to the page. From there each component has it's own initialization which you've said you're not interested in at the moment, but that is how I handled the situation.

edited May 2, 2015 at 2:32

answered May 1, 2015 at 18:24

PythonIsGreat

7,9377 gold badges25 silver badges26 bronze badges

2 Comments

Derek Over a year ago

Thanks for the answer, but it's not really what I'm looking for. I edited my question, hopefully it clarifies my question.

PythonIsGreat Over a year ago

Okay no problem, i updated my answer with a new paragraph, i think this addresses what you're asking.

Collectives™ on Stack Overflow

Initializers in React.js?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related