You can use React from within the Flask templating engine. Since React isn't a framework (it is a library) you can integrate it in other Frameworks. Even those using other languages, like the Python framework Flask. The way it is done below it can be used in pretty much and other framework that has a web compatible view.
I was recently experimenting using React from within the Flask templating engine. The code I was using was from this tutorial. While I certainly like the idea of what this code does, it is it is not very useful as is since the array used for the search in hard coded.
After playing around with it for a while and reading more than a couple of online discussions I worked out how to set the variable from within the template. This in effect will allow Flask to pass variables into the React scripts.
All you need to do to get the array declaration into Flask is move the declaration of countries variable from the Javascript file and move it into the Flask template. The function as per the tutorial looks like the following. The improved version is below this:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var DynamicSearch = React.createClass({displayName: "DynamicSearch",
// sets initial state
getInitialState: function(){
return { searchString: '' };
},
// sets state, triggers render method
handleChange: function(event){
// grab value form input box
this.setState({searchString:event.target.value});
console.log("scope updated!");
},
render: function() {
var countries = this.props.items;
var searchString = this.state.searchString.trim().toLowerCase();
// filter countries list by value from input box
if(searchString.length > 0){
countries = countries.filter(function(country){
return country.name.toLowerCase().match( searchString );
});
}
return (
React.createElement("div", null,
React.createElement("input", {type: "text", value: this.state.searchString, onChange: this.handleChange, placeholder: "Search!"}),
React.createElement("ul", null,
countries.map(function(country){ return React.createElement("li", null, country.name, " ") })
)
)
)
}
});
var countries = [
{"name": "Sweden"}, {"name": "China"}, {"name": "Peru"}, {"name": "Czech Republic"},
{"name": "Bolivia"}, {"name": "Latvia"}, {"name": "Samoa"}, {"name": "Armenia"},
{"name": "Greenland"}, {"name": "Cuba"}, {"name": "Western Sahara"}, {"name": "Ethiopia"},
{"name": "Malaysia"}, {"name": "Argentina"}, {"name": "Uganda"}, {"name": "Chile"},
{"name": "Aruba"}, {"name": "Japan"}, {"name": "Trinidad and Tobago"}, {"name": "Italy"},
{"name": "Cambodia"}, {"name": "Iceland"}, {"name": "Dominican Republic"}, {"name": "Turkey"},
{"name": "Spain"}, {"name": "Poland"}, {"name": "Haiti"}
];
ReactDOM.render(
React.createElement(DynamicSearch, {items: countries }),
document.getElementById('main')
);
},{}]},{},[1]);
So the finished code will look something like the following:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Flask React</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
<script>
var countries = [
{"name": "Sweden"}, {"name": "China"}, {"name": "Peru"}, {"name": "Czech Republic"},
{"name": "Bolivia"}, {"name": "Latvia"}, {"name": "Samoa"}, {"name": "Armenia"},
{"name": "Greenland"}, {"name": "Cuba"}, {"name": "Western Sahara"}, {"name": "Ethiopia"},
{"name": "Malaysia"}, {"name": "Argentina"}, {"name": "Uganda"}, {"name": "Chile"},
{"name": "Aruba"}, {"name": "Japan"}, {"name": "Trinidad and Tobago"}, {"name": "Italy"},
{"name": "Cambodia"}, {"name": "Iceland"}, {"name": "Dominican Republic"}, {"name": "Turkey"},
{"name": "Spain"}, {"name": "Poland"}, {"name": "Haiti"}
];
</script>
</head>
<body>
<div class="container">
<h1>Flask React</h1>
<br>
<div id="main"></div>
</div>
<!-- scripts -->
<script src="{{ url_for('static', filename='bower_components/react/react.min.js') }}"></script>
<script src="{{ url_for('static', filename='bower_components/react/react-dom.min.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/js/main.js') }}"></script>
</body>
</html>
Note the addition of the json array in the header.
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var DynamicSearch = React.createClass({displayName: "DynamicSearch",
// sets initial state
getInitialState: function(){
return { searchString: '' };
},
// sets state, triggers render method
handleChange: function(event){
// grab value form input box
this.setState({searchString:event.target.value});
console.log("scope updated!");
},
render: function() {
var countries = this.props.items;
var searchString = this.state.searchString.trim().toLowerCase();
// filter countries list by value from input box
if(searchString.length > 0){
countries = countries.filter(function(country){
return country.name.toLowerCase().match( searchString );
});
}
return (
React.createElement("div", null,
React.createElement("input", {type: "text", value: this.state.searchString, onChange: this.handleChange, placeholder: "Search!"}),
React.createElement("ul", null,
countries.map(function(country){ return React.createElement("li", null, country.name, " ") })
)
)
)
}
});
ReactDOM.render(
React.createElement(DynamicSearch, {items: countries }),
document.getElementById('main')
);
},{}]},{},[1]);
Note the declaration for the array is missing in this version.
Copyright © 2020 | Ben Hutton