Ana içeriğe geç

Tanıtım

UYARI

Bu kütüphane hâlâ yapım aşamasında. Herhangi bir haber verilmeden, her şey her an değişebilir!


AniiJS Nedir? Ve Neden Kullanmalıyım?

AniiJS kullanıcı arayüzü yapmak için oluşturulan bir JavaScript kütüphanesidir. Ayrıca bildirimsel ve bileşen bazlı programlama modeli ile size zaman kazandırır.
AniiJS, ReactJS ile benzer bir syntax yapısına sahiptir; böylece eğer bir ReactJS geliştiricisi iseniz basit ve hızlıca AniiJS'e alışabilirsiniz.

Eğer HTML & CSS & JavaScript detaylarına girmeden kendinize kullanıcı arayüzü yapmak istiyorsanız kesinlikle AniiJS'i kullanmalısınız.
Ayrıca AniiJS öğrenmek, front-end geliştiriciliğin temellerini kavramak ve JavaScript yazılım dili ile yakınlaşmak için iyi bir yöntemdir.

Basit Bir Örnek

bookmark.js
import {useToggle, createElement as create} from "anii";
export default function Bookmark() {
const [bookmark, setBookmark] = useToggle(false);
if (bookmark) {
return create("p", null, "Already bookmarked!");
}
return create(
"button",
{
onClick: () => setBookmark(true),
},
"Bookmark!"
);
}

Basit Örneğin Sonucu


Üstteki örnek basit bir AniiJS örneğidir. Burada "İşaretle" butonuna basıldığında değişen örneğin sonucunu görebilirsiniz.

JSX&Hook'ların Örneği

todo.js
import {useState, useRef} from "anii";

export default function Todo() {
const todoInput = useRef();
const [todos, setTodos] = useState([]);

const addTodo = (todo) => {
if (todo.replaceAll(" ", "") == "") return;
setTodos([...todos, todo]);
};

return (
<div>
<h1>Todo List</h1>
<input type="text" ref={todoInput} placeholder="Todo" />
<button onClick={() => addTodo(todoInput.current.value)}>Add</button>
<ul style={{padding: "5px 0px 0px 0px", textAlign: "center", listStyle: "none"}}>
{todos.map((todo) => (
<li>{todo}</li>
))}
</ul>
</div>
);
}

JSX&Hook'lar Örneğinin Sonucu


Üstteki örnek basit bir yapılacaklar listesi örneği. Girdi kutusuna bir şeyler yazıp "Add" butonuna tıklayarak yapılacaklar listesine yeni bir şey ekleyebilirsiniz.

Yukarıdaki örneklerden bir şey anlamadım!??!!!

Üstteki kod hakkında sorularınız olabilir. Endişelenmeyin, sonraki bölümlerde her ince detayını açıklayacağız.