React is a component-based UI toolkit that is lean and focused. Certain functionality (for example, routing) are added through community packages. It is an open source javascript library i.e. collection of scripts to make developers life easier and accomplish tasks such as creating Front End Applications/User Interfaces. It runs on the client's computer while aiding us in writing the JavaScript code for the client-side and the goal is to create modern reactive user interfaces.
Everything is build as a component in react. The benefit of using component is that of its reusability as we don't have to write the same code over and over again. Instead of created separate HTML, CSS, Javascript files, everything can be written inside a Javascript file and rendered as a component if needed. Within a component, we write the logic of it and use (customize) it accordingly. As data changes in our application or server, the component changes accordingly. For example, if the price of a specific product changes, we don't have to change its price everywhere within the application. It is because component updates the data automatically. Hence, React is so popular amongst developers nowadays.
React allows for a seamless transition of the website from one page to the next. We don't have to wait for new pages to load or for activities to begin, so everything happens instantaneously. Historically, on websites, when we clicked a link or a button, our request was delivered to a server and the browser was redirected to a new HTML page where it could then be displayed. As a result, in the past, websites may have felt a little clumsy, we may experience a period of latency in which we must wait to allow this new HTML page to load, and so forth. And it is this request-response cycle which we can deconstruct using JavaScript. JavaScript is a programming language. As a result, as a developer, we can run logic in the browser. And the best part about that logic in the browser is that it has the ability to modify what the user sees. JavaScript in the browser has the ability to manipulate DOM which are structured/nested HTML elements displayed on the screen. We can change the DOM using JavaScript. As a result, we can alter what the users view without requesting a new HTML page.
Because React is a view-only library, it can be effortlessly integrated with any other library or framework (it is the view part of the Model View Controler MVC architectural UI pattern). The ability to utilize any other framework and library allows for experimentation and hence innovation.
React provides a straightforward API, so there is no steep learning curve. There are just a few techniques to learn. The code for creating UI 'components' (i.e., buttons, etc.) is straightforward since there is very little boilerplate code, making the library very accessible.
React can be used to manipulate portions of HTML or full pages. This is known as the "Widget" strategy, in which some pages are still rendered on and supplied by a backend server while react handles the rest of the page.
React may also be used to control the whole frontend of a web application known as a 'Single-Page-Application' (SPA). In this method, the server just provides one HTML page, after which React takes over and controls the UI.
Reminder Focus more on building a working application rather than tools and features. We will learn them as we go along. It is a process and it will take time.
- Components and UI
- Events and Data such as 'props' & 'state'
- Styling React Components & Apps
- React Hooks
Packages/Libraries
- React
Automation Tools
- Gulp
Bundlers compiles all of our html, css, and javascript files.
- Webpack
Loaders
- babel
Basic React Commands:
To run the react-app:
npm run start