Django is an open source Python-based web framework<\/a> for building web applications quickly. And ReactJS is the latest JavaScript framework to capture the hearts and attention of the developer community. And it is also necessary to adapt things as per the market demands!<\/p>\n\n\n\nPrerequisites<\/b><\/p>\n\n\n\n- In your System, You should have installed Django, if not then go here, and install it and if you are using virtualenv<\/i> to install, then its a better way.<\/li>
- After this, you need to install npm<\/i> and reactjs<\/i> in your System. To install react execute
npm install --save-dev react react-dom<\/code><\/i><\/li>- For reactJS, you need to install webpack-loader<\/i> to keep a bridge between django and reactJS. To install webpack<\/i>, execute
pip3 install django-webpack-loader<\/code><\/i><\/li><\/ul>\n\n\n\nSteps<\/b><\/p>\n\n\n\n- Create Django project. If you don\u2019t know the steps then please follow this. I have created one django project named as \u2018django_react\u2019.<\/i><\/li>
- Then create one application in that project. I have created app named as \u2018my_app\u2019.<\/i><\/li>
- Create one folder name as \u2018templates\u2019<\/i> in my_app<\/i> folder. e.g. my_app\/templates<\/i> and \u2018asset\u2019<\/i> inside django_react<\/i> folder which is our project folder.<\/li><\/ol>\n\n\n\n
Now Django configurations are done, let\u2019s configure npm:<\/strong><\/p>\n\n\n\n- Generate a package.json<\/i> inside your project\u2019s root folder using command
npm init<\/code><\/i> Now npm will ask you for some information, provide it and hit Enter.<\/li>- Now setting up all the modules of webpack using command
npm install webpack webpack-bundle-tracker babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev<\/code><\/i><\/li>- After installing the required dependencies we need a config file for Webpack to tell it what to do . Let\u2019s navigate to your project root folder then execute touch webpack.config.js<\/i> Then add this :