Here we are, at Part 2! Here’s a quick recap of what we’ll be covering: we’ll put the lightweight yet robust JavaScript UI toolkit ReactJS through its paces by creating a simple web app.
The backend of this project is written in Python 3 using the Flask framework, while the frontend is written in React. Gulp.js (a task runner), Bower (a front-end package management), and Browserify (a JavaScript dependency manager) will also be used.
bundler).
-
Part 1 – Getting Started
-
Part 2 – Developing a Dynamic Search Tool (current)
Recent Changes:
-
05/22/2016: Upgraded to the latest version of React (v
15.0.1
).
React – Round Two
Although “Hello World” is nice and all, let’s move on to something more interesting, like a dynamic search engine. Input from the user is used in conjunction with this Component to narrow down a long list of options.
Want the secret? You may get it from the repository. To pick up where we left off in Part 1, download version 2.2.
At project/static/scripts/jsx/main.js, add the following code:
:
What the heck is going on?
We developed a component called DynamicSearch that refreshes the DOM whenever the input box’s value is changed. How does it function, exactly? When a new or deleted value is selected in the input box, the handleChange() method is triggered, which then calls setState() to reflect the new state. The render() method is used to redraw the Component via this technique. One important point is that changes in state are localized to the Component itself.
Prove it out:
Because we put our JSX code in a separate file, we need to initiate the transformation from JSX to plain JavaScript at a location other than the browser.
Gulp.
Gulp
Gulp is a robust task runner/build tool that can automate the transformation procedure. We’ll also utilize it to generate fresh builds whenever there are modifications to our code (project/static/scripts/jsx/main.js).
changes.
Initialization
Gulp, like bower, is available through npm. It should be installed system-wide before being included in package.json.
file:
$ npm install -g gulp
$ npm install --save-dev gulp
Create a gulpfile.js in your project’s root directory.
project:
// requirements
var gulp = require('gulp');
// tasks
gulp.task('default', function() {
console.log("hello!");
});
With this file, you may specify the sequence in which you want gulp to execute your tasks. You can see that the string hello is being recorded by our default job. Towards the control panel. Just type “gulp” to have this done. There’s something you need to see
like:
$ gulp
[08:54:47] Using gulpfile ~/gulpfile.js
[08:54:47] Starting 'default'...
hello!
[08:54:47] Finished 'default' after 148 μs
Please set up the subsequent gulp
plugins:
You may accomplish this by editing the package.json file.
file:
{
"name": "ultimate-flask-front-end",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/realpython/ultimate-flask-front-end.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/realpython/ultimate-flask-front-end/issues"
},
"homepage": "https://github.com/realpython/ultimate-flask-front-end#readme",
"devDependencies": {
"bower": "^1.7.9",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-browser": "^2.1.4",
"gulp-size": "^2.1.0",
"reactify": "^1.1.1"
}
}
The plugins may be installed by running npm install.
These added modules may be seen in the “node modules” folder. Don’t forget to include this list into your
This file is a.gitignore.
At long last, refresh your gulpfile.js.
:
// requirements
var gulp = require('gulp');
var gulpBrowser = require("gulp-browser");
var reactify = require('reactify');
var del = require('del');
var size = require('gulp-size');
// tasks
gulp.task('transform', function () {
// add task
});
gulp.task('del', function () {
// add task
});
gulp.task('default', function() {
console.log("hello!");
});
Tasks
Then, we’ll implement some activities to manage the transition from JSX to HTML.
JavaScript.
First task –
gulp.task('transform', function () {
var stream = gulp.src('./project/static/scripts/jsx/*.js')
.pipe(gulpBrowser.browserify({transform: ['reactify']}))
.pipe(gulp.dest('./project/static/scripts/js/'))
.pipe(size());
return stream;
});
Both the task’s name and an anonymous function are required for the task() function to be called.
which:
- Defines the source directory,
- Pipes the JSX files through the Browserify JSX transformer
- Specifies the destination directory, and
- Calculates the size of the created file(s).
Gulp makes use of pipes to continuously process data. The “pipe” is then used to send the source file (main.js) to the browserify() method, where it is transformed and bundled. The size() command is “piped” together with the modified and packaged code to the target directory.
Intrigued with waterways and plumbing systems? Look into
this really useful reference.
Are you up for a little quiz? Modify the index.html file.
:
<!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') }}">
</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>
And finally, refresh the default
task:
gulp.task('default', function () {
gulp.start('transform');
});
Test:
$ gulp
[08:58:39] Using gulpfile /gulpfile.js
[08:58:39] Starting 'default'...
[08:58:39] Starting 'transform'...
[08:58:39] Finished 'default' after 12 ms
[08:58:40] all files 1.99 kB
[08:58:40] Finished 'transform' after 181 ms
What about the line just before the final one? The size() method yielded these results. The size of the transformed JavaScript file is 1.99 kilobytes and can be found in the directory project/static/scripts/js/main.js.
Go to http://localhost:5000/ and start the Flask server. All of the nations and the search bar should be visible. Try out the features. Also, the string, scope updated! may be seen in Chrome’s JavaScript console. , recorded each time the scope changes thanks to the DynamicSearch module’s handleChange() method.
Component.
Second task –
gulp.task('del', function () {
return del(['./project/static/scripts/js']);
});
This job is executed by retrieving the source directory (the output of the transform task) and then deleting its contents using the del() function. It’s recommended to run this before beginning every new build to guarantee a clean slate.
You may try gulp del. Project/static/scripts/js should be deleted after this. Let’s make it the first thing that happens in our workflow by adding it to our default job.
transformation:
gulp.task('default', ['del'], function () {
gulp.start('transform');
});
Before you pack things up and go, make sure it works.
on.
Third task –
Last but not least, modify the default task such that the convert job is automatically re-run if any.js files in the “project/static/scripts/jsx” directory undergo any changes.
directory:
gulp.task('default', ['del'], function () {
gulp.start('transform');
gulp.watch('./project/static/scripts/jsx/*.js', ['transform']);
});
To produce a fresh build and enable the watcher capability, open a new terminal window, browse to the project root, and execute gulp. Launch the Flask server in the other window by typing sh run.sh. Your program has to be active. Now, the transform function will be activated if the whole project/static/scripts/jsx/main.js file is commented out. To see the updates, please refresh your browser. After you’re finished, please undo the modifications.
Do you want to further the discussion? Try trying the Livereload add-on, if you like.