Git Product home page Git Product logo

lead_manager_react_django's Introduction

Lead Manager

Full stack Django/React/Redux app that uses token based authentication with Knox.

Quick Start

# Install dependencies
npm install

# Serve API on localhost:8000
python leadmanager/manage.py runserver

# Run webpack (from root)
npm run dev

# Build for production
npm run build

react + django project travesy media tutorial

setup

* install pipenv
* pipenv shell
    Creates a virutal environment. Look for cmd line errors. This creates a pipfile, contains all the libraries.
* pipenv install django djangorestframework django-rest-knox
    Check, all these are installed and added to pipfile
* django-admin startproject leadmanager
    Creates a django project.
    * cd leadmanager
    * select the python interpreter.
    On VSCODE Ctl+Shift+P then select the one which created above and have pipenv label in it.

    * create django app leads
        * python .\manage.py startapp leads
        * add app in settings
        * create Model, makemigrations & migrate
        * pipenv install djongo
        for mongo db.

frontend

inside django project, create django-app named frontend

* npm init -y
creates a package.json with javascript depandancies.
* install web-packs
    * npm install -D webpack webpack-cli
* install babel transpilers
    *  npm install -D @babel/core babel-loader @babel/preset-env @babel/preset-react babel-plugin-transform-class-properties
* npm i react react-dom prop-types

.babelrc

In order to use babel core and presets create .babelrc file. Add presets and plugin details.

webpack.config.js

To use webpack create this file at root. It loads the babel loader.

modify package.json

  • modify the build scripts

    • replace "test": "echo "Error: no test specified" && exit 1" with "dev": "webpack --mode development --watch ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js", * watch switch, dynamically reloads the content. and "build": "webpack --mode production ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js"

    the npm run build will do few more things for production.

Create react index.js under src

  • import app from components
    • create App in components
    • the app renders at index.html root, app element. ReactDOM.render(, document.getElementById('app'));
    • create index.html under templates
    {% load static %} <script src="{ % static "frontend/main.js" % }" Note: The main.js will be created dynamilly when npm run dev or build runs.

layout

* Create a nav bar, leadmanager\frontend\src\components\layout\Header.js
* dashboard, leadmanager\frontend\src\components\leads\Dashboard.js
    * holds leads form and listing
        * Form.js to add a lead
        * Leads.js list of leads.

lead_manager_react_django's People

Contributors

bradtraversy avatar mbb3-mitch avatar iurietarlev avatar 1shaked avatar durgamigt avatar dependabot[bot] avatar dukarc avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.