Uix-create-react-app NPM

Uix Create React App

Demo

https://xizon.github.io/uix-create-react-app/examples/

Description
Installation And Test
File Structures
Contributing
Changelog
Licensing

Description

A set of React tool and scaffold.

Access your application without a server.

Installation And Test

You will need to have node setup on your machine. That will output the built distributables to ./dist/* and ./examples/*.html.

Step 1. Use NPM (Locate your current directory of project, and enter the following command.) or download the latest version from Github. For nodejs you have to install some dependencies.

$ sudo npm install uix-create-react-app

Or clone the repo to get all source files including build scripts:

$ git clone git://github.com/xizon/uix-create-react-app.git

Step 2. First, using an absolute path into your "uix-create-react-app/" folder directory.

$ cd /{your_directory}/uix-create-react-app

Step 3. Before doing all dev stuff make sure you have Node 14+ installed. After that, run the following code in the main directory to install the node module dependencies.

$ sudo npm install

Step 4. Commonly used commands:

Debug application. It can be checked separately as TypeScript without compiling and packaging behavior.

$ npm run check

To use webpack to bundle files. The converted ES5 files will be created.

$ npm run build

Using Ctrl + C to stop it.

Step 5. When you done, this will spin up a server that can be accessed at

http://localhost:8080/examples/

Step 6 (Optional). Run the following command to test(No packaging behavior), and used for TypeScript file inspection and debugging:

$ npm run dev

Step 7 (Optional). Unit Testing

$ npm run test

⚙️ Note:

a) ERROR: npm update check failed.

Solution:

$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

b) ERROR: Node sass version 6.x.x is not compatible with ^ 4.x.x.

Solution:

$ npm install node-sass@4.14.1

c) If you upgrade the version of Node, please execute the following code:

$ sudo npm install
$ sudo npm rebuild node-sass

d) Some compilation errors of TypeScript:

Install TypeScript and ts-node globally on your machine

$ sudo npm install -g typescript ts-node

⚙️ Site Info Configurations:

You can update the Placeholders in Templates by modifying the Site Info configuration of package.json. Like this:

{
  "author": "UIUX Lab",
  "name": "uix-create-react-app",
  "email": "uiuxlab@gmail.com",
  "version": "1.0.0",
  "projectName": "Uix Create React App",
  "createdInfo": "UIUX Lab (https://uiux.cc)",
  "projectURL": "https://uiux.cc",
  "description": "A set of React tool and scaffold.",
  ...
}

⚙️ Custom import third-party library:

The application loads some third-party libraries (icons, animations, 3D engines, etc.) by default, you can load them as needed, or modify the configuration file. Access to src/client/components/_plugins/

File Structures

uix-create-react-app/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── webpack.config.js
├── package-lock.json
├── package.json
├── dist/
│   ├── css/
│   │   ├── app.css
│   │   ├── app.css.map
│   │   ├── app.min.css
│   │   └── app.min.css.map
│   └── js/
│   │   ├── app.js
│   │   ├── app.js.map
│   │   ├── app.min.js
│   │   └── app.min.js.map
├── src/
│   ├── index.js
│   ├── router/
│   ├── components/   #Independent React components
│   ├── views/
│   │   ├── _pages/
│   │   └── _html/
├── examples/
└──

Contributing

Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our contribution guidelines. Thanks!