Front-End Web Development with React

Hi, I took this course on Front-End Web Development with React by The Hong Kong University of Science and Technology, so this is a gist of that course.

Prerequisites would be HTML, CSS , Bootstrap and basic JS

1. https://programmerprodigy.code.blog/2020/06/18/web-developmenthtmlcss-basics/
2. https://programmerprodigy.code.blog/2020/06/24/javascript-basics-for-web-development/

If you get Stuck at any JavaScript concept, please refer this document. I have tried to add most commonly used JavaScript concepts in it along with examples, https://programmerprodigy.code.blog/2020/08/16/key-words-used-in-react-js/

Q. What is a full stack developer?

Learning about both client and server-side code and understand how the full suite of technologies making up a website work.

1. On the client side, you want to build everything you actually see on a website (e.g., the layout, the positioning of text and images, colors, fonts, buttons, etc.) using, typically, HTML, CSS, and JavaScript.
2. On the server side, you want to create algorithms and business logic to manipulate data that is received from the client side.

1. https://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/
2. https://www.andyshora.com/full-stack-developers.html

Q. What is Node.js, NPM and Yarn?

Node.js is based on the JavaScript runtime engine that has been built for the Chrome browser. So the Chrome V8 JavaScript engine has been ported from the browser to run on the desktop and support the execution of JavaScript programs on the desktop.

how to install node js

When you install Node on your computer, NPM automatically gets installed. The Node Package Manager is the manager for the node ecosystem that manages all the node modules and packages that have been made publicly available by many different users. https://nodejs.org/en/download/package-manager/

Verify by checking the version of both of them

The official documentations:

1. https://docs.npmjs.com/
2. https://nodejs.org/api/
3. https://www.npmjs.com/products/pro

How to install Yarn

Yarn is another package manager like NPM, but is better suited and faster to work with for React applications. So let us install yarn and use it for building our React applications.To install Yarn, you can find the instructions for your specific platform at https://yarnpkg.com/en/docs/install.

Q.What is package.json file?

The package.json file serves as the documentation on what all other packages that your project is dependent upon. So, for example, when you set up the lite-server for your project that will be recorded in the package.json file, so that subsequently you can also make use of that package in the future.

It allows you to specify which specific version of a package that your project is dependent on, and also it makes your builds reproducible. Which means that when you share your code with others, then they can also do installation of all the node modules,

If you are starting a new project where you want to initialize the package.json file then simply type npm init at the prompt in the project folder and then that will take you through a set of steps, which will enable you to configure your package.json file.

npm init

Q.How we can install a node module using NPM(the node package manager) and Yarn ?

So, we’re going to install this node module called as lite-server. The lite-server will serve up the contents of this folder in a server that it starts up, so that you can view the contents in a browser.

Using npm:

npm install lite-server --save-dev

If you are installing a node module on which your project is directly dependent on, then you would install it by simply saying minus minus save-option.

Using yarn:

yarn add lite-server 

For more information on lite-server

Q. How to not add node modules to our git repository?

When you upload the contents of your folder to an online Git repository or when you do a commit of the folder to your Git repository, you don’t want the node modules folder or all the subfolders under it to be included in the commit.

So to do that, we will set up a file named dot Git ignore. So that’s the name of the file, dot gitignore. To create this dot gitignore file, we will go to our editor.

Q.What are JavaScript frameworks and libraries? Why do we need them? And what do they help us accomplish that we cannot do with standard Vanilla JavaScript?

The genetic framework defines a standard set of behaviors that you can then customize to implement your specific application. So the framework will call upon their specific functionality that you implement as a web application designer in order to customize the generic functionality that the framework provides. This is where we often hear about the inversion of control.

So this is where we also distinguish between two different approaches to implementing applications, the imperative approach as opposed to the declarative programming approach.

1. In an imperative approach, the application designer clearly specifies how the work needs to be accomplished or how the application needs to be executed.
2. In a declarative approach, the application designer simply specifies what needs to be accomplished and leaves it up to the framework to decide how the work is going to be accomplished.

For more information

Q.What is React library?

React as specified on its website says that, it makes it easy to create interactive UIs with simple views for each state within your application. And also React takes care of automatically updating the UI and then rendering any changes to their specific components as required on your page. In a Component based approach, we encapsulate behaviors into small units called Components.

React was first designed by Jordan Walke who was part of the Facebook team. It was first deployed for Facebook’s news feed around 2011. Subsequently in 2013, React was open sourced at this JS conference. React took off as an approach for implementing Web applications from then onwards. React is designed for speed, speed of implementing the application, simplicity, and scalability.

From the React documentation we learn that the create-react-app CLI makes it easy to create an application that already works, right out of the box.

1.To install create-react-app globally, type the following at the prompt:

yarn global add create-react-app

2.This will make the command line tool for creating React applications. To learn more about the various commands that this CLI provides, type at the prompt:

create-react-app --help

3.This should create a new folder named your app within your React folder and create the React application in that folder. Move to the your app folder and type the following at the prompt:

yarn start

Type create-react-app –help and that will print out a set of instructions on how we can use the create react app to create a React application

A few important files to know about:

1. Index.js:

In this React Element, you’re noticing h1 tag here, which seems to remind you of the html h1 tag. What this represents in React, is plain Javascript object. And so in React, all these elements are plain JavaScript objects, that are very cheap to create and so you can create a lot of them for use within your React Application.

So, you can see that you’re importing React from React, and then you’re importing ReactDOM from react-dom, and then you’re importing the CSS file here, and then you’re importing App from.App. .

This ReactDOM, as you see, is imported from react-dom and then you’re calling the render method of ReactDOM and then for that, you are supplying the first parameter as App. So this is a tag here, the App here refers to this App that we are just importing, and so that is a self closing tag that we have enclosed here, and then the second parameter here that says document.getElementById(‘root’). Now from your knowledge of JavaScript, document refers to the HTML document that we have seen and then says getElementById(‘root’) here. And so, you can interpret the statement saying ReacDOM.render. This particular thing, and then attach it to this DOM element in my index.html page.

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

2.App.js:

Q.What is this component class?

So we are importing this from this React module here. Then component, class from there. And that is what we are using to create this subclass here called app. And then inside this App class, you’ll see that there is a single method here called render here. The render method contains, as you can see React Elements that are grouped together. Innovate to create the view that you saw in the browser a little bit earlier. So, this is returned by this render method of this render function of this class component here. So, this is the typical structure of the React component.

If you scroll down, it says export default App; So, this app is an export from this App.js file. Also, notice that we are importing App.css here before applying it to our application.

import React from 'react';
import {Navbar, NavbarBrand} from 'reactstrap';
import './App.css';

function App() {
  return (
    <div className="App">
      <Navbar dark color="primary">
        <div className="container">
          <NavbarBrand href="/">
            Hridyesh Singh Bisht
          </NavbarBrand>
        </div>
      </Navbar>
      <h2>Hello World</h2>
    </div>
  );
}

export default App;

3.Index.html:

Let me draw your attention to this particular element in there written div id root here. So what you can see here is that in the index.html page, I am rendering that particular DOM element, onto this element in my index.html page. So this is going to be replaced by what is rendered by index.js, and put in there in place of that, and which is nothing but what is included inside this app component, which is nothing but what we just saw here which is being rendered by the app component.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>