Category: reactjs

ReactJS – Introduction ”; Previous Next ReactJS is a free and open-source front-end JavaScript library which is used to develop various interactive user-interfaces. It is a simple, feature rich and component based UI library. When we say component based, we mean that React develops applications by creating various reusable and independent codes. This UI library is, thus, widely used in web development. ReactJS can be used to develop small applications as well as big, complex applications. ReactJS provides minimal and solid feature set to kick-start a web application. React community compliments React library by providing large set of ready-made components to develop web application in a record time. React community also provides advanced concept like state management, routing, etc., on top of the React library. React versions Reactjs library was founded by Jordan Walke, a software engineer at Facebook in 2011. Then the initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is released on October, 2020. The major version introduces breaking changes and the minor version introduces new feature without breaking the existing functionality. Bug fixes are released as and when necessary. React follows the Semantic Versioning (semver) principle. What is the need for ReactJS? Even though there are various libraries that provide a medium to develop user-interfaces, ReactJS still stands tall in terms of popularity. Here”s why − Component Based − ReactJS makes use of multiple components to build an application. These components are independent and have their own logic which makes them reusable throughout the development process. This will drastically reduce the application”s development time. Better and Faster Performance − ReactJS uses Virtual DOM. Virtual DOM compares the previous states of components of an application with the current states and only updates the changes in Real DOM. Whereas, conventional web applications update all components again. This helps ReactJS in creating web applications faster. Extremely Flexible − React allows developers and teams to set their own conventions that they deem are best suited and implement it however they see fit, as there are no strict rules for code conventions in React. Creates dynamic applications easily − Dynamic web applications require less coding while offering more functionality. Thus, ReactJS can create them easily. Develops Mobile Applications as well − Not only web applications, React can also develop mobile applications using React Native. React Native is an open-source UI software framework that is derived from React itself. It uses React Framework to develop applications for Android, macOS, Web, Windows etc. Debugging is Easy − The data flow in React is unidirectional, i.e., while designing an app using React, child components are nested within parent components. As the data flows is in a single direction, it gets easier to debug errors and spot the bugs. Applications Few popular websites powered by React library are listed below − Facebook, popular social media application − React was originally developed at Facebook (or Meta), so its only natural that they use it to run their application. As for their mobile application, it uses React Native to display Android and iOS components, instead of DOM. Facebook”s codebase now includes over 20,000 components and uses the React version that is public. Instagram, popular photo sharing application − Instagram is also completely based on React, as it is powered by Meta as well. The main features to show its usage include Geo-locations, Hashtags, Google Maps APIs etc. Netflix, popular media streaming application − Netflix switched to React in 2015. The factors that mainly influenced this decision are the 1) startup speed to reduce the processing time to render the homepage and enabling dynamic elements in the UI, 2) modularity to allow various features that must coexist with the control experience and 3) runtime performance for efficient UI rendering. Code Academy, popular online training application − Code Academy uses React as the “script is battle-tested, easy to think about, makes SEO easy and is compatible with legacy code and flexible enough for the future”. Reddit, popular content sharing application − Reddit is also developed using React from the scratch. As you see, most popular application in every field is being developed by React Library. Print Page Previous Next Advertisements ”;

ReactJS – Installation ”; Previous Next This chapter explains the installation of React library and its related tools in your machine. Before moving to the installation, let us verify the prerequisite first. React provides CLI tools for the developer to fast forward the creation, development and deployment of the React based web application. React CLI tools depends on the Node.js and must be installed in your system. Hopefully, you have installed Node.js on your machine. We can check it using the below command − node –version You could see the version of Nodejs you might have installed. It is shown as below for me, v14.2.0 If Nodejs is not installed, you can download and install by visiting https://nodejs.org/en/download/. Toolchain To develop lightweight features such as form validation, model dialog, etc., React library can be directly included into the web application through content delivery network (CDN). It is similar to using jQuery library in a web application. For moderate to big application, it is advised to write the application as multiple files and then use bundler such as webpack, parcel, rollup, etc., to compile and bundle the application before deploying the code. React toolchain helps to create, build, run and deploy the React application. React toolchain basically provides a starter project template with all necessary code to bootstrap the application. Some of the popular toolchain to develop React applications are − Create React App − SPA oriented toolchain Next.js − server-side rendering oriented toolchain Gatsby − Static content oriented toolchain Tools required to develop a React application are − The serve, a static server to serve our application during development Babel compiler Create React App CLI Let us learn the basics of the above mentioned tools and how to install those in this chapter. The serve static server The serve is a lightweight web server. It serves static site and single page application. It loads fast and consume minimum memory. It can be used to serve a React application. Let us install the tool using npm package manager in our system. npm install serve -g Let us create a simple static site and serve the application using serve app. Open a command prompt and go to your workspace. cd /go/to/your/workspace Create a new folder, static_site and change directory to newly created folder. mkdir static_site cd static_site Next, create a simple webpage inside the folder using your favorite html editor. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″ /> <title>Static website</title> </head> <body> <div><h1>Hello!</h1></div> </body> </html> Next, run the serve command. serve . We can also serve single file, index.html instead of the whole folder. serve ./index.html Next, open the browser and enter http://localhost:5000 in the address bar and press enter. serve application will serve our webpage as shown below. The serve will serve the application using default port, 5000. If it is not available, it will pick up a random port and specify it. │ Serving! │ │ │ │ – Local: http://localhost:57311 │ │ – On Your Network: http://192.168.56.1:57311 │ │ │ │ This port was picked because 5000 is in use. │ │ │ │ Copied local address to clipboard! Babel compiler Babel is a JavaScript compiler which compiles many variant (es2015, es6, etc.,) of JavaScript into standard JavaScript code supported by all browsers. React uses JSX, an extension of JavaScript to design the user interface code. Babel is used to compile the JSX code into JavaScript code. To install Babel and it”s React companion, run the below command − npm install babel-cli@6 babel-preset-react-app@3 -g … … + [email protected] + [email protected] updated 2 packages in 8.685s Babel helps us to write our application in next generation of advanced JavaScript syntax. Create React App toolchain Create React App is a modern CLI tool to create single page React application. It is the standard tool supported by React community. It handles babel compiler as well. Let us install Create React App in our local system. > npm install -g create-react-app + [email protected] added 6 packages from 4 contributors, removed 37 packages and updated 12 packages in 4.693s Updating the toolchain React Create App toolchain uses the react-scripts package to build and run the application. Once we started working on the application, we can update the react-script to the latest version at any time using npm package manager. npm install react-scripts@latest Advantages of using React toolchain React toolchain provides lot of features out of the box. Some of the advantages of using React toolchain are − Predefined and standard structure of the application. Ready-made project template for different type of application. Development web server is included. Easy way to include third party React components. Default setup to test the application. Print Page Previous Next Advertisements ”;

ReactJS – Nested Components ”; Previous Next A nested component in React is a component that is related to an another component. You can also consider it as a child component inside a parent component; but they are not linked together using the inheritance concept but with the composition concept. Therefore, all the components are nested together in order to create a bigger component rather than a smaller component inheriting from the parent component. The React component is a building block of a React application. A React component is made up of the multiple individual components. React allows multiple components to be combined to create larger components. Also, React components can be nested to any arbitrary level. Nested components will make your code more efficient and structured. However, if the components are not nested or assembled properly, there is chance your code can become more complex resulting in lower efficiency. Let us see how React components can be composed properly in this chapter. FormattedMoney component Let us create a component, FormattedMoney to format the amount to two decimal places before rendering. Step 1 − Open our expense-manager application in your favourite editor. Create a file named FormattedMoney.js in the src/components folder and, Import React library. import React from ”react”; Step 2 − Then create a class, FormattedMoney by extending React.Component. class FormattedMoney extends React.Component { } Next, introduce construction function with argument props as shown below − constructor(props) { super(props); } Create a method format() to format the amount. format(amount) { return parseFloat(amount).toFixed(2) } Create another method render() to emit the formatted amount. render() { return ( <span>{this.format(this.props.value)}</span> ); } Here, we have used the format method by passing value attribute through this.props. Step 3 − Next, specify the component as default export class. export default FormattedMoney; Now, we have successfully created our FormattedMoney React component. import React from ”react”; class FormattedMoney extends React.Component { constructor(props) { super(props) } format(amount) { return parseFloat(amount).toFixed(2) } render() { return ( <span>{this.format(this.props.value)}</span> ); } } export default FormattedMoney; FormattedDate Component Let us create another component, FormattedDate to format and show the date and time of the expense. Step 1 − Open our expense-manager application in your favorite editor. Create a file, FormattedDate.js in the src/components folder and import React library. import React from ”react”; Step 2 − Next, create a class by extending React.Component. class FormattedDate extends React.Component { } Then introduce construction function with argument props as shown below − constructor(props) { super(props); } Step 3 − Next, create a method format() to format the date. format(val) { const months = [“JAN”, “FEB”, “MAR”,”APR”, “MAY”, “JUN”, “JUL”, “AUG”, “SEP”, “OCT”, “NOV”, “DEC”]; let parsed_date = new Date(Date.parse(val)); let formatted_date = parsed_date.getDate() + “-” + months[parsed_date.getMonth()] + “-” + parsed_date.getFullYear() return formatted_date; } Create another method render() to emit the formatted date. render() { return ( <span>{this.format(this.props.value)}</span> ); } Here, we have used the format method by passing value attribute through this.props. Step 4 − Next, specify the component as default export class. export default FormattedDate; Now, we have successfully created our FormattedDate React component. The complete code is as follows − import React from ”react”; class FormattedDate extends React.Component { constructor(props) { super(props) } format(val) { const months = [“JAN”, “FEB”, “MAR”,”APR”, “MAY”, “JUN”, “JUL”, “AUG”, “SEP”, “OCT”, “NOV”, “DEC”]; let parsed_date = new Date(Date.parse(val)); let formatted_date = parsed_date.getDate() + “-” + months[parsed_date.getMonth()] + “-” + parsed_date.getFullYear() return formatted_date; } render() { return ( <span>{this.format(this.props.value)}</span> ); } } export default FormattedDate; Print Page Previous Next Advertisements ”;