{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/react-and-typescript/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"6740337f-7016-56ae-ace5-601b613abded","excerpt":"In this article i will explain you step by step how you can work with typescript in your react application i'm gonna create a todo app to demonstrate the…","html":"<p>In this article i will explain you step by step how you can work with typescript in your react application <strong><em>i'm gonna create a todo app to demonstrate the various props, state, components in react typescript application</em></strong></p>\n<h4>Step 1: Create a react typescript application</h4>\n<p>Use below command to create react typescript application in this command i have specified dot which means i'm going to create project in the same folder in which iam rather than creating a new folder</p>\n<pre><code class=\"language-js\">//create react typescript project in the same folder which you are in\nnpx create-react-app . --template typescript\n\n//create a separate folder with the name my-app and create project inside that\nnpx create-react-app my-app --template typescript\n</code></pre>\n<h4>Step 2: Create ToDoList component and css</h4>\n<ul>\n<li>In our newly created project just clean up the <strong><em>src/App.tsx</em></strong> file and remove any extra code just like below</li>\n</ul>\n<pre><code class=\"language-ts\">import React from \"react\";\n\nconst App: React.FC = () => {\n  return &#x3C;div className=\"App\">&#x3C;/div>;\n};\n\nexport default App;\n</code></pre>\n<ul>\n<li>\n<p>Create a folder <strong><em>src/components</em></strong> inside that folder create a file <strong><em>ToDoList.tsx</em></strong> i'm gonna create a todo list app to demonstarte you how you can work with typescript</p>\n</li>\n<li>\n<p>Inside ToDoList.tsx copy paste the following code</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\n\nimport \"./ToDoList.css\";\n\ninterface TodoListProps {\n  items: { id: string, text: string }[];\n  onDeleteTodo: (id: string) => void;\n}\n\nconst TodoList: React.FC&#x3C;TodoListProps> = (props) => {\n  return (\n    &#x3C;ul>\n      {props.items.map((todo) => (\n        &#x3C;li key={todo.id}>\n          &#x3C;span>{todo.text}&#x3C;/span>\n          &#x3C;button onClick={props.onDeleteTodo.bind(null, todo.id)}>\n            DELETE\n          &#x3C;/button>\n        &#x3C;/li>\n      ))}\n    &#x3C;/ul>\n  );\n};\n\nexport default TodoList;\n</code></pre>\n<ul>\n<li>\n<p>In above code i have defined functional component prop types and passed prop types as generic types to react functional component</p>\n</li>\n<li>\n<p>This is prop type which i have defined which this functional component will recieve which consist of array items and onDeleteTodo function</p>\n</li>\n</ul>\n<pre><code class=\"language-js\">interface TodoListProps {\n  items: { id: string, text: string }[];\n  onDeleteTodo: (id: string) => void;\n}\n</code></pre>\n<ul>\n<li>Create a file ToDoList.css and copy paste the following code</li>\n</ul>\n<pre><code class=\"language-css\">ul {\n  list-style: none;\n  width: 90%;\n  max-width: 40rem;\n  margin: 2rem auto;\n  padding: 0;\n}\n\nli {\n  margin: 1rem 0;\n  padding: 1rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);\n  border-radius: 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n</code></pre>\n<h4>Step 3 Create NewToDo components and css</h4>\n<ul>\n<li>\n<p>Create file <strong>*src/components/NewToDo.tsx</strong> and <strong><em>src/components/NewToDo.css</em></strong></p>\n</li>\n<li>\n<p>Copy paste below code inside NewToDo.tsx file</p>\n</li>\n</ul>\n<pre><code class=\"language-ts\">import React, { useRef } from \"react\";\n\nimport \"./NewToDo.css\";\n\ntype NewTodoProps = {\n  onAddTodo: (todoText: string) => void;\n};\n\nconst NewTodo: React.FC&#x3C;NewTodoProps> = (props) => {\n  const textInputRef = useRef&#x3C;HTMLInputElement>(null);\n\n  const todoSubmitHandler = (event: React.FormEvent) => {\n    event.preventDefault();\n    const enteredText = textInputRef.current!.value;\n    props.onAddTodo(enteredText);\n  };\n\n  return (\n    &#x3C;form onSubmit={todoSubmitHandler}>\n      &#x3C;div className=\"form-control\">\n        &#x3C;label htmlFor=\"todo-text\">Todo Text&#x3C;/label>\n        &#x3C;input type=\"text\" id=\"todo-text\" ref={textInputRef} />\n      &#x3C;/div>\n      &#x3C;button type=\"submit\">ADD TODO&#x3C;/button>\n    &#x3C;/form>\n  );\n};\n\nexport default NewTodo;\n</code></pre>\n<ul>\n<li>\n<p>In above function i have created prop types which will recieve a function onAddToDo</p>\n</li>\n<li>\n<p>Copy paste below css code inside NewToDo.css</p>\n</li>\n</ul>\n<pre><code class=\"language-css\">form {\n  width: 90%;\n  max-width: 40rem;\n  margin: 2rem auto;\n}\n\n.form-control {\n  margin-bottom: 1rem;\n}\n\nlabel,\ninput {\n  display: block;\n  width: 100%;\n}\n\nlabel {\n  font-weight: bold;\n}\n\ninput {\n  font: inherit;\n  border: 1px solid #ccc;\n  padding: 0.25rem;\n}\n\ninput:focus {\n  outline: none;\n  border-color: #50005a;\n}\n\nbutton {\n  background: #50005a;\n  border: 1px solid #50005a;\n  color: white;\n  padding: 0.5rem 1.5rem;\n  cursor: pointer;\n}\n\nbutton:focus {\n  outline: none;\n}\n\nbutton:hover,\nbutton:active {\n  background: #6a0a77;\n  border-color: #6a0a77;\n}\n</code></pre>\n<h4>Step 4 Call the components which we have created above inside App.tsx file</h4>\n<ul>\n<li>Copy paste below code inside your App.tsx file</li>\n</ul>\n<pre><code class=\"language-ts\">import React, { useState } from \"react\";\n// import { Route } from 'react-router-dom';\n\nimport TodoList from \"./components/ToDoList\";\nimport NewTodo from \"./components/NewToDo\";\nimport { Todo } from \"./todo.model\";\n\nconst App: React.FC = () => {\n  const [todos, setTodos] = useState&#x3C;Todo[]>([]);\n\n  const todoAddHandler = (text: string) => {\n    setTodos((prevTodos) => [\n      ...prevTodos,\n      { id: Math.random().toString(), text: text },\n    ]);\n  };\n\n  const todoDeleteHandler = (todoId: string) => {\n    setTodos((prevTodos) => {\n      return prevTodos.filter((todo) => todo.id !== todoId);\n    });\n  };\n\n  return (\n    &#x3C;div className=\"App\">\n      &#x3C;NewTodo onAddTodo={todoAddHandler} />\n      &#x3C;TodoList items={todos} onDeleteTodo={todoDeleteHandler} />\n    &#x3C;/div>\n  );\n};\n\nexport default App;\n</code></pre>\n<ul>\n<li>\n<p>In above code i have declared a state variable with the name todos which gonna store our to do data and which is of type\nToDo which is our model which we have created</p>\n<p>Create model file <strong><em>src/todo.model.ts</em></strong> and copy paste the following code</p>\n<pre><code class=\"language-ts\">export interface Todo {\n  id: string;\n  text: string;\n}\n</code></pre>\n</li>\n<li>\n<p>Then we have created two function with the name todoAddHandler and todoDeleteHandler which gonna called by child component respectively and will recieve argument</p>\n</li>\n<li>\n<p>I have passed these function as props to our child component that is NewToDo and ToDoList</p>\n</li>\n<li>\n<p>In above code you could see how we can define state, pass props and also define prop types</p>\n</li>\n</ul>","fields":{"slug":"/react-and-typescript/"},"frontmatter":{"title":"How to work with typescript and react and define props, state, functional component in react typescript application","date":"February 10, 2023","description":"In this article i will explain you how you can work with typescript and define state, prop types, functional component in react typescript application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/react-typescript.jpeg"}},"previous":{"fields":{"slug":"/python-tutorial-watermark-image/"},"frontmatter":{"title":"Python tutorial creating voice assistant using python","date":"February 02, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/python.jpg"}},"next":{"fields":{"slug":"/react-native-firebase-setup-javascript/"},"frontmatter":{"title":"Email authentication with firebase in react native android application","date":"February 20, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/email-authentication-firebase.jpeg"}}},"pageContext":{"id":"6740337f-7016-56ae-ace5-601b613abded","previousPostId":"bb97d0ee-11b6-5573-bda6-f2a4fc0e4b10","nextPostId":"af9dd2a0-26c0-59de-af5d-062d97ae4d52"}},
    "staticQueryHashes": ["3860684146"]}