Workout log

Monday, November 20

Arrays.push() takes one or more parameters and "pushes" them onto the end of the array..pop() is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable.

pop() always removes the last element of an array. What if you want to remove the first?

That's where .shift() comes in. It works just like .pop(), except it removes the first element instead of the last.

.unshift() works exactly like .push(), but instead of adding the element at the end of the array, unshift() adds the element at the beginning of the array.

Global Scope and Functions

In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code.

Variables which are used without the var keyword are automatically created in the global scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with var.

Local Scope and Functions

Variables which are declared within a function, as well as the function parameters have local scope. That means, they are only visible within that function.

It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable.

What happens if a function has two return types..

function a(){
return "I will be returned";
return "I will not be returned";
}

Thursday, September 14

Understanding JSX spread
In bootstrap, "btn btn-primary" etc are classes of the button and if we notice a pattern, "btn" is a common keyword. We can generalize this in our component to let user avoid the use of "btn" text.

See the function classify below.
Note the use of split and join function.
Also note, the special ES6 `` usage. This is new feature of ES6 and it is called as Template literals.

Creating external utilities for modules for React Components.
We create a utils.js file basically for all the utility functions. Let us put the classify function in the utils.js file and then export it in the Button component.

utils.js

Importing the classify function from the utils.js file.

Removing Unknown Props from HTML

- HTML expects only a subset of properties
- React throws errors
- Learning how to avoid them

You can create a JSX component and simply assign html to it. But remember below points
1) html has a class attribute, however in ES6, class is a reserved keyword, so we would have to use "className" instead of "class". For eg

Creating a React component.
It is always a good to have components in their individual files. The most minimalistic react component would have a class that extends the react component with a render method to render the contents. See below example.

We can now use the Button class multiple times and create multiple buttons with the same code.

Go to app.js file and insert below code

importReactfrom"react";

importButtonfrom"./bootstrap/button";

exportdefaultclassAppextendsReact.Component{

render(){

return<divclassName="jumbotron text-center">

<divclassName="container">

<h1>Learning React</h1>

<p>with Bootstrap and SASS</p>

<Button/>

<Button/>

</div>

</div>;

}

}

In the above code, if you see, we have included the Button class multiple times.

Now with the above code the problem is, the Button would always have the same parameters/attributes such as classname, href etc.

To make this class reusable, we can use JSX property this.props in our button class like below

importReactfrom"react";

exportdefaultclassButtonextendsReact.Component{

render(){

return<aclassName={this.props.className}

href={this.props.href} target="_blank">Discover things.</a>

}

}

And in our app.js where we call the Button class, we can pass the arguments like below

importReactfrom"react";

importButtonfrom"./bootstrap/button";

exportdefaultclassAppextendsReact.Component{

render(){

return<divclassName="jumbotron text-center">

<divclassName="container">

<h1>Learning React</h1>

<p>with Bootstrap and SASS</p>

<Buttonhref="#"className="btn btn-danger"/>

</div>

</div>;

}

}

In above situation, we are still restricted to having specific arguments. Let's say you want to add some more arguments to your Button like id, or any other data-attributes, then a much better approach is to use below code i.e {...this.props}

Creating dynamic JSX tags

You may want to use the "a" tag and "button" tag interchangeably in your code and instead of creating two component for different tags, you could combine them into one component like below.

In your button.js file

importReactfrom"react";

exportdefaultclassButtonextendsReact.Component{

render(){

constTag = this.props.href?"a":"button";

return<Tag {...this.props}>{this.props.name}</Tag>;

}

}

So if the component has a href attribute, then call the a tag else call the button tag.

Thursday, June 29

Once the setup is complete and you are ready to rock and roll, the next step is to learn ReactJS framework. So lets get started.

1) Get the Bootstrap css file and import it in your index.html file.

2) Configure webpack to take an input file and convert to output file. Basically that is required because we would be using ES6, JSX etc which requires compilation into plain javascript. Thus webpack is required to do the necessary compilation for us. See below screenshot.

3) Common way of writing in React is to add support for ES6 and JSX with Babel.
We would be using ES6 but with help of Babel using loaders that will transcribe to ES5. Babel polyfill will ensure support for older browsers.

Common way of building react component is using ES6. Some common packages that are required for development are Babel packages.
1) babel-loader - Webpackage library that helps convert code from ES6 to ES5
2) babel-preset-es2015
3) babel-preset-react - Takes JSX and convert code for easy development.
4) babel-polyfill - For browsers that are older and don't support ES5, it ensures some polyfill.

Add in package.json

Add an entry in the webpack.config.js file for loader. We want all the .js files to be transpiled to ES5 excluding the node_modules folder. See below screenshot

Sunday, June 11

Below are notes from the React tutorial I took from safaribooksonline.

Installation and Setup
1) Make sure you have node and npm installed.

2) Create a directory "public/img"

3) Run command "npm init"

4) Create a file "index.html" inside your public directory.
If you are using VSCode, it has emmet plugin already installed. By typing "!" and pressing tab, you will get the basic html ready to get started.

Setting up Webpack and WebPack-Dev-Server
1) Install webpack

Notice the parameter "--save-dev". It means that we want the the package to be installed for development purpose. Also this parameter will add an entry to our package.json file, so anyone who wishes to run our application on their local environment will just have to "npm install" and it will download the package automatically instead of performing installation of webpack explicitly.

2) Next step is to configure webpack. The best way to do is by creating a js file. Create a file "webpack.config.js" in parallel to "package.json".

3) To start the webpack server, go to "package.json" and add a your server to the scripts parameter as shown in screenshot below. Note the name of the script is "start".

Thus, to start a webpack server, go to console and run the command "npm run start" or "npm start" because "start" is a common keyword, "npm start" will work fine.