richellyitalo/App.js

## _react-inside-django.md

      
    Raw
  

              _react-inside-django.md
            
          
    Create a app in django

django-admin startapp frontend
Create following folders in folder app


src/components
static/css/
static/frontend/ (webpack will build main.js here)
static/images/
template/frontend/index.html

Init NPM project

npm init -y
Npm dependencies

Insert/Replace dependenciens and devDependencies in file "package.json"

Now, run npm install

Set node "script" according in package.json file.
Html file

Create index.html according file in this repository.
ReactJs files

Create following javascript files.

src/components/App.js (file App.js in this repository)
src/index.js (file index.js in this repository)

Generate files

To build file just run npm run dev or npm run build.
Django View

Now you need create in views.py the view and add to urls in app and in main app of your project.

  
## App.js
import React, { Component } from 'react';
import { render } from 'react-dom';

export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <h1>Richelly Italo</h1>;
  }
}

render(<App />, document.getElementById('app'));

## babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {% load static %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="{% static "css/index.css" %}"/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
    <title>Music Controller Django</title>
  </head>
  <body>
    <div id="main">
      <div id="app"></div>
    </div>
    <script src="{% static "frontend/main.js" %}"></script>
  </body>
</html>

## index.js
import App from './components/App';

## package.json
{
  "name": "react-django-party",
  "version": "1.0.0",
  "description": "gitignore.io",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/richellyitalo/react-django-party.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/richellyitalo/react-django-party/issues"
  },
  "homepage": "https://github.com/richellyitalo/react-django-party#readme",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "babel-loader": "^8.2.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@material-ui/core": "^4.11.1",
    "@material-ui/icons": "^4.9.1",
    "react-router-dom": "^5.2.0"
  }
}

## webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './static/frontend'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify('production'),
      },
    }),
  ],
};
	import React, { Component } from 'react';
	import { render } from 'react-dom';

	export default class App extends Component {
	constructor(props) {
	super(props);
	}

	render() {
	return <h1>Richelly Italo</h1>;
	}
	}

	render(<App />, document.getElementById('app'));
	{
	"presets": [
	[
	"@babel/preset-env",
	{
	"targets": {
	"node": "10"
	}
	}
	],
	"@babel/preset-react"
	],
	"plugins": ["@babel/plugin-proposal-class-properties"]
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	{% load static %}
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<link rel="stylesheet" href="{% static "css/index.css" %}"/>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
	<title>Music Controller Django</title>
	</head>
	<body>
	<div id="main">
	<div id="app"></div>
	</div>
	<script src="{% static "frontend/main.js" %}"></script>
	</body>
	</html>
	{
	"name": "react-django-party",
	"version": "1.0.0",
	"description": "gitignore.io",
	"main": "index.js",
	"scripts": {
	"dev": "webpack --mode development --watch",
	"build": "webpack --mode production"
	},
	"repository": {
	"type": "git",
	"url": "git+https://github.com/richellyitalo/react-django-party.git"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"bugs": {
	"url": "https://github.com/richellyitalo/react-django-party/issues"
	},
	"homepage": "https://github.com/richellyitalo/react-django-party#readme",
	"devDependencies": {
	"@babel/core": "^7.12.9",
	"@babel/preset-env": "^7.12.7",
	"@babel/preset-react": "^7.12.7",
	"babel-loader": "^8.2.2",
	"react": "^17.0.1",
	"react-dom": "^17.0.1",
	"webpack": "^5.9.0",
	"webpack-cli": "^4.2.0"
	},
	"dependencies": {
	"@babel/plugin-proposal-class-properties": "^7.12.1",
	"@material-ui/core": "^4.11.1",
	"@material-ui/icons": "^4.9.1",
	"react-router-dom": "^5.2.0"
	}
	}
	const path = require('path');
	const webpack = require('webpack');

	module.exports = {
	entry: './src/index.js',
	output: {
	path: path.resolve(__dirname, './static/frontend'),
	filename: '[name].js',
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: /node_modules/,
	use: {
	loader: 'babel-loader',
	},
	},
	],
	},
	optimization: {
	minimize: true,
	},
	plugins: [
	new webpack.DefinePlugin({
	'process.env': {
	// This has effect on the react lib size
	NODE_ENV: JSON.stringify('production'),
	},
	}),
	],
	};