This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

Overview

react-antd-redux-router-starter

This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

NPM version

Ant Design

Screenshot

Screenshot

Getting started

1.Clone this repo.

2.Modify something in package.json like name to "your-project-name".

3.Run npm install.

$ npm install

4.Run development server.

$ npm run dev

5.Open your browser to http://localhost:8001/

Explanation (I think it's important to beginner)

1.To know the directory structure.

$ tree . -L 2
.
├── README.md
├── index.html
├── node_modules
├── package.json
├── src
│   ├── actions // for redux action
│   ├── common
│   ├── component // dumb component
│   ├── constants // for constants
│   ├── container // smart component
│   ├── data
│   ├── entry // root entrance, a lot of config in it
│   ├── reducers // for redux reducer
│   └── store
├── static
│   ├── assets
│   ├── css
│   ├── img
│   └── js
└── webpack.config.js // add config brfs

2.The whole entrance is index.jsx. I try to describe clearly why import that.

// redux-devtools
import { createDevTools, persistState } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';
// react
import React from 'react';
import { render } from 'react-dom';
// router
import { Router, Route, hashHistory, browserHistory, IndexRoute } from 'react-router';
// redux
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
const loggerMiddleware = createLogger()

import { Provider } from 'react-redux';
import { syncHistory } from 'react-router-redux';
// reducers
import reducer from '../reducers';

const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
  </DockMonitor>
);
// top entry
import App from '../component/App';
import Admin from '../component/Admin';

// Sync dispatched route actions to the history
const reduxRouterMiddleware = syncHistory(browserHistory);
const createStoreWithMiddleware = applyMiddleware(reduxRouterMiddleware)(createStore);


const enhancer = compose(
  applyMiddleware(
    thunkMiddleware,
    loggerMiddleware
  ),
  DevTools.instrument(),
  persistState(
    window.location.href.match(
      /[?&]debug_session=([^&]+)\b/
    )
  )
);

const store = createStore(
  reducer,
  enhancer
)
// Required for replaying actions from devtools to work
reduxRouterMiddleware.listenForReplays(store)

const routes = {
  path: '/',
  component: App,
  childRoutes: [
    {
      path: 'admin',
      component: Admin
    },
    {
      path: '*',
      component: App
    }
  ]
};

3.Redux, read doc more and clear the connection between actions-reducers-container-component.

More Redux:

Install environment and test (important)

1.Make sure you have install nodejs.

$ npm -v
3.5.2

2.Then install antd-init in the global.

$ npm i antd-init -g
...
$ antd-init -v
0.6.3

3.New your project.

$ mkdir <your-project-name> && cd <your-project-name>
$ antd-init
...

4.Run development server.

$ npm run dev

More usage: http://ant-tool.github.io/

Inspiration

Thanks to ant-design group for providing the UI components for developers. And I began to learn react in December last year, in work I am a mobile application developer as android/iOS platform, so I am a freshman. I sent many emails to yiming he who in ant-design group, thanks to him once again.

Write in react and antd I used

My Blog yuzhouisme.com.

Tome, help students to remember words tome.yuzhouisme.com.

You might also like...
A fullstack monorepo template to develop ethereum dapps
A fullstack monorepo template to develop ethereum dapps

full-stack dApp starter for solidity smart contract development A monorepo boilerplate code for typesafe full-stack Solidity development based on temp

In this tutorial, you'll learn to develop a wallet for the Solana protocol.
In this tutorial, you'll learn to develop a wallet for the Solana protocol.

Wallet Tutorial In this tutorial, you'll learn to develop a wallet for the Solana protocol. We will provide a simple Next.js application that you will

A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint

UniversalJS A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel fo

Boilerplate with React client and Express backend written in TypeScript. Offers performance and extended functionality. Comes with SSR and without need to learn a framework. Helps to avoid frequent React-Express integration pitfalls.
Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes.

Create React App boilerplate template with React, Redux Toolkit, React Router, Ant Design, Axios, Redux-Saga, SASS, Authentication, Routes. No configuration is required, Start building your App.

A simple, delicate and modern template for who anyone need portfolio

A simple, delicate and modern template for who anyone need portfolio

This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority
This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

[iOS App Store] A mobile app designed for sharing projects with friends, family, and colleagues
[iOS App Store] A mobile app designed for sharing projects with friends, family, and colleagues

ExhibitU This is a mobile app built using React Native and Expo. Designs were made via Adobe Xd. Getting started Download npm from Node.js Install the

📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

react-redux-soundcloud I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world exa

Owner
yuzhou
yuzhou
Starter Antd 4.0 Admin App Mern( Node.js / React / Redux / Ant Design ) Crud & Auth , Dashboard

Starter Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) App built for DigitalOcean MongoDB Hackathon CRM Starter Mern Antd Ad

Salah Eddine Lalami 198 Sep 14, 2022
Use antd in create-react-app without ejecting ✨

Use antd in create-react-app ✨ Create React App + Ant Design. Step by Step Documentation ???? English: https://ant.design/docs/react/use-with-create-r

Ant Design Team 580 Sep 22, 2022
A Demo SPA developed with React, ES6, Webpack (2.x), and Antd (1.0.1) 【move to react-seed】

Target 使用React技术栈开发SPA. Tech Stack UI库:React & React-Dom UI组件:Antd 路由:React-Router & History 框架:Reflux JS:ES6 样式:Less 图标:Antd自带/FontAwesome 动画:Animate

Jason Bai 515 Sep 26, 2022
使用Koa+Antd+React搭建的后台Demo

Koa.Antd.Admin Getting Started $ git clone https://github.com/yukrain/koa-antd-admin $ cd koa-antd-admin $ mkdir log $ npm install

yuk 65 Jul 7, 2022
Server Side Rendering antd with ASP.NET CORE

aspnet-core-react-antd-boilerplate Server Side Rendering antd with ASP.NET CORE Asp.net core JavaScriptServices. read more info from here NOTE: this i

启邦 19 Mar 16, 2022
通用的vite-react后台项目,基于vite-react-typescript-antd-proComponent

Vite-React-Ts-Amin 一个简易的vite-reat后台框架 项目简介 基于 vite-mobx-TypeScript-react 开发的后台管理系统 安装依赖 node v12.14.0 yarn 1.22.10 npm install or yarn 脚本描述 开发启动 npm r

jin 24 Sep 4, 2022
⚡️ Super-fast Vite + React + Antd + Electron boilerplate.

vite-react-electron English | 简体中文 Run Setup # clone the project git clone [email protected]:caoxiemeihao/vite-react-electron.git # enter the project di

草鞋没号 496 Sep 23, 2022
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

nwb nwb is a toolkit for: Quick Development with React, Inferno, Preact or vanilla JavaScript Developing: React Apps Preact Apps Inferno Apps Vanilla

Jonny Buchanan 5.5k Sep 27, 2022
A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Inderpal Singh 20 Oct 24, 2021
Brownie-next-mix - Everything you need to use NextJS with Brownie

Brownie NextJS Mix This mix comes with everything you need to start using NextJS

Rafael Abuawad 9 Jun 20, 2022