Mini Js

Introduction
Instalation
Folders_Structure
Get_started
Your_first_component
Routes
Pass_arguments_to_component_from_another_component
Pass_arguments_to_component_from_router
let's_add_some_styling
Variables
Ressources

Introduction

MiniJs is a frontEnd library

Instalation

    git clone https://github.com/mohammedhrima/MiniJs.git Project_name
    cd Project_name

Folders_Structure

your directory will look something like this:

.
├── Mini
│   ├── lib.js
│   └── validTags.js
│
├── src
│   ├── pages
│   │   ├── App.js
│   │   ├── your_page1.js
│   │   ├── your_page2.js
│   │   └── ... 
│   │
│   ├── main.js
│   └── style.css
│
├── static (output files/ don't bother yourself with them)
│   ├── index.js
│   └── index.css
│
├── .gitignore
├── esbuild.config.js
├── index.html
├── package.json
├── server.js
└── README.md

Get_Started

run:

    npm i

open 2 terminals:

    # first Terminal (here you will get parsing errors)
    npm run transpile

    # seconds Terminal (here you will get serving errors)
    npm run serve

Your_first_component

create new file HelloWorld.js in pages folder

    // ./pages/HelloWorld.js

    // all js files should starts with the following line
    import Mini from "../../Mini/lib";

    function HelloWorld()
    {
        return (<h1>Hello World</h1>);
    }

    export default HelloWorld

Routes

    // main.js
    import Mini from "../Mini/lib";
    import HelloWorld from "./pages/HelloWorld";

    function Main() {
        return (
            <>
                {/* means default path for all routes if not found */}
                <Mini.Routes path="*" element={HelloWorld} />
            </>
        );
    }

    Mini.render(<Main />, document.getElementById("app"));

open http://localhost:5000/

Pass_arguments_to_component_from_another_component

    // ./pages/SayMyName.js
    import Mini from "../../Mini/lib";
    import "./SayMyName.css";
    
    function SayMyName({ name }) {
        return (
            <>
                <h1>Say My name: {name}</h1>
            </>
        );
    }
    export default SayMyName;

    import Mini from "../../Mini/lib";
    import SayMyName from "./SayMyName";

    function HelloWorld() {
        return (
            <>
                <SayMyName name={"Heisenberg"} />
                <h1>You're goddamn right </h1>
            </>
        );
    }
    export default HelloWorld;

check http://localhost:5000/

Pass_arguments_to_component_from_router

    // main.js
    import Mini from "../Mini/lib";
    import HelloWorld from "./pages/HelloWorld";
    import SayMyName from "./pages/SayMyName";

    function Main() {
        return (
            <>
                <Mini.Routes path="*" element={HelloWorld } />
                <Mini.Routes path="/saymyname/:name" element={SayMyName } />
            </>
        );
    }

    Mini.render(<Main />, document.getElementById("app"));

open http://localhost:5000/saymyname/Walter_White

let's_add_some_styling

create file pages/SayMyName.css

    // ./pages/SayMyName.js
    import Mini from "../../Mini/lib";
    import "./SayMyName.css";
    
    function SayMyName({ name }) {
        return (
            <>
                <h1 className="_name" >Say My name: {name}</h1>
            </>
        );
    }
    export default SayMyName;

    /*  ./pages/SayMyName.css  */
    ._name {
        color: red;
        text-align: center;
    }

check http://localhost:5000/saymyname/Walter_White

Variables

similar to useState in react

    // pages/State.js
    import Mini from "../../Mini/lib";
    
    function State() {
      let count = new Mini.Variable(0);
      const handleclique = () => {
        count.value += 1;
      };
    
      return (
            <div>
                  <h1>
                    count: <p>{count}</p>
                  </h1>
                  <button onclick={handleclique}>clique me</button>
            </div>
      );
    }
    
    export default State;

add the following route in main.js

<Mini.Routes path="/state" element={State} />

mohammedhrima / minijs Goto Github PK

minijs's Introduction

Mini Js

Introduction

Instalation

Folders_Structure

Get_Started

Your_first_component

Routes

Pass_arguments_to_component_from_another_component

Pass_arguments_to_component_from_router

let's_add_some_styling

Variables

Ressources

JSX parsing:

Routing:

States:

minijs's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org