Take an existing single-page-app built with Django 1.11 and AngularJS and replace AngularJS with React.
Use Create React App to manage the React installation.
Add Sass, Bootstrap, and other goodies.
Any line preceeded by a “$” is intended as a terminal command. For example:
line you should copy into terminal
Lines to insert into files will be shown as a code snippet. For example:
Work on a new git branch based on our master branch. This is a major shift, let’s keep the dev and master branches free to handle anything that comes up while we’re working.
Create a new branch from your ‘master’ branch.
git branch react
Move to the new branch.
git checkout react
Add the new branch to github.
git push --set-upstream origin react
Install React via Create React App. It will handle all of our dependencies and greatly simplify our configuration. This is a very good thing.
In your terminal navigate to the project root and install create-react-app.
npm install -g create-react-app
Create your react app - naming it ‘frontend’ is fairly common.
Your new directory structure:
DjangoProjectName bunch of folders (api, core, conf, media, etc.) frontend node_modules (folder) public (folder) src (folder) .gitignore package.json README.md
We’ve installed React! Ta-Da! Let’s make a commit and then we’ll dive into the configuration.
First see what has changed on our branch.
Stage the changes to be pushed to github.
git add .
Double check that we’ve staged the right stuff.
Add a commit message
git commit -m "initial install of react"