React-Redux-Flask
Boilerplate application for a Flask JWT Backend and a React/Redux Front-End with Material UI.
- Python 2.7+ or 3.x
- Pytest
- Heroku
- Flask
- React
- Redux
- React-Router 2.0
- React-Router-Redux
- Babel 6
- SCSS processing
- Webpack
Create DB
$ export DATABASE_URL="postgresql://username:password@localhost/mydatabase"
or
$ export DATABASE_URL="mysql+mysqlconnector://username:password@localhost/mydatabase"
or
$ export DATABASE_URL="sqlite:///your.db"
(More about connection strings in this flask config guide.)
$ python manage.py create_db
$ python manage.py db upgrade
$ python manage.py db migrate
To update database after creating new migrations, use:
$ python manage.py db upgrade
Install Front-End Requirements
$ cd static
$ npm install
Run Back-End
$ python manage.py runserver
Test Back-End
$ python test.py --cov-report=term --cov-report=html --cov=application/ tests/
Run Front-End
$ cd static
$ npm start
Build Front-End
$ npm run build:production
New to Python?
If you are approaching this demo as primarily a frontend dev with limited or no python experience, you may need to install a few things that a seasoned python dev would already have installed.
Most Macs already have python 2.7 installed but you may not have pip install. You can check to see if you have them installed:
$ python --version
$ pip --version
If pip is not installed, you can follow this simple article to get both homebrew and python
After you install python, you can optionally also install python 3
$ brew install python3
Now you can check again to see if both python and pip are installed. Once pip is installed, you can download the required flask modules:
$ sudo pip install flask flask_script flask_migrate flask_bcrypt
Now, you can decide on which database you wish to use.
New to MySQL?
If you decide on MySQL, install the free community edition of MySQL and MySQL Workbench
- start MySQL from the System Preferences
- open MySQL Workbench and create a database called mydatabase but don't create the tables since python will do that for you
- Install the MySQL connector for Python, add the DATABASE_URL configuration, and create the database and tables
$ sudo pip install mysql-connector-python-rf
$ export DATABASE_URL="mysql+mysqlconnector://username:password@localhost/mydatabase"
$ python manage.py create_db
Note: you do not need to run "python manage.py db upgrade" or "python manage.py db migrate" if its your first go at it
- Run Back-End
$ python manage.py runserver
If all goes well, you should see * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) followed by a few more lines in the terminal.
- open a new tab to the same directory and run the front end
$ cd static
$ npm install
$ npm start
- open your browser to http://localhost:3000/register and setup your first account
- enjoy! By this point, you should be able to create an account and login without errors.
-
引言 本来想一口吃成个胖子，但发现埋头学的效果不佳（其实是学不会。。。redux、antdpro都看不懂。。。不得不感慨一句：学历如天谴那）。于是决定先用已有的知识体系把项目搭起来再说，边搭边学吧。另外，本人虽是python出身，也学过一定时间的基础知识，并有实际全职码python代码的工作经历，但对于flask框架其实也是一知半解，很多知识点并未深入，也得边写边学。第一次练习的项目，肯定有很多问
-
这是一篇详尽的 React Redux 扫盲文。 对 React Redux 已经比较熟悉的同学可以直接看 《React Redux 与胖虎他妈》。 是什么 React Redux 是 Redux 的 React 版，Redux 本身独立于其他框架而存在，又可以结合其他视图框架使用，比如此处的 React。 干嘛的 按个人理解，Redux 是应用的状态管理框架，以事件流的形式来发送事件、处理事件、
-
创建项目 既然前端使用了React框架，那么后端也应该使用框架来提高开发效率。 这里我使用spring boot框架进行后端开发。 因为spring boot易于开发和测试。 创建spring boot项目工程目录并创建主界面也是流行了几年的技术。 虽然 React 和 Angular 已经流行了很多年，但目前仍然是最流行的。 尽管较新的 Vue正在取得进展，但它们与前两者仍有一定差距。 那么我
-
本文将涉及以下三块内容： 多 Reducer 中间件 封装组件方便获取 Store 前言 在上一篇文章《React Redux与胖虎》 中我们详尽地介绍了 React Redux，也写了一个简单的计数器。 这篇文章叫《React Redux与胖虎他妈》，因为在哆啦A梦里面，胖虎虽然很屌老是欺负大雄和小夫，但是在他妈面前没少挨揍，胖虎他妈还是他妈，所以这篇文章主要是介绍 React Redux 的一
-
写一本关于 React.js 的小书 - 掘金 React.js 小书 本文作者：胡子大哈本文原文：React.js 小书 转载请注明出处，保留原文链接以及作者信息 在线阅读：http://huziketang.com/books/r... 简介 这是一本关于 React.js 的小书。 因为工... 用React、Redux、Immutable做俄罗斯方块 | 掘金技术征文 - 掘金 俄罗斯方块
-
利用react开发一个简单的博客系统， 首先我们简单的了解一下react的简单实用 博客的功能 信息发布系统 登录管理 博客发布 后台管理 权限管理 什么是前端开发? 将页面显示和业务逻辑独立，使用组件开发,解决传统页面代码混合html显示及js业务代码的弊端 常见的框架: react(facebook,react-native) vue AngularJS nodejs的出现使JS代码的开发脱离
-
===============课程目录=============== ├<JavaScript基础 36集> │ ├01.介绍.mp4 │ ├02.在网页中嵌入脚本代码的方法.mp4 │ ├03.注释.mp4 │ ├04.变量-给东西起个名字.mp4 │ ├05.数据的类型 - 数字，文字，真与假 ..mp4 │ ├06.文本字符串的处理.mp4 │ ├07.Array数组.mp4
-
首先我们看看flask的优点，再寻找最适合flask的前端框架。 Flask是一个基于Jinja2和Werkzeug的python微框架。内建的单元测试支持、模板使用Jinjia2、大量文档、客户端会话使用cookies、开发服务器和调试器、Restful请求、与WSGI 1.0兼容、基于unicode、大量的扩展。 Flask是一个年轻的框架，2010年诞生，Flask的目标是不给程序员强加限制
-
目录 为何组件没有被重新渲染、或者 mapStateToProps 没有运行？ 为何组件频繁的重新渲染？ 怎样使 mapStateToProps 执行更快？ 为何不在被连接的组件中使用 this.props.dispatch ？ 应该只连接到顶层组件吗，或者可以在组件树中连接到不同组件吗？ React Redux 为何组件没有被重新渲染、或者 mapStateToProps 没有运行？ 目前来看，
-
Universal React Redux Boilerplate A universal React/Redux boilerplate with sensible defaults. Out of the box, thisboilerplate comes with: Server-side rendering with Express Code splitting with dynamic
-
React-Redux-Enterprise A React-Redux boilerplate for enterprise web applications. Before you start with this boilerplate, please take a few minutes to read this article and see if you really need this
-
Live redux-react-starter This repository contains the minimal app to get started with redux, react, hot-reloading, async function and some other great stuffs. How to yarn 0.18+ must be present on your
-
React/Redux Links Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn abou
-
React Redux Saucepan A minimal Universal React redux JS stack using Flow, with hot reloading, linting and server-side rendering. This is a universal react project. It provides server-side rendering an