Thursday, September 14

LEARNING REACT: MAKE WEBSITES - Part 4

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.

At simplest, template literals allow easy interpolation of variables into strings, and easier multiline strings.
var name = "John";
 
var text = `Hello ${name}`;
console.log(text);
The output would be “Hello John” as you might guess.

In the above function, not the use of disabled class in className

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


Wednesday, September 13

LEARNING REACT: MAKE WEBSITES - Part 3

Building our first JSX React Component

install react and react-dom to your project. We need this dependencies in production so use below command

npm install --save react react-dom

This will ensure that an entry is created in the package.json file for all the dependencies.

In your client.js file, import the node modules using the import keyword.
import helps import external libraries.

import React from "react";
import ReactDOM from "react-dom";

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

const component = <div className="myclass">Some content</div>;

2) Also, wrting inline style in JSX should be done via an object. For eg
const component = <div style={{backgroundImage:"url(image.jpg)", color:"white"}}>Some content</div>;

To render your react component,

ReactDOM.render(component, document.getElementById('react'));


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.

Create a file app.js

import React from "react";

class App extends React.Component{
    render(){
        return <div>This is text</div>
    }
}


Now in your client.js file, you can import your class App as

import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

In the above line of code, no need to type the file extension.
Next, you need to render the class that we imported, i.e the App class. It can be done using the below line of code.

ReactDOM.render(, document.getElementById('react'));


Building a reusable React Button.

The basic react component file will
1) Import react
2) create a class that extends react component module
3) Create a render() method and return a value.

Create a file button.js and insert below code.

import React from "react";

export default class Button extends React.Component{
render(){
return <a className="btn btn-primary" href="http://google.com">Button Name</a>;
}
}

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

import React from "react";
import Button from "./bootstrap/button";

export default class App extends React.Component{
render(){
return <div className="jumbotron text-center">
<div className="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

import React from "react";

export default class Button extends React.Component{
render(){

return <a className={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

import React from "react";
import Button from "./bootstrap/button";

export default class App extends React.Component{
render(){
return <div className="jumbotron text-center">
<div className="container">
<h1>Learning React</h1>
<p>with Bootstrap and SASS</p>
<Button href="#" 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

import React from "react";

export default class Button extends React.Component{
render(){

const Tag = 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

LEARNING REACT: MAKE WEBSITES - Part 2

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

LEARNING REACT: MAKE WEBSITES - Part 1

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.