How to use jinja2 side server support without breaking inline-script CSP

Question

I am new to the reactor and experimenting a bit. I would like to use it on my Flask site, which uses Jinja2 templates.

It seems that people recommend first displaying the data on the server side, and not always making the initial data call to load the page. I found this nodejs , but it just puts the data on the page into a global variable in the inline script tag. I was wondering if there is a clean way to do this, other than just putting the data on the page inside the inline script tag. Due to my secure CSP policy, I cannot use inline scripts or eval.

Is there a standard template used by people to render data for React on a server without using a built-in variable?

Answer 1

You can, of course, use it on sites with server-side rendering through Jinja. The question is: what do you want to update on the page without reloading? Typically, the state of a component in a reagent is updated through user interaction or a changing data source (i.e. Db API).

, ( Jinja) , React / API (, Flask-Restful). API React ( "getInitialState" "setState" )

, , layout.html, {% block content %} React js.

{% extends "layout.html" %}


{% block content %}

<h2>Some Header</h2>

<script type="text/jsx" src="/scripts/ReactComponent1.js">
</script>

<div id="one">
<!-- This element contents will be replaced with ReactComponent1. -   ->
</div>

<script type="text/jsx" src="/scripts/ReactComponent2.js">
</script>

<div id="two">
<!-- This element contents will be replaced with ReactComponent2. -->
</div>



{% endblock %}

React Tutorial -.