English | 简体中文

A universal framework based on React.js

Features

• 🐒 Engineering：Out of the box support for ES6+、TypeScript、Less、Sass、 CSS Modules，etc
• 🦊 Routing：Powerful Routing System, supports configured routing and conventions routing
• 🐯 State management：Built-in icestore, lightweight state management solution based on React Hooks
• 🐦 Config：Modes and Environment Variables configuration in the config file
• 🐶 Logger：Built-in logger solution, it's a flexible abstraction over using console.log as well
• 🐱 Helpers：Built-in helpers, provide some useful utility functions
• 🦁 Application configuration：Provide powerful and extensible application configuration
• 🐴 Hooks：Provide Hooks APIs such as useModel and useHistory, etc
• 🐌 Plugin system：The plugin system provides rich features and allow the community to build reusable solutions
• 🐘 TypeScript：Support TypeScript
• 🐂 Modern：Support SPA、SSR、MPA and Micro-frontend

Quick start

Setup

We recommend creating a new icejs app using create-ice, which sets up everything automatically for you. To create a project, run:

$ npm init ice <project-name>

npm init <initializer> is available in npm 6+

Start local server to launch project:

$ cd <project-name>
$ npm install
$ npm run start # running on http://localhost:3333.

It's as simple as that!

Manual Setup

icejs is really easy to get started with. Install icejs, react and react-dom in your project:

$ mkdir <project-name> && cd <project-name>
$ npm install ice.js react react-dom

Open package.json and add the following scripts:

{
  "name": "project-name",
  "scripts": {
    "start": "icejs start",
    "build": "icejs build"
  },
  "dependencies": {
    "ice.js": "^1.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

Create the pages directory, then create the first page in pages/index.jsx:

import React from 'react'

const HomePage = () => {
  return <div>Welcome to icejs!</div>
}

export default HomePage

Configure an application information in the src/app.js file, but it is optional:

import { createApp } from 'ice'

const appConfig = {
  router: {
    type: 'browser',
  },

  // more...
}

createApp(appConfig)

Finally, To start developing your application run npm run start. The application is now running on http://localhost:3333.

Examples

• hello-world
• basic-spa
• basic-store
• basic-mpa
• basic-request
• icestark-child
• icestark-layout
• with-fusion-design

Contributing

# 1. clone and setup
$ git clone git@github.com:ice-lab/icejs.git
$ cd icejs && npm run setup

# 2. watch packages
$ npm run watch

# 3. run example
$ cd examples/spa-basic
$ npm link ../../packages/icejs
$ npm start

Please see our CONTRIBUTING.md

Ecosystem

Project	Version	Docs	Description
icejs		docs	A universal framework based on react.js
iceworks		docs	One-stop visual source code development workbench based on materials
icestark		docs	Micro Frontends solution for large application
icestore		docs	Lightweight state management solution based on React Hooks

Community

DingTalk community	GitHub issues	Gitter
	issues	gitter

License

MIT