package.json: our configuration file which contains our app's metadata and dependencies.node_modules: the directory where our external libraries and dependencies are stored.Within our directory, we have a few directories and files: If you head over to ( in your browser, you should see your first React application! Great! Now, let's cd into to-do-app and run npm start to start a development server. The following command will generate and configure all of the files, folders, and libraries we need: npx create-react-app to-do-app To bootstrap a new react project, we can use create-react-app to make our lives easier. You can install these packages for macOS, Windows, or Linux here. To get started, you'll need to make sure you have Node >= 8.10 and npm >= 5.6 on your machine. If you do that tutorial first, you'll understand the differences of React in terms of development experience and efficiency. There's also a to-do app tutorial in HTML/CSS/JS that can be found here. Feel free to do some beginner Web Development tutorials beforehand. 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. React is a JavaScript library for creating user interfaces.
0 kommentar(er)
