Git Product home page Git Product logo

ice's Introduction

English | 简体中文

Downloads Version GitHub license PRs Welcome Gitter

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 by Iceworks

We recommend creating a new icejs app using Iceworks:

demo

See Quick start by Iceworks for more details.

Setup by CLI

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 ice.js, 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 { runApp } from 'ice'

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

  // more...
}

runApp(appConfig)

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

Examples

Contributing

Please see our CONTRIBUTING.md

Ecosystem

Project Version Docs Description
icejs icejs-status docs A universal framework based on react.js
icestark icestark-status docs Micro Frontends solution for large application
icestore icestore-status docs Simple and friendly state for React
iceworks iceworks-status docs Visual Intelligent Development Assistant
formily formily-status docs Performant, flexible and extensible form solution
ahooks ahooks-status docs React Hooks Library

Community

DingTalk community GitHub issues Gitter
issues gitter

License

MIT

ice's People

Contributors

solojiang avatar clarkxia avatar luhc228 avatar imsobear avatar chriscindy avatar fyangstudio avatar lancezhu avatar maoxiaoke avatar alvinhui avatar sspku-yqliu avatar purple-force avatar mr-zhaorui avatar zhaofinger avatar jiangqizheng avatar zhmushan avatar datou0412 avatar mygitzone avatar dadalong avatar trumandu avatar liuyan0535 avatar youluna avatar ldsink avatar yurisa avatar olvvlo avatar fuzzyfade avatar qiaoyuwen avatar farrrr avatar xyeric avatar ash-sc avatar 0xflotus 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.