چارچوب های سمت کلاینت جاوا اسکریپت: راهنمای جامع

npx create-react-app my-app
cd my-app
npm start

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div className="App">
      <h1>Todo Listh1>
    div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

function TodoItem({ todo }) {
  return <li>{todo.text}li>;
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}
    ul>
  );
}

function App() {
  const [todos, setTodos] = React.useState([]);

  function addTodo() {
    setTodos([...todos, { id: Date.now(), text: 'New Todo' }]);
  }

  return (
    <div>
      <button onClick={addTodo}>Add Todobutton>
      <TodoList todos={todos} />
    div>
  );
}

function TodoItem({ todo, onEdit }) {
  return (
    <li>
      {todo.text} <button onClick={() => onEdit(todo)}>Editbutton>
    li>
  );
}

function TodoList({ todos, onEdit }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} onEdit={onEdit} />
      ))}
    ul>
  );
}

function App() {
  return (
    <div>
      <h1 aria-live="polite">Todo Listh1>
      {/* Rest of the components */}
    div>
  );
}

npm install -g ember-cli
ember new my-app
cd my-app
ember serve

// app/components/todo-list.js
import Component from '@glimmer/component';

export default class TodoListComponent extends Component {
}

// app/components/todo-list.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class TodoListComponent extends Component {
  @tracked todos = [];

  addTodo() {
    this.todos = [...this.todos, { id: Date.now(), text: 'New Todo' }];
  }
}

{{#if this.todos.length}}
  
    {{#each this.todos as |todo|}}
      
{{todo.text}}
    {{/each}}
  
{{else}}
  No todos yet!
{{/if}}

// app/router.js
Router.map(function() {
  this.route('todos');
});

npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve

<template>
  

    Todo List
  
template>

<script>
export default {
  name: 'App',
}
script>

<template>
  
    
 v-for="todo in todos" :key="todo.id">{{ todo.text }}
  
template>

<script>
export default {
  data() {
    return {
      todos: []
    }
  }
}
script>

<template>
  
template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: Date.now(), text: this.newTodo });
      this.newTodo = '';
    }
  }
}
script>

<template>
  
 class="todo-list">
    
  
template>

<style>
.todo-list {
  font-family: Arial, sans-serif;
}
style>

<script>
export default {
  data() {
    return {
      todos: []
    }
  },
  computed: {
    todoCount() {
      return this.todos.length;
    }
  }
}
script>

npx degit sveltejs/template my-app
cd my-app
npm install
npm run dev

		

			

										

							
							 هم‌رسانی
						
						
				
					 فیس بوک
				
				
					 توییتر (X)
				
				
					 لینکدین
				
				
					 ‫تامبلر
				
				
					 ‫پین‌ترست
				
				
					 ‫رددیت
				
				
					 ‫VKontakte
				
				
					 ‫Odnoklassniki
				
				
					 پاکت
				
				
					 رایانامه
				
				
					 چاپ