Hello everybody!, in this post we're going to create 3 identical apps in 3 JavaScript frameworks. they are [react](https://reactjs.org), [vue](https://vuejs.org/) and [svelte](https://https://svelte.dev/) now, I'm not really a front-end guy (I'm a snake(python)). So since of that. I can judge what's the learning curve of the 3 and how useful the frameworks are. We're going to create a minimalistic To-Do app with these frameworks. so let's get started. ## React now up first is React. this framework is developed and maintained by meta(Facebook) and is open-source. React is a **component-based** **declarative** framework used to create UIs react can be used as a base in the development of, - Single Page Applications (spa) - mobile - Server Rendered Applications (with the help of [Next.js](https://nextjs.org/)) let's first start by installing `create-react-app` ```bash $ npm install create-react-app ``` I'm using `create-react-app` to scaffold the app itself. after that we're going to run ```bash $ npx create-react-app todo-app $ cd todo-app ``` then, I started to code the app. well, firstly I deleted some unwanted files. then I proceeded to code the Todo app. ![_3 hours later(it took this long for all 3)_](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cn823r4flm3rham7u58.png) now, I finally finished the app and here what it looks like ![the picture of the finalized version of the React Todo App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56h1h4et3a4uesxxjly5.png) A basic run down on some code - now I divided the whole thing to 3 components - App Component :- which is the main component where everything is displayed) - Todo Component :- this is the component which has the code for a single todo item - TodoList Component :- this is where the Todo components are rendered. here is what the `Todo` Component looks like, ```jsx class Todo extends React.Component { constructor(props) { super(props); let state = { show: true }; this.state = state; }; remove = () => { this.setState({ show: false }); }; render() { let component =

{this.props.name}

return ( <> {this.state.show ? component : null} ); }; }; ``` ### Final Thoughts on react. what are my thoughts on react. well, React is really great, it's easy to grasp and you can use as little or much as you want. it's docs are really great, and `create-react-app` really helped me too save some time. ok now let's move on to the next framework. ## Vue Vue is our next framework to tackle. now vue over here is a progressive framework used to create Web UIs (yes, just like React.) vue/vue's ecosystem can cover all the needs of the Front-end development. vue can be used in different ways; - Enhancing static HTML without a build step - Embedding as Web Components on any page - Single-Page Application (SPA) and many more..... now let's start coding this thing. now let's first of by running this command ```bash $ npm init vue@latest ``` now this will ask some questions then builds the template project for you to develop on. ```js ✔ Project name: … ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … **No** / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./... Done. ``` > it's better to put no for things you don't know. After setting that up I hit up the docs and went to work on this. and after reading the docs I got gist of how vue works. so what vue basically does it binds data with the views(vue is literally French for vue) so View <- Binds Data -> View-Model <- Provides Data View in a example, View ```jsx

``` View-Model ```js new Vue({ el: "#app", data: data }) ``` Model ```js const data = { message: "Hello World" } ``` ![_Few Minutes Later...._](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz92fb967zt7m8divleh.png) I finished coding the Todo App and here what it looks like, ![Vue Todo App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2mzxx57zqkod8ogr5bt.png) here is peek at the `app.vue` ```jsx ``` ### Final Thoughts on Vue what have I got to say about vue..... well, vue is actually really great. it's learning curve is good and it's system of making components and states is great. and it's reactivity system is actually very efficient. that's about it. let's move on to the final competitor. ## Svelte our final competitor, in the orange corner is Svelte. Svelte is a bit different then the rest since it doesn't use a Virutal DOM (Document Object Model). it compiles the app when you build it. while other frameworks do it in the browser. let me just hit the docs and get started. ok, I'm finished hitting the docs. svelte's components are stored in `.svelte` files, it's just html + extra-something. ![Sugar, Spice and Everything Nice...](https://media.tenor.com/t7CHDLN0yHEAAAAC/sugar-spice-everything-nice-powerpuff-girls.gif) Now I will start coding this thingamabob. ![_One Eternity Later...._](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dfzd5nra9tz7izjksh6.png) and I finally finished it..... ![Svelte Todo App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1gmcrx4zpgtkf2f5m6l.png) here is the Todo-App created in Svelte (also my css got really better now.) here is a little sneak-peek at the TodoApp Component ```jsx // ./lib/TodoApp.svelte {#each todos as todo}

{todo.text}

{/each} e.keyCode === 13 && addTodo(e.target.value)}> ``` And that's basically it. We have created a basic Todo App in 3 different Front-end Frameworks. Feel Free to checkout the Codes Github Repo -> [*](https://github.com/Sas2k/Todo-App-in-3-Frameworks) Until Next time. Bye!

sas2k

Creating a frontend app in 3 frameworks

Join Our Newsletter. No Spam, Only the good stuff.