MagicScript Component Framework
- Install
magic-script-cli
:
npm install -g magic-script-cli
- Create a new MagicScript application:
magic-script init
- Follow the steps.
- Choose "Components" when application type is requested.
- Install the required
npm
packages from the app folder:
npm install
- Build and install your application:
magic-script build -i
- Refer to the MagicScript Getting Started guide for more information.
Replace app.js
content with this code for a more interactive use case:
import React from "react";
import { View, Text, Button } from "magic-script-components";
export default class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = { counter: props.counter };
this.onButtonClick = this.onButtonClick.bind(this);
}
onButtonClick(event) {
this.setState(state => ({ counter: state.counter + 1 }));
}
render() {
return (
<View name="main-view">
<Text
textSize={0.1}
textColor={[0.1, 1, 0.1, 0.84]}
localPosition={[0, 0.25, 0]}
>
{this.state.counter}
</Text>
<Button
width={0.25}
height={0.15}
roundness={0.5}
onClick={this.onButtonClick}
>
+
</Button>
</View>
);
}
}
- Get documentation source code and install dependencies
git clone https://github.com/magic-script/magic-script-components.git
cd magic-script-components
cd website
yarn
- Make your changes and test them locally
yarn start
- Save your changes
git commit
-
Set system variable GIT_USER with you GitHub user name in e.g.
.bash_profile
or consoleexport GIT_USER=<GitHub user name>
-
Deploy on public website
yarn deploy
- All documentation is in markdown format in
docs
directory. Just add your new markdown files there. - Refer to Docusaurus 2 docs for more advanced content management topics.
This project is licensed under the Apache License, Version 2.0 - see the LICENSE file for details