Let’s look at the small, yet powerful JavaScript UI library ReactJS in action, as we build a basic web application. This app is powered by Python 3 and the Flask framework, in the back-end, along with gulp.js (task runner), bower (front-end package manager), and Browserify (JavaScript dependency bundler), in the front.
Part 1 – getting started (current)
Part 2 – developing a dynamic search tool (coming soon)
Note This tutorial uses React v0.12.2.
React Explained
React is a library, not a framework. Unlike client-side MVC frameworks, like Backbone, Ember, and AngularJS, it makes no
assumptions about your tech stack so you can easily integrate it into a new or legacy code base. It’s often used to manage specific areas of an application’s UI, rather than the entire UI.
React’s only concern is with the user interface (the ‘V’ in MVC), which is defined by a hierarchy of modular view Components that couple static markup with dynamic JavaScript. If you’re familiar with Angular, these Components are similar to Directives. Components use an XML-like syntax called JSX that compiles down to vanilla JavaScript.
Since Components are defined in a hierarchical order, you don’t have to re-render the entire DOM when a state changes. Instead, it uses a Virtual DOM that only re-renders the individual Components after the state has changed, at blazingly fast speeds!
Be sure to review the Getting Started guide and the excellent Why did we build React? blog post from the official React documentation.
Project Setup
Let’s start with what we know: Flask.
Download the boilerplate code from the repository, extract the files, create then activate a virtualenv, and install the requirements:
pip install -r requirements.txt
Finally, let’s run the app and start the show:
React – round one
Let’s look at a simple Component, to get our feet wet.
The Component: Moving from Static to React
We are going to add this JSX script to our hello.html. Take a minute to check it out.
What’s going on?
We create a Component by calling createClass(), assigning it to the name realPython. React.createClass() takes a single argument, an object.
Inside this object we add a render function that declaratively updates the DOM when called.
Next comes a return value of <h2>Greetings, from Real Python!</h2>, in JSX, which represents the actual HTML element that will be added to the DOM.
Finally, React.render() instantiates the realPython Component and injects the markup into a DOM element with an ID selector of content.
Refer to the official docs for more info.
The Transformation
What’s next? Well, we need to “transform”, or compile, the JSX to JavaScript. This is easy. Update hello.html like so:
Here we add the helloWorld Component to the template along with the following scripts-
-the latter of which, JSXTransformer.js, is used to “transform” the JSX syntax into plain JavaScript within the browser.
Notice how we did not add jQuery since it is not required for React.
That’s it. Run the Flask development server and check out the results in the browser at http://localhost:5000/hello.
Bower
Instead of using the pre-built JavaScript files, from the CDN, let’s use bower to better (IMHO) manage those dependencies. Bower is a powerful package manager for front-end dependencies – i.e., jQuery, Bootstrap, React, Angular, Backbone.
Make sure you have Node and npm installed before moving on.
Initialization
Install bower with npm:
npm is another package manager used to manage Node modules. Unlike PyPI/pip, the default behavior of npm is to install dependencies at the local level. The -g flag is used to override that behavior to install bower globally since you will probably use bower for a number of projects.
bower.json
Bower uses a file called bower.json to define project dependencies, which is similar to a requirements.txt file. Run the following command to interactively create this file:
Just accept the defaults for now. Once done, your bower.json file should look something like this:
For more on the bower.json and the init command, check out the official documentation.
npm
Like the bower.json file, npm utilizes a similar file, called package.json to define project-specific dependencies. You can also create it interactively:
Accept the defaults:
Now, let’s add bower to the npm dependency file:
Configuration
Along with the bower.json file, we can define configuration settings in a file called .bowerrc. Create the file now within the project root. Your project structure should now look like this:
The standard behavior is for bower to install packages in a directory called “bower_components” in the project root. We need to override this behavior since Flask needs access to the packages within the static directory. Thus, add the following JSON code to the file so that bower automatically installs the file in the correct directory:
Installation
We need to install the following packages for this project:
Bootstrap
jQuery
React
This can be done in one of two ways:
Run bower install <package_name> --save for each package (the --save flag adds the dependencies (name and version) to the bower.json file.).
Update the bower.json file directly with each dependency (again, name and version) and then run bower install to install all dependencies from the file.
Since we (err, I) know the versions already, let’s use the second method. Update the bower.json file like so-
-and then run bower install:
You should now see the “project/static/bower_components” directory.
Now anyone can pull in all the required dependencies with pip, npm, and bower after cloning the repo:
Test
Update the scripts in hello.html:
Test out the app to make sure it still works.
Next Steps
With that, we’ll move back to React and develop a more robust app in the second part. Cheers!
Edits made by Derrick Kearney. Thanks!