React just makes everything easier - and you'll see what I mean very soon! Build a To-do List App Dependenciesīefore you do this tutorial, it is reccomended that you have a solid understanding of HTML, CSS, and JS. Essentially, React.js is another layer of abstraction that removes attribute manipulation (ex: document.getElementById(), event handling (ex: element.addEventListener()), and manual DOM updating that is required if we were only using vanilla JavaScript. Therefore, you're able to tell React what state you want the user interface to be in, and it will update the "real" DOM to make sure it matches that state. It is a representation of a user interface that is kept in memory and synced (or reacts!) with the “real” DOM. React works by creating a "virtual" version of the elements on the page (also known as the virtual DOM). Not only is the development process easier (and more efficient), React is easily maintainable as everything is broken down into individual components that are extensible and easy to read.
Instead of manually injecting HTML at different nodes in JavaScript (ex: by targeting an HTML element by using document.getElementById), React and other JavaScript frameworks allow us to build HTML elements using bits of state or chunks of data.
It's basically the data structure of a webpage in the form of a tree. DOM stands for Document Object Model, which is the programming interface for HTML elements on webpages. React is ideal when you are building an application that uses a lot of state (data) or involves a lot of DOM manipulation. We'll get a glimpse of the power of React.js through building a simple to-do app. With React.js, it's super easy to build and maintain complex applications. It is open-source and maintained by Facebook. I think my issue stems from the fact that my initial state was not set up in a way that would make updating state in an individual array element simple to do / the fact that I'm trying to update state of one dynamically created element in an array which is hard for me to conceptualize right now :(ĬODEPEN: class App extends React.Component Ĭonst rootElement = document.React is a JavaScript library for creating user interfaces. I will provide the codepen url - any help would be greatly appreciated! Everything else works fine and this was kind of a stretch goal as I am new to JS/React/coding in general. I have tried a few different ways of completing this task but just started using react last week and cannot get my handleCheck() function to create a line through completed items. I am having trouble creating a line through completed items on my Todo list app
0 kommentar(er)
