[Music] Welcome to Introduction to Front-End Frameworks
and React. After watching this video, you will be able to: Define React. Explain how React makes it easier to develop JavaScript applications. Describe how to create a React component and run a simple React application. Front-end frameworks are used to create a dynamic client that can connect to the server. These frameworks are made available through open-source libraries which can be used as a part of the hypertext markup language (HTML), JavaScript, and cascading style sheets (CSS) in the browser. AngularJS, Vue.js, and React are some of the most-used front-end frameworks. AngularJS is an open-source framework from Google that can be used in any HTML by including the library. It is based on HTML and JavaScript, and it is easy to implement. To make HTML dynamic, AngularJS uses directives. All the directives are available to the HTML where the library is included. Here, you see HTML using AngularJS with model-bind directives. The input component is used as a model to which the label component is bound. Vue.js is also an open-source front-end framework. It uses a virtual document object model (DOM). The HTML is considered as an entire object. As it is very lightweight, it renders fast. Here, you see a simple Vue.js page which is rendered as HTML. The attributes of the Vue.js object are similar to those of AngularJS, and binding is available. React is a framework for building client-side dynamic web applications. React uses dynamic data binding and a virtual DOM to extend HTML syntax and to eliminate the need for code that keeps the user interface (UI) elements synchronized with the application state. This image shows HTML as a DOM. This includes the document, which is the entire HTML page, root element HTML, and a body element. Inside the body we have h1 with a text element inside, p with a text element inside, and a form element with two input elements. The document will be rendered as a page. In React, some of these elements will be rendered as a React component. React uses a special markup language called JavaScript XML (JSX) which resembles HTML. JSX can be compiled and interpreted as JavaScript by Babel, a special in-memory tool. JSX is embedded inside special script tags where the type attribute specifies the content that requires Babel. Three important packages that you use to build React applications are React package, ReactDOM package, and Babel package. The React package holds the React source for components and their states and properties. The ReactDOM package is the glue between React and the DOM. And Babel is the module which is available in most modern browsers. It is used to compile and interpret the JSX. A normal HTML page can be changed to render a React component. Most modern browsers support Babel scripts. You must include react.production.min.js, react-dom.production.min.js, and babel.min.js in the HTML. Then the browser will handle the rest. The React component is defined inside a script tag which is of type text/babel. Here, the defined component is MyComp, which inherits from React.Component. You may recall inheritance from what you have learned about classes. All React components must implement the render() method. You can then render the component using the ReactDOM.render method specifying the component name like a HTML tag and any attribute that you want to set, in this case the name attribute. Then specify where in the HTML the component should be rendered. In this example, it is rendered in comp1. When you open the HTML, you will see the page with the HTML component. Facebook has provided a utility called Create React App, which simplifies the process of creating React applications. If you have Node.js installed, you should be able to run npx create-react-app with the name of the application you want to create. Here, the name of the application is todoapp. When you run the npx create-react-app command, a directory structure with all the necessary files is created. The directory structure contains all the resources required to create and run a React application. The main folder in which you will make changes is the src folder. The src folder contains App.js and index.js. App.js contains App, which is the root React component that you will add into your HTML page, and index.js is where you will add App to the HTML. To run the React application, you go into the application directory and run npm start, which starts the server, mostly on port 3000. When you connect to the application from the browser, you can see the React component. The page that you see is the default React application that has been created. You can make changes and add more nested components to make it a full-fledged React front-end application. In this video you learned that: React is an efficient, flexible JavaScript library for building user interfaces. React uses a special markup language called JSX. A React application is a tree of components and an extension of the HTML DOM and with Create React App, you can easily create a React application.
