Kenny Pham

Create React App (create-react-app) is awesome!

Kenny Pham — Tue, 03 Jan 2017 06:33:00 GMT

I just want to shout out to Dan and the Facebook team for this awesome project! Now getting React to work takes less time that ever!

https://github.com/facebookincubator/create-react-app

Tutorial: Setting up react-router with Django

Kenny Pham — Sat, 02 Apr 2016 22:41:29 GMT

5 months ago I posted a problem that I was facing. Since then, I solved that problem. I received a request today to write up a tutorial showing what I did. Here is my solution:

For react-router to work with Django, you have to setup a root URL in Django. Then, you have to let react-router handles the rest.

For example, you have a Dashboard on your website that is built using React. In the Django urls.py file, this is the setting that you want to have:

url(r'^dashboard/', TemplateView.as_view(template_name="dashboard.html")),

It means that Django will handle http://your-url.com/dashboard and point that to your dashboard.html template.

Sample dashboard.html:

  
  
  
    
    New React App

Inside dashboard.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute } from 'react-router';

const MainDashboard = React.createClass({  
  render() {
    return (
    
       
          Main Dashboard
          Message
          Calendar
       

       {/* this is the important part */}:
       {this.props.children}

    
   );
 }
});

const Message = React.createClass({/*...*/})
const Calendar = React.createClass({/*...*/})

ReactDOM.render((
  
    
      
      
    
  
), document.body)

Notice the ? Even though you are accessing http://your-url.com/dashboard, React-router will know that you're at the root since that is handled by Django.

Now when a user navigates to the Message section on your Dashboard or tries to access it directly by entering http://your-url.com/dashboard/#/message, React-router will be able to handle that by rendering your Message component accordingly to your code.

For advanced usage, I suggest reading the documentation for react-router at https://github.com/reactjs/react-router/tree/master/docs

Happy coding!

Setting up Wepack and React with ES2015 syntax supported on Django 1.8+

Kenny Pham — Sat, 21 Nov 2015 08:17:00 GMT

Last week I finished implementing Webpack and React with Django 1.9 thanks to this article from Owais Lone: http://owaislone.org/blog/webpack-plus-reactjs-and-django/

However, I had stumbled upon some errors since I use some ES2015 syntax in my React's JSX code.

So if you follow that tutorial but still couldn't make your setup to work. Please take your time to do these additional steps:

First, you have to install an npm package name "babel-preset-es2015" by running this command:

npm install --save-dev babel-preset-es2015 babel-preset-react

Then, on the same directory where you have your npm's package.json file. Add a file named .babelrc with this content:

{ "presets": ["react","es2015"] }

It means that whenever you use webpack to bundle your JSX code. It will use babel-preset-react and babel-preset-es2015 to translate your JSX files to JS files with ES2015 syntax supported.

Moreover, in your Django's settings.py file, the original code from the tutorial is:

WEBPACK_LOADER = { 'BUNDLE_DIR_NAME': 'bundles/', 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), }

However, if you are using a newer Django version (1.9+). You need to change those lines to:

WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'bundles/', 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), } }

Then, you can run the command ./node_modules/.bin/webpack --config webpack.config.js like the tutorial shows and you'll be good to go!

Problem with react-router and Django URLs (solved)

Kenny Pham — Tue, 10 Nov 2015 09:45:34 GMT

Update on November 21, 2015: I have found a solution for this problem. A tutorial will be posted soon.

Wow it is 2016 now, the tutorial is at: http://kennypham.me/tutorial-setting-up-react-router-with-django/

Hello there,

I have faced this problem since the beginning of the current project. The problem is that react-router and Django urls don't like each others.

For example, I have this line in Django's urls.py:

url(r'^dashboard/',TemplateView.as_view(template_name="dashboard.html"))

and these lines in my React's file:

render((
  
    
    
    
  
), document.getElementById('content'))

When visiting http://www.example.com/dashboard, things work really well. However, when I visit http://www.example.com/dashboard/#calendar, what I want is to show the Calendar page. The web app that I build is an SPA so the Calendar page can be rendered when it is selected directly on the Dashboard's menu. However, since Django's URL conflicts with react-router's setting, it will try to render "dashboard.html" regardless.

A member on StackOverflow said that I have to make anything else that is outside of the defined urls to dashboard.html like this:

url(r'^.*/$',TemplateView.as_view(template_name="dashboard.html"))

However, it still doesn't work for me. I'm working for a fix now. I will try to incorporate NodeJS into the server. From now on, I plan to use Django mainly to serve APIs from Django REST Framework but won't use it to render any templates.

It's a great time for me to learn more about npm and trending dependencies from the community. And more on that later. I will write up a tutorial whenever I solve this problem.

Enjoy coding!

How to set up a Digital Ocean droplet with Cloud9 IDE SSH workspace

Kenny Pham — Sat, 31 Oct 2015 06:23:19 GMT

Introduction

In the past, I had always been loath when having to set up a Linux server with SSH to install everything and try to use nano or vim to edit files on that server. This was the reason why I chose Heroku when I had to build a web app for one of my university courses. However,the development process still involved using Git as our version control. I love Git but it's also a pain whenever there is a merge conflict among team members! As time went by, I joined a startup which is still in "stealth" mode. My co-worker told me about Cloud9. After seeing how useful Cloud9 is for our development stack, I would like to give you a complete tutorial of how to create a Digital Ocean droplet and uses Cloud9 SSH workspace to access your server on the cloud.

Cost ($14/month and up)

Digital Ocean is a VPS provider with affordable price. My blog is running on the most basic Digital Ocean droplet which costs only $5/month.

Cloud9 is a service that you can setup your own development server and SSH workspace. In that workspace, you will have a file explorer and an editor. If you have used Sublime Text or Brackets, Cloud9 works pretty much the same. In order to have unlimited SSH workspaces you need to pay for any plans. The cheapest costs 9$ per month.

Tutorial

First of all, you need to sign up for a paid C9 account. After that, go to Your Account setting and copy the SSH key like so:

Now, create a new Droplet on Digital Ocean. Click on "Add SSH Key" near the bottom of the page and paste your SSH key from C9:

Update on Nov 10, 2015: You need to go to the Application tab and choose to install NodeJS in order for Cloud9 to connect and setup its workspace.

The Droplet should be ready in less than 60 seconds. After that, go to your newly created Digital Ocean's droplet and copy the ID address like this:

Go to C9 and create an SSH workspace. Paste your IP to the hostname field. The default username (from the droplet) is "root".

That's it. Click on "Create workspace" and C9 will connect with your Digital Ocean's droplet!

C9 will ask you to install its modules so that it can install all of its core features needed.

The result is this. You will now have a file manager, terminal, and text editor. All in one place!

I bought a new book: Cracking The Coding Interview

Kenny Pham — Mon, 26 Oct 2015 06:22:27 GMT

I decided to buy a new book named "Cracking The Coding Interview" to help me in the future for job interviews. Lately I have read some topics on Quora. There are a lot of people said even though the job's name is "Front-end developer", companies still require their candidates to have a good fundamental understanding of data structure and algorithm. Those are my weaknesses. I'm not going to complain because I believe a good front-end developer needs to have those skills in order to become better or competitive. I was lucky since I have been working on an algorithm to decipher a change-log on Google Docs then visualize it for the DocuViz 2.0 project at my university over the summer until now. I realized that data structure and algorithm are very important. They can change you in a good way.

Hello

Kenny Pham — Fri, 23 Oct 2015 09:20:29 GMT

Hello world!