Search

Installation of React on Mac

Hello learners! In this tutorial we are going to learn the installation of React.js library on macOS. React.js is a library which helps developers to develop highly efficient data-driven SPA apps. It is based on functional programming, relies on the concept of immutability and encourages component-based architecture based on Single reusability principle.Before we perform the installation steps, we need to look at the prerequisites needed for installation.1. PrerequisiteSystem requirements: mac OS > 10.10Minimum RAM: 4 GBStorage space: 10 GB available spaceInternet browser: Chrome, Safari, Opera, Microsoft EdgeInternet connectivity: 512 kbps and above2. Introduction to ReactIn this tutorial, we will install the react library on macOS. Before the installation, we need to have a quick understanding of React.React is a library which helps web developers and architects to serve the needs of customers having demands of high data flow and fast responsive UIs in the context of data.It is based on the components-based architecture. The webpage can be represented in the form of Parent and Child based components.  It relies heavily on Virtual DOM, which acts as a performance optimization to DOM operations.A Web page which is composed of HTML has a DOM tree, with the help of which the web page is rendered by the browser.When the user is interacting on a page, it involves addition and insertion of information based on the user activity.  for e.g. A user has added an item to the cart. The cart is showing the updated item to reflect the user’s decision.Behind the scene, the HTML document undergoes a certain transform which helps to share the updated page. As we have mentioned, the HTML document is represented by the DOM tree. In the above scenario, the DOM needs some changes which involve addition and deletion of certain HTML nodes. This helps to show the relevant information which represents what a user is trying to achieve in the context of updating his buying choice.For this insertion and deletion operation on HTML DOM, there is a memory cost involved.Virtual DOM acts as a performance optimizer as far as the DOM update operations are concerned.  It maintains two copies; one is the real copy of the DOM (react DOM) and another one is the change to be done. The process by which minimal change takes place on the react DOM is also studied under the process called reconciliation.To understand the DOM we can visualise it as a tree.  The tree has roots and branches. In a similar manner the DOM has the HTML element at the top and down below there are nodes which are connected to the parent node. In terms of tree analogy, we can represent the parent node as the trunk, with various nodes connected to the trunk. And on these nodes, the insertion and deletion operations get optimized by using React.3. A short intro to Node.js & npmRyan Dahl is the inventor of Node.js.Node.js code is an open source, cross-platform, JavaScript runtime environment that runs JavaScript code. It is based on the Chrome V8 engine. Chrome V8 engine is written in C++. It runs on Windows, macOS and Linux.After installation of Node.js, we can run the react based project locally on our system during development. This also allows us to deploy our app on the production server.Some of the features of Node.js include:a. Uses JavaScript as primary languageb. Non-blocking I/Oc. Supports Asynchronous programmingd. Can handle multiple connections requests by using a single serverNode.js allows us to perform read, write operations on the server. It also provides the functionality to work with the databases.Npmjs.org is an online code repository of thousand modules (npm) and it allows us to install node modules using basic commands. Some modules are independent and some are interrelated to run effectively, due to dependencies between them.Node.js hosts several modules and instead of building functionality from scratch, it is easier for us to look for a module and reuse and extend its functionality. Developer projects generally have time and budget constraints. For the developer community, npmjs.org acts as a lifesaver as far as the Node.js based development is concerned.4. Download Node.js and installationTo install Node.js there are various steps.  It can be installed by visiting here.Once we have downloaded the Node.js version based on the operating system, we can perform the installation steps.One thing we need to note is that NPM is auto-installed with Node.js installation.We need to click on the package file which we have downloaded node-v14.15.1.pkgIn the below installation we can see it will install Node.js  v14.15.1 and npm v6.14.8When we click on the Continue button, the installer will ask to ‘Read Licence’.  It also shows two-buttons-- Disagree and Agree.To install the Node.js we need to click on Agree.To proceed further we need to specify the Login password to continue the installation.In the below screenshot the user has administrative rights for software installation. So, the admin needs to type the password in order to proceed further.After clicking on the Install Software button, click on the Install button.In the next screen, the progress bar will indicate the installation progress.Post-installation, it will provide us with a summary as below.After closing this window by clicking on the close button, we need to verify whether we have installed the said version of Node.jsTo open command terminal, press Command + Space barThis will open Spotlight search as below.We need to type Terminal and hit enter.Once the terminal is visible, we need to type the following commandnode - vAs we can see it is showing us the node version (v14.15.1) as in the screenshot.So, we have installed Node version 14. Each build is denoted by semantic versioning. The first digit, in this case, is 14, which represents a major release. The second digit represents new features with the release and the third digit represents patch and bug fixes as associated with the major release.Node.js installation by command line.As an alternative method, we can install node.js by the terminal as well. But as a prerequisite, we need to have homebrew in MacOS.We are assuming, we have homebrew installed in our system.And to proceed with the command-line installation, we need to open the terminal and type the following command.brew - vThe above command will inform us about the homebrew version.To update the brew, type the following commandbrew updateAfter the above command has been executed, we need to typebrew install nodeThe installation will take some time, so give some time to the system and be patient.To verify the Node.js installation usenode -vTo verify the npm installation usenpm -vCongratulations, we have installed Node.js and NPM.5. Create-react-app for react app on macOSNow, we are going to install create-react-app on macOS.Create-react-app is a quick way to set up a single page application code with minimal steps and no configuration.Let’s proceed with the installation steps.Please type the following command in the terminal to create a folder with the name react-app. mkdir react-appThen navigate to directory react-app as follows:cd react-appTo verify directory, type command and enter as belowpwdOnce we have confirmed that we are in the right directory type below command.npx create-react-app my-appnpx is a module which is included with npm.The installation steps as shown in the above screenshot will take some time.So, sit back and relax.Once the above command has been executed successfully....….navigate to my-app directorycd  my-appAnd typenpm startWhen the command is executed successfully, it will open the browser at localhost:3000 in the browser.And we can give ourselves a pat on back for the small win!6. Download and Install React (Explicit command)This step is for awareness only.In the previous step, we have not explicitly installed React.js as this is installed with the help of create-react-app package.We can also install the React.js  by using the following command.  And we may need to install the module dependencies on our own.npm install react --save7. File folder and structureWe can see that we have not touched the codebase but found the minimal single page web application running on our macOS.To see the code structure, we need to open the code editor e.g. Sublime, Atom etc.And open the folder my-appAs we can see, there are various folders and at a high level there are below folders:node_modules public srcIn the public folder, we can see index.html. This is the page template.The index.js in src folder is the JavaScript entry point.The app is displaying the code from the App.js in the src folder.In the my-app folder, the package.json is an important file which mentions the app name and module dependencies. Feel free to explore further.8. SummaryIn this tutorial, we have learnt about React.js, and the component-based architecture model in React.js. We also had a high-level overview of the virtual DOM.We touched on the concept of reconciliation, the usage of Node.js in the world of JavaScript and its capability to handle non-blocking I/O output to fulfil client connection requests simultaneously.We have checked two methods for Node.js installation, namely with the package manager and another one by using the command line.To install React.js, we have relied on the create-react-app module for a quick start. We can also install the React.js by command line. To prevent being overwhelmed with too many details we have picked the create-react-app method for this tutorial. We created our first react app and saw it running.To become familiar with the code in terms of development perspective, we quickly checked the important files which are running the app.
Installation of React on Mac
Gaurav
Gaurav

Gaurav Mishra

Author

Gaurav Mishra is an expert in user-interface development and user-experience design, with more than 13+ years of experience. Comfortable to work with any kind of technology, he has growth mindset and keep a beginner mind. He has provided workshops and training in UI development, UX design, and Drupal. He has mentored and trained various students around the world. Gaurav has played the key role in the success of many organizations and likes to build products and services from scratch which delight people.  He likes to challenge the status quo to bring out the best from team & reshape the organisation culture. He likes all genres of music, from Indian classical to club music. 

Posts by Gaurav Mishra

Installation of React on Mac

Hello learners! In this tutorial we are going to learn the installation of React.js library on macOS. React.js is a library which helps developers to develop highly efficient data-driven SPA apps. It is based on functional programming, relies on the concept of immutability and encourages component-based architecture based on Single reusability principle.Before we perform the installation steps, we need to look at the prerequisites needed for installation.1. PrerequisiteSystem requirements: mac OS > 10.10Minimum RAM: 4 GBStorage space: 10 GB available spaceInternet browser: Chrome, Safari, Opera, Microsoft EdgeInternet connectivity: 512 kbps and above2. Introduction to ReactIn this tutorial, we will install the react library on macOS. Before the installation, we need to have a quick understanding of React.React is a library which helps web developers and architects to serve the needs of customers having demands of high data flow and fast responsive UIs in the context of data.It is based on the components-based architecture. The webpage can be represented in the form of Parent and Child based components.  It relies heavily on Virtual DOM, which acts as a performance optimization to DOM operations.A Web page which is composed of HTML has a DOM tree, with the help of which the web page is rendered by the browser.When the user is interacting on a page, it involves addition and insertion of information based on the user activity.  for e.g. A user has added an item to the cart. The cart is showing the updated item to reflect the user’s decision.Behind the scene, the HTML document undergoes a certain transform which helps to share the updated page. As we have mentioned, the HTML document is represented by the DOM tree. In the above scenario, the DOM needs some changes which involve addition and deletion of certain HTML nodes. This helps to show the relevant information which represents what a user is trying to achieve in the context of updating his buying choice.For this insertion and deletion operation on HTML DOM, there is a memory cost involved.Virtual DOM acts as a performance optimizer as far as the DOM update operations are concerned.  It maintains two copies; one is the real copy of the DOM (react DOM) and another one is the change to be done. The process by which minimal change takes place on the react DOM is also studied under the process called reconciliation.To understand the DOM we can visualise it as a tree.  The tree has roots and branches. In a similar manner the DOM has the HTML element at the top and down below there are nodes which are connected to the parent node. In terms of tree analogy, we can represent the parent node as the trunk, with various nodes connected to the trunk. And on these nodes, the insertion and deletion operations get optimized by using React.3. A short intro to Node.js & npmRyan Dahl is the inventor of Node.js.Node.js code is an open source, cross-platform, JavaScript runtime environment that runs JavaScript code. It is based on the Chrome V8 engine. Chrome V8 engine is written in C++. It runs on Windows, macOS and Linux.After installation of Node.js, we can run the react based project locally on our system during development. This also allows us to deploy our app on the production server.Some of the features of Node.js include:a. Uses JavaScript as primary languageb. Non-blocking I/Oc. Supports Asynchronous programmingd. Can handle multiple connections requests by using a single serverNode.js allows us to perform read, write operations on the server. It also provides the functionality to work with the databases.Npmjs.org is an online code repository of thousand modules (npm) and it allows us to install node modules using basic commands. Some modules are independent and some are interrelated to run effectively, due to dependencies between them.Node.js hosts several modules and instead of building functionality from scratch, it is easier for us to look for a module and reuse and extend its functionality. Developer projects generally have time and budget constraints. For the developer community, npmjs.org acts as a lifesaver as far as the Node.js based development is concerned.4. Download Node.js and installationTo install Node.js there are various steps.  It can be installed by visiting here.Once we have downloaded the Node.js version based on the operating system, we can perform the installation steps.One thing we need to note is that NPM is auto-installed with Node.js installation.We need to click on the package file which we have downloaded node-v14.15.1.pkgIn the below installation we can see it will install Node.js  v14.15.1 and npm v6.14.8When we click on the Continue button, the installer will ask to ‘Read Licence’.  It also shows two-buttons-- Disagree and Agree.To install the Node.js we need to click on Agree.To proceed further we need to specify the Login password to continue the installation.In the below screenshot the user has administrative rights for software installation. So, the admin needs to type the password in order to proceed further.After clicking on the Install Software button, click on the Install button.In the next screen, the progress bar will indicate the installation progress.Post-installation, it will provide us with a summary as below.After closing this window by clicking on the close button, we need to verify whether we have installed the said version of Node.jsTo open command terminal, press Command + Space barThis will open Spotlight search as below.We need to type Terminal and hit enter.Once the terminal is visible, we need to type the following commandnode - vAs we can see it is showing us the node version (v14.15.1) as in the screenshot.So, we have installed Node version 14. Each build is denoted by semantic versioning. The first digit, in this case, is 14, which represents a major release. The second digit represents new features with the release and the third digit represents patch and bug fixes as associated with the major release.Node.js installation by command line.As an alternative method, we can install node.js by the terminal as well. But as a prerequisite, we need to have homebrew in MacOS.We are assuming, we have homebrew installed in our system.And to proceed with the command-line installation, we need to open the terminal and type the following command.brew - vThe above command will inform us about the homebrew version.To update the brew, type the following commandbrew updateAfter the above command has been executed, we need to typebrew install nodeThe installation will take some time, so give some time to the system and be patient.To verify the Node.js installation usenode -vTo verify the npm installation usenpm -vCongratulations, we have installed Node.js and NPM.5. Create-react-app for react app on macOSNow, we are going to install create-react-app on macOS.Create-react-app is a quick way to set up a single page application code with minimal steps and no configuration.Let’s proceed with the installation steps.Please type the following command in the terminal to create a folder with the name react-app. mkdir react-appThen navigate to directory react-app as follows:cd react-appTo verify directory, type command and enter as belowpwdOnce we have confirmed that we are in the right directory type below command.npx create-react-app my-appnpx is a module which is included with npm.The installation steps as shown in the above screenshot will take some time.So, sit back and relax.Once the above command has been executed successfully....….navigate to my-app directorycd  my-appAnd typenpm startWhen the command is executed successfully, it will open the browser at localhost:3000 in the browser.And we can give ourselves a pat on back for the small win!6. Download and Install React (Explicit command)This step is for awareness only.In the previous step, we have not explicitly installed React.js as this is installed with the help of create-react-app package.We can also install the React.js  by using the following command.  And we may need to install the module dependencies on our own.npm install react --save7. File folder and structureWe can see that we have not touched the codebase but found the minimal single page web application running on our macOS.To see the code structure, we need to open the code editor e.g. Sublime, Atom etc.And open the folder my-appAs we can see, there are various folders and at a high level there are below folders:node_modules public srcIn the public folder, we can see index.html. This is the page template.The index.js in src folder is the JavaScript entry point.The app is displaying the code from the App.js in the src folder.In the my-app folder, the package.json is an important file which mentions the app name and module dependencies. Feel free to explore further.8. SummaryIn this tutorial, we have learnt about React.js, and the component-based architecture model in React.js. We also had a high-level overview of the virtual DOM.We touched on the concept of reconciliation, the usage of Node.js in the world of JavaScript and its capability to handle non-blocking I/O output to fulfil client connection requests simultaneously.We have checked two methods for Node.js installation, namely with the package manager and another one by using the command line.To install React.js, we have relied on the create-react-app module for a quick start. We can also install the React.js by command line. To prevent being overwhelmed with too many details we have picked the create-react-app method for this tutorial. We created our first react app and saw it running.To become familiar with the code in terms of development perspective, we quickly checked the important files which are running the app.
3758
Installation of React on Mac

Hello learners! In this tutorial we are going to l... Read More

Instal React Js on Windows

In this tutorial, we will learn how to install React.js on Windows.React.js is a library which helps us to build and create front end interfaces for Single page applications and it utilises the power of virtual DOM.React.js was an inhouse project of Facebook, and it was made open to the public in the year 2013. The adoption of React.js has seen an upward curve since its avantages have been realized. Various startups and established organizations are now adopting the technology and upgrading their technology stack.1. Prerequisite for WindowsTo install React on Windows, your system will require the minimum configuration as below:Windows XP, Windows 7 (32/64 bit) or higherMinimum 4 GB RAM and higher10 GB available space on the hard diskAt least one Internet Browser e.g. Chrome, Firefox, Microsoft Edge etc.Node.jsActive internet connection minimum speed 512kbps and above.At least one installed code Editor to test and debug your code e.g.  AtomSublimeVisual studio code2. Introduction to React.jsReact.js is a library written in TypeScript. It utilises the syntax of the modern version of JavaScript as described by ES6 and its higher version.Applications built using React.js use the Single reusability principle. This advocates the idea of building web pages and applications using components and unidirectional flow. In React.js we have the concept of states and the concept of immutability. Components have hierarchy in terms of Parent and Child components. A component in case of React.js can be thought of as a piece of code which is based on the principle of pure functions. We will look into the pure component later. First, let’s understand what a state is. For e.g. To become a member of a service, the user fills his information on the registration page. While filling the details there can be many states of the form, for e.g. When the form field is empty or when the form field has witnessed some error on some particular field, which needs to be corrected; or when after correction, the form data has been validated and is ready for submission. So, at a broad level, the registration form has been through various states. These states represent at which level the application is, in terms of interacting with the end-user. Each level of interaction for this form is represented by the state, from an empty form to being a fully filled form with a display of an error for certain fields and the validated form. In React.js, we have the component based on the pure function. A pure function can be memorised as a piece of code, which does one task and does it pretty well. For a certain input, it always returns the same output, so this means we are increasing predictability of the code. Since React.js follows a certain code pattern and principles in order to work, it lowers the curve of the knowledge gap; whether you are one-person or a team of developers working mutually.3. Introduction to Node.js and NPM on WindowsTo run React.js we will require Node.js on our system.Node.js is a server which will help us to run the React.js code.It is based on non-blocking input and output and the Chrome V8 JavaScript engine. The Node.js code is open source.NPM which is an abbreviation of Node package manager, npmjs.com is supported by various developers around the world. It has various node modules, using which developers can host and publish their modules on the open-source community.  It hosts modules in private and public visibility.A module carries code which exists to serve high or low level functionalities. In terms of code adoption and availability of various modules it gives an edge and tries to make the developer more productive.  We can plug in and plug out the module. Some modules are dependent on other modules; which is defined as dependency among modules.While building an application, a developer can pick the module, tweak and remix it to suit the application needs, and can then release to the open-source community. So, instead of reinventing the wheel, it is like picking a wheel (npm module) from npmjs.com, giving it further momentum and giving it back to the open source community.4. Download and Install Node.jsTo install Node.js we need to go to the URLDepending upon our Windows OS version in terms of 32 Bit or 64 Bit, we can pick the installer and install that version.  In this tutorial I am using Windows 8, 64 Bit.  The Node.js installer includes NPM. It is best to install the even numbered version of NPM.Depending upon your operating system, the Nodejs.org home page will show the Download button and recommended LTS version.After the download is complete we will go to the downloads folder and run the installer.The installer will show the below Setup Wizard. Click next.The next screen will ask for the End-user License Agreement. Select the checkbox at the bottom right to provide your consent and click on Next to proceed with the installation.The installer will ask for Destination folder and the default path set by installation is C:\Program Files\nodejs\Click on Next buttonThe above screen is an important step in the installation process. And if you see closely it also sets the environmental path variables to command prompt on Windows.Click on Next to continue with the installation.The Windows OS may ask you to allow Node.js installation and make changes.Click on Yes button.During the installation, if you have allowed for Chocolatey and required modules installation for C++ and Python, you will see the UI below in the command prompt. This installation requires 3 Gb of free disk space. In this tutorial this step is not required, so we are skipping this step by closing the window.If you are interested in installing it, press Enter to continue.Once the istallation is complete you need to verify the Node.js installation.  For this we will use the command prompt.To run command promptPress keys Win+RAnd type cmd in the window below.Next Click on Ok or Press Enter on the keyboard.5. Installation of ReactAfter installation of Node.js we need to install React. To check the Node.js version, open the Windows command prompt. Press Win+R and type cmd. In the command line, type   node -v to see its version. We can also check for npm version, which is installed with Node.js, with the following command npm -v After running these commands, we can check the node version v14.15.1 and npm version 6.14.8As we have confirmed the Node.js installation we can proceed to the next steps.While in the command prompt, we have navigated to a folder called Codefactory by following the command cd CodefactoryIn this folder we have created a folder  called react-windows by using the command mkdir react-windows.After the folder react-windows has been created, we will change the directory to react-windows with the command cd react-windows React.js can be installed in various ways. Now, we will type npm init. It will ask for the below configuration line by line. Insert your input, followed by Enter keypress to proceed with the next configuration.   At the end of the configuration it will confirm for the inputs you have entered. If you are happy with the configuration data, type yes and enter to continue.The npm init will help us to create a package.json file.Now, the next step to install React.js requires us to go to the command prompt and type the following command in the react-windows directory.npm install --save reactAnd after the above command npm install --save react-domBehind the scene, these commands fetch the specified module from npmjs.com and download it in the local codebase.Let's have a look at the react-windows folder. Here we can see some newly created directories in node_modules.So, in this tutorial, we have learned to install React and reactDOM. But to see the React.js SPA (single page app) there is more work to be done in the above code.As an alternative and fast approach we can do it via create-react-appLet us move to Codefactory folder and with the command cd.. create another folder react-cliNext, type the following command mkdir react-cliNow we will use create-react-app module and type the following commandPlease note that my-fast-app is the name of your app. This is an example and you can be creative in choosing your own name.npx create-react-app my-fast-appIf we see closely it will take care of the rest of the installation steps, and react, react-dom and other related modules are installed automatically.This process is a little data intensive, so please be patient while the download and installation happensWhen the above step gets completed the command prompt displays the below output.Now, let us run our first react app, by navigating to my-fast-app directory as belowcd my-fast-appAnd enter the next command as npm startThe npm command will show the application in the browser. http://localhost:3000And if you are running node.js for the first time using npm command, it will ask for permission to allow access and we need to allow access to run.As we are using a code editor we can have a look at the directory structure and some of the important files, such as index.html in the public folder, in src folder the index.js and App.js. The src folder contains the react component which we can build further on this codebase. index.js is the js invocation point for react app.This index.js is linked with the App.js, which is responsible for showing the content in the browser. That’s what we see on the demo page.Let’s edit the App.js by going to line 10 and adding the following codeTalk is cheap, show me the CodeOnce you save the file by Ctrl+SThe code will be auto refreshed in the browser, after compiling.It will show us the following output.So, now feel free to change messages and alter the page layout and structure for  experimentation.If you are familiar with CSS, you may also change the page style using App.css and tinker with the code as well.SummaryIn this tutorial, we have introduced you to React.js . Its impact in terms of building modern front end interfaces using component-based architecture is significant. We have also touched upon the concept of states, immutability and pure functions.We have got a brief introduction to the Node.js server and NPM modules, the capabilities of Node.js server and the power of the open source community in the npmjs.com.To install React, Node.js installation is a prerequisite.There are various methods for installation. Once we have installed Node.js, React can be installed either by npm commands or by using the create-react-app module.
4723
Instal React Js on Windows

In this tutorial, we will learn how to install Rea... Read More

Step-by-Step: Create a React Project From Scratch

Hello learners. In this tutorial we will learn How to create a new React app. Before we begin, we need to understand few things. These tutorials are aimed for the aspiring and seasoned web developers & designer. If you are an aspiring web developer who wants to establish their career in React and other modern frontend technologies, these tutorials will provide you the basic understanding that you need to learn, rehearse and practice. And some additional links as a part of suggestive reading, which you can further dwell upon. As a lifelong learner, we need to be open to new ideas however they may challenge your beliefs at first.  Technology is a work in progress. It composes of sections of stable parts which can be applied to solve the problem of our lives. And some sections which are the part of debate and undergoing experimentation and transformation by the pioneers who forged & nurture the systems. The cutting-edge technology tends to follow approximately the following adoption curve.Source: Crossing the Chasm  (1990) -Author: Geoffrey Moore   Technology Adoption Lifecycle As you can see, the curve is divided among 5 sections as categorized by the work of: Innovators Early adopters Early majority Late majority  LaggardsArea under the curve represents number of customers  During the second phase, there is an important phase known as Chasm. Any nascent technology which becomes main stream must grow this phase with the help of Early adopters along with innovators. And every promising technology has gone through this phase before it has gained enough momentum and has gone mainstream. Before we learn React. We need to learn some concepts. And It will be good to have some basic understanding of how internet works. There are various technical jargon associated and it is a broad topic. If you are complete starter, I hope it will give you some base. We will try to understand and answer the following: What is Client & Server? What is meant by HTTP?Client & Server When a user is connected to the internet with the help of browser (Google Chrome, Mozilla Firefox, Internet Explorer, Safari & Opera). And when we type or do the google search with the help of keywords. We are presented a list of search results. The user computer is a client and google search engine act as server. As it serves to your queries in the form of the best matched results in a reasonable short time, it is good to say that the search results are produced at the blink of an eye. HTTPWorld wide web (W3C) is a consortium which governs the internet. It has set of rules and protocols which defines how the different machines can communicate over the internet. Sir Tim burner Lee is the inventor of the W3C.HTTP is a protocol, which tells and describe the transmission of hypermedia on the internet. It is designed based on the client server concept. In which one system is a client which seeks the information and other system is a server who act and fulfil the request of the client. In HTTP, there are various status codes for server, and it describes the status of server based on the client request.  Whether the request has been Successful any error conditions on Client & Server redirected by server & so on.1.a(1) HTML HTML is a mark-up language which is used to create hypermedia document on the internet. Hypermedia based documents are used to exchange information on the internet. HTML should not be confused with programming language such as C, C++, Java & C#. Let’s write a Hello World! HTML document as below:        HTML 5 Document    Hello World!  To run the above code we can write it down or copy & paste in our favorite text editor and save it as Hello World.html. Please note .html is the file extension. And once we open the file with the browser it will show us the output as below.HTML is composed of various tags which defines the document and it's semantic. Semantic add meaning to the content as expressed by enclosing tags and it is not purely for visual presentation purpose.  The HTML 5 document begins with  HTML has also undergone various revisions and modifications. For e.g. If We need to present the information as paragraph.  Then we need to use < p > tag. For Tabular data < table >, Order list & unordered list < ul > and so on. References:Complete list of HTML references.HTML Standard & Draft list. 1.a(2)CSS Brief history CSS refers to the cascading style sheets. In the beginning year of the HTML, when HTML was used primarily to exchange information with the help of HTML document on the internet.   There was limited functionality to style the webpages. In fact, there were some tags which allows to style a page and change its formatting. But there was no separation of concerns, for e.g. the formatting tag and its associated attributes were often mixed with semantic HTML.And one of the early innovators Håkon Wium Lie recognized that there is a need of web page styling language which can address the presentation part of the webpages including the layout. And there is a need of separation of concerns.  Håkon Wium Lie along with the co-inventor Bert Bos had written the specification of CSS. < table> & its sibling tags were heavily used to structure the layout of the webpages. For E.g. To create multi column layout < table> were frequently used. It worked well to create the initial push to the web layouts, but it has own draw backs.  More on the history of CSSTo know more about how we can use CSS, we will start with previous code. To change the text color of Hello World! from black to green, we will declare a stylesheet called text.css. Naming convention for filename plays important rule, in recalling the file name when your source code becomes huge. It is good to start building on these habits. Hello World.html           HTML 5 Document    Hello World!    Text.css body{  font-family: 'Arial', Helvetica, Verdana;  color: red;  font-weight: bold;  font-size: large;  }As you can see from the browser, it displays the Hello World! text in red color and font appearance is bold & larger. CSS has lots of modules which helps us to create sophisticated layouts, cool animations, image processing using css filters, accessibility (a11y) & much more. The current version of CSS is CSS3. As technology gradually evolved, so did the CSS.  It is maintained by CSS working group, which consists of invited experts and working group members.  If you are interested to explore more you may check some of these links. Reference: CSS AlmanacCool tricks  Homer CSS (2008)Romancortes.com Animated your HTML 1.a(3) JavaScript JavaScript is used to bring interactivity on the web pages. JavaScript is based on the ECMA Script standard.  Every browser has JavaScript engines, which interpret the JavaScript code. As described in the previous sections that the HTML is responsible for the structure and semantic aspect for the webpage. And with the help of CSS, the look and feel, advanced layouts and interactivity can be added using animation and pseudo classes. JavaScript brings lots of interactivity to your pages. It is good to say that it adds wings to your creation. But sometimes these wings catch the fire, so we also know how to troubleshoot and prevent such instances from happening.  For e.g. If you ask your user to input their age. To validate the age, we can write the JavaScript code and validate, whether the input is correct or not. To recap and understand the HTML, CSS and JavaScript in brief. We can refer to the above presentation. 2. ECMA Script and new versions ECMAScript describes the functionality of JavaScript. ECMAScript is maintained by ECMA International. The aim of ECMA Script is to ensure that webpages can run the same JavaScript code across different browser, & it is also interoperable with other programming language. In this context the Interoperability means that other programming language can invoke JavaScript function. Programming languages such as Dart can run JavaScript code. Some framework such as Blazor in the world of . NET can invoke functions written in JavaScript. In terms of specification it tries to draws the line of standard for different browser vendors. Microsoft, Firefox, Google, Chrome, Opera & Apple each has its own browsers which runs on different operating systems whether it is on Windows, Linux and macOS. Sometimes the browser vendor takes a lead while implementing a feature. But the specifications for that feature are written later by standard body (ECMA International). The new feature may be adopted by another browsers vendor later in the evolution process.  Different browser vendor has different development life cycle in terms of feature’s implementation. And it takes time for the specification to become a standard. And the new version of browser is released by multiple vendor with the specification and takes time to become a standard on Web. In past few years since ECMAScript has undergone various revisions and changes as described by ES6, ES7, ES8 & ES9 & more we will see in future. And these changes have resulted into the major impact on the JavaScript syntax. More references: ECMA Script version historyECMA Script2. Intro to React & Virtual DOM React is a library which is publicly released by Facebook in 2013. React was created by Jordan Walke, a software engineer working at Facebook. React allows us to divide our code into components. And these components communicate with each other in a unidirectional flow. As the components follows a standard development structure in nomenclature and design patterns. This helps in reducing of the knowledge gaps when different team members work and manage a project in which they have not worked from scratch.  React is based on the Functional programming principles as the design pattern. It is also follow the DRY principle. DRY stands for Don’t repeat yourself. That means any piece of code which serves a specific task or function should not be repeated as the duplicate code. But we can declare it as a component and increase the reusability. Design pattern is a wide topic. If you are interested to know more about the design pattern you may check out these references.Addyosmanirefactoring.guru2.b Quick timeline of React release Technology goes through a lot of wear and tear before it is adopted in mainstream and it also need to prove it's worth in real life production environment. The complete timeline of React release is available on GitHub. Some of the interesting highlights from React release. VersionRelease DateDescription0.3.029th May 2013Public release0.13.010th March 2015Support for ES6 Classes15.007th April 2016New changes on how React interacts with DOM, added support for SVG attributes, Dropped support for IE816.026th September 2017MIT license. Reduced file size. Better error handling16.505th September 2018Added support for React Devtools profiler (Flame chart, Ranked chart, Component chart & more)16.816th February 2019Introduced concept of hooksReference: Github.comRisingstack.com2.c Component driven development The beauty to work with React is that you can structure and assemble your code in components. The parent component can contain various child components. The parent component passes the data values to child, to maintain the uni-directional data flow. For data driven apps, React seems to be a good choice. 2.d  Virtual DOM - The secret sauce of DOM Optimisation Before we understand Virtual DOM, let’s take a look at DOM. DOM refers to document object model.DOM is referred by the browser to render the HTML. The HTML is converted into DOM. To simply visualise the DOM you can think of a tree trunk and which has its roots spread down below.In DOM visualisation tree we can see that there are different nodes which are connected to html. In DOM, whenever the new nodes are inserted and deleted there is cost in terms of computation and memory footprint during such operations. And this is a little costly affair. Virtual DOM acts as performance optimiser in these operations.  The Virtual DOM has two copies, one is the master copy of the node and another one is the copy of the changes to be done. Virtual DOM reduces the cost in terms of memory and processing time to apply the changes. It applies the minimal changes required on the DOM. The process is also called reconciliation and is achieved by render() function in React. Reference: View Live DOM Tree.d3.DOM VisualizerReconciliation3. Getting Started3.a Picking the development IDE or the Editor To work with code, we need an editor which can provides us the following: An engaging developer experience Notify and spot errors in advance Can perform autocomplete, syntax highlighting and maintain readability of code Easy to customise and provide plugins to help in developer workflow Also provide us flexibility to create our own plugins And help in code collaboration while working with multiple team members. There are various editors available for developers in market such as Sublime, Atom, Brackets and Visual Studio Code & WebStorm IDE.  All of them have their pros & cons.  In our current project we are sticking to Visual studio code. It is available for Windows, Mac and Linux.  You may download the editor based on your operating system.3.b Environment Setup To run React we will require Node.js on our operating system. Node.js is written by Ryan Dahl and is based on Chrome V8 engine.  Download Node.js & visit the url And we will install the release with even number and LTS (Long term support) We will be installing the Node.js version 12. It also includes npm which we will use to run our first app in React.  To run Node.js we can use command prompt on Windows and use Terminal on macOS.To check the Node.js version, we need to run the following command. node --versionAs you can see from screenshot that we have installed version 12 (v12.18.2) After installation of Node & npm.we will be creating to create a React app with command line interface (CLI). mkdir CodefactoryInstallation of create-react-app I have created a directory called Codefactory.  And in that directory, I am going to run the following command npx create-react-app my-appAfter couple of minutes, the packages will be installed. 4. Quick intro to Node & NPM. In the previous sections we have mentioned the use of Node and NPM. Node.js help developers to use JavaScript as the main language to build their apps. It is open source.  Some of its salient features are: Event driven Non-blocking I/O (input/output) cross platform run time environment Based on Chrome V8 JavaScript EngineRyan Dahl is the creator of Node.js. V8 supports new features of JavaScript and those features are made available to Node.js. And which keep the Node.js in mainstream based on the recent development and upgradation happening in the ecosystem of JavaScript and ECMAScript. Since modularity is much needed and required by developers. Node.js follows the concepts of modules as characterized by NPM. NPM is a package manager for Node.js modules and various packages are available for developers to test and experiment with their code. Official site.References: Node.js Ryal Dahl (2009) 5. Your first React app Start with the boilerplate app Now let's go back to terminal & run our app. We will go to directory my-app and after running the following command cd my-appNow you are in my-app directory, where the npx has downloaded the dependencies and modules.  5.2 File structure of React app Now, we will go to Visual studio code. We will go to menu bar and Add the folder my-app to workspace. In the Visual studio, the explorer will list down the files under the directory structure.  5.3 Run your React app Now is the time to run the React app.  To open terminal go to menu bar and go to Terminal > New Terminal. This will open the terminal at the bottom. We need to type following command in terminal to start the app.  npm start The command line will instruct the app to open in a new browser So, here we can see the app running. Good job so far!And as per the instructions from screenshot we will open the App.js The App.js will show a bunch of import statements and function App()There are various methods to create React app via CLI such as yarn and npm on local system. In case you are facing problems during installation. As an alternative approach to create a React app, you can check StackBlitzAnd create a new workspace of React It will provide you an online playground to tinker and play with the source code in the browser itself. At the left there is a workspace and at the right output from the app. It will show you the index.js which show the import statement, class App component declaration and the render() function. The render function contains JSX. And this allow us to write HTML in JS. This is for a little human friendly version for readability for both experienced programmers and newbie. Reference 5.4 Debugging tool React provides the React Developer tools to check and inspect the components created. It is a very handy tool for debugging. To install React developer tools we will open the below url in google chrome and install add-on from chrome web store  Once we have clicked on Add to Chrome, the tool will be installed.  To open the tool go to your project at localhost. And right click it will show the context menu and click on inspectTo open the tool go to Components tab as shown below:6. Tinker and Play Once we have opened the file App.js in our main project created from CLI. We can tinker around and play with the code. On line number 10, We have a paragraph tag. We can choose any message we want to write and see how it appears on the React app. For E.g. I have added this message in Paragraph tag and inside of the paragraph tag there is a right foot icon enclosed in Bigger text tag. Once we save the file, it will auto reload on the app. So, the auto reload feature saves us from manually load the browser when new changes are saved to disk.            A Journey of a Thousand Miles Begins with a Single Step.           Now feel free to introduce your messages, add some tags and play around. I hope this will serve a good starting point for you to learn and practice. Before you acquire the skills to become a React developer, I hope the understanding of HTML, CSS and JavaScript will give you a good foundation. Happy Learning!.Become a pro at Web Development with the help of our  React training courses. Experience Immersive Learning. 
6930
Step-by-Step: Create a React Project From Scratch

Hello learners. In this tutorial we will learn How... Read More