Creating a basic search in React

1) Setup the basic structure of your application as mentioned in the earlier tutorial.

2) In your app.js lets first setup a master list against which we will perform the search.

	import React from 'react';
	import ReactDOM from 'react-dom'
	class App extends React.Component {
	constructor(){
	super();
	this.state = {
	colors: ["red", "blue", "green"],
	searchedResult: []
	}
	this.state.searchedResult = this.state.colors
	}
	render(){
	return ();
	}
	}
	export default App

view raw App.js hosted with ❤ by GitHub

We are using constructor for setting up the initial state. In the above example we are setting up two initial states. 'color' state consist of all the initial master data and 'searchedResult' consist of the items which match the search text.

There is a difference in how you initialize states in es6 and es5. Read about more here

For reading more about the es6 syntax in react, go through this link

3) Lets add a textbox, and add an onChange event to it. We are also adding a function to update the list as per search result.

	import React from 'react';
	import ReactDOM from 'react-dom'
	class App extends React.Component {
	constructor(){
	super();
	this.state = {
	colors: ["red", "blue", "green"],
	searchedResult: []
	}
	this.update = this.update.bind(this)
	this.updateList = this.updateList.bind(this)
	this.state.searchedResult = this.state.colors
	}
	update(e){
	var filtered_colors = []
	this.state.colors.map(function(color) {
	if (color.match(e.target.value) !=null )
	{
	filtered_colors.push(color)
	}
	})
	this.setState({searchedResult: filtered_colors})
	}
	render(){
	return (
	<div>
	<ul>{
	this.state.searchedResult.map(function(color) {
	return <li key={color}>{color}</li>
	})}</ul>
	<SearchBox update={this.update}/>
	</div>
	);
	}
	}
	class SearchBox extends React.Component{
	render(){
	return <input type="text" onChange={this.props.update}></input>
	}
	}
	export default App

view raw App2.js hosted with ❤ by GitHub

You will observe we have used bind to attach the update event. This is because when we call a function in without binding  this will not be a class itself, it’s undefined.

Read more about it here -> http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

4) Lets add one more component so as to update the master list.

	import React from 'react';
	import ReactDOM from 'react-dom'
	class App extends React.Component {
	constructor(){
	super();
	this.state = {
	colors: ["red", "blue", "green"],
	searchedResult: []
	}
	this.update = this.update.bind(this)
	this.updateList = this.updateList.bind(this)
	this.state.searchedResult = this.state.colors
	}
	update(e){
	var filtered_colors = []
	this.state.colors.map(function(color) {
	if (color.match(e.target.value) !=null )
	{
	filtered_colors.push(color)
	}
	})
	this.setState({searchedResult: filtered_colors})
	}
	updateList(e){
	var old_array=this.state.colors
	var new_array=old_array.concat(ReactDOM.findDOMNode(this.refs.but.refs.textAdded).value)
	this.setState({colors: new_array,
	searchedResult: new_array})
	}
	render(){
	return (
	<div>
	<ul>{
	this.state.searchedResult.map(function(color) {
	return <li key={color}>{color}</li>
	})}</ul>
	<SearchBox update={this.update}/>
	<Button ref="but" updateList={this.updateList}/>
	</div>
	);
	}
	}
	class Button extends React.Component{
	render(){
	return(
	<div>
	<input ref="textAdded"></input>
	<button onClick={this.props.updateList}>Add Color</button>
	</div>
	);
	}
	}
	class SearchBox extends React.Component{
	render(){
	return <input type="text" onChange={this.props.update}></input>
	}
	}
	export default App

view raw app3.js hosted with ❤ by GitHub

Getting started with react

Setting up your first react application

1) Go to console and create your project folder

mkdir react-app

2) Got to react-app folder and type

npn init.

This step will ask for few information just keep on pressing enter and make edits if you want.

3) Now install the react libraries using npm.

npm install react-dom --save

This will install the two important react libraries which are required to run the application, -- save option add this dependencies to package.json

4) Now install the rest of libraries required.

npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react

This will install the babel transpiler which is needed to compile the ECMAScript 6 to ECMAScript 5 which is supported by most of the browsers.

Read more about it here-
https://www.quora.com/What-exactly-is-BabelJs-Why-does-it-understand-JSX-React-components

5) Now install the webpack server which will help in serving the application in development.

sudo npm install webpack webpack-dev-server -g

Read more about it here - https://www.quora.com/What-is-webpack

6) Create the basic files needed to run a basic hello world program

touch index.html App.js main.js webpack.config.js

7) Add this to your webpack.config.js

	module.exports = {
	entry: './main.js',
	output: {
	path: './',
	filename: 'index.js'
	},
	devServer: {
	inline: true,
	port: 8085
	},
	module: {
	loaders: [
	{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: 'babel',
	query: {
	presets: ['es2015', 'react']
	}
	}
	]
	}
	}

view raw webpack.config.js hosted with ❤ by GitHub

Read more about server configuration here-
https://github.com/webpack/docs/wiki/configuration

9) Now lets update the Add this to your index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Setup</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="index.js"></script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

10) Now lets update our main.js file with the following content.

	import React from 'react';
	import ReactDOM from 'react-dom';
	import App from './App';
	ReactDOM.render(<App />, document.getElementById('app'))

view raw main.js hosted with ❤ by GitHub

11) Now lets add our first component. Add this to your app.js

	import React from 'react';
	import ReactDOM from 'react-dom'
	class App extends React.Component {
	render(){
	return (
	<div>Hello React!</div>
	);
	}
	}
	export default App

view raw App4.js hosted with ❤ by GitHub

12) Update your package.json file to add the script for starting the webpack server

	{
	"name": "search-app",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "webpack-dev-server"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"react": "^15.1.0",
	"react-dom": "^15.1.0"
	}
	}

view raw package.son hosted with ❤ by GitHub

13) Go to console and type

npm start

This will start the server in port 8085. 

Some useful gems I came across recently..

Not  been blogging much these days, since I was busy bundling up the gems I found useful :P
So here are the few I came across and found useful!!

Party Foul
https://github.com/dockyard/party_foul

If you are bored of opening issues every now and then for exceptions you got while working on the s application you got, here is the solution. Keeps track of any exception thrown on production(or any environment you configured).
Don't worry it do not open multiple issue for same exception. Intelligent enough yeah ?

Creek
https://github.com/pythonicrubyist/creek

What an awesome gem to import an excel sheet. I know there are quite a few in the market but try this for its awesome performance and speed. :)

Capistriano Haller
https://github.com/smashingboxes/capistrano-haller

Hall is being used by almost everyone now, this gem takes care of providing the notification to your hall group whenever your application is deployed !!! Good when the deployment is failed one though :D :P

Make most of your yaml files

When I first started with Ruby on Rails, the only purpose of yml files for me was using it database.yml files.

However when I started to work more on rails, I found that yml files can be more than just a database configuration file.

I started to use it more and more..like..

• Using it for translations, yeah I know people have been using this for while, setting up the locale and picking up the right one based on the language you selected. 
• Use it for storing some data, like you want to store list of all the countries(the easiest example I can think of right now), do it a yaml files. Why to store it in a database and fire an extra query?
• Try creating a form based on yaml, yes one of my friend did it and it was amazing.
• Storing some temp reports? Try saving rails best practices result for an instance? 

These are the just fews I can think of right now, I know there are many. 

You know of some, please feel free to share !!

raw, html_safe,content_tag

raw and html_safe method

They both are used to unescape the html from any string.
    For Example:-
       In your helper method-
         def raw_example()
     raw  "<b>Hello</b>"
         end
     
       In your view
         <%= raw_example %>

      Output:-
         Hello

similarly for html_safe
         def html_safe_example()
     "<b>Hello</b>".html_safe
         end
     
       In your view
         <%= html_safe_example%>

Making it safe from attacks

Suppose you are taking any content from the user then using it with the html_safe to unescape the html like this.

         def html_safe_example(name)

     "<b>Hello #{name}</b>".html_safe

          end

 Lets assume that the content here is "world" everything is good and will work fine. However you have    made your site vulnerable to attacks.What if the user sends any html content instead of his name , suppose "<script>alert("attack")</script>.

To avoid this, instead of writing the whole html content in one line and do it step by step and dont make the name variable as html_safe like this:-

         def html_safe_example(name)

     html = "".html_safe

             html << "<b>Hello".html_safe
             html << name

             html <<"</b>".html_safe

         end

Make sure while concatenating that all the content are html_safe or they all are strings.Else it will give unexpected result.

Content_tag

content_tag returns the html tag of the name provided in the content_tag syntax.

For example:-

-> content_tag(:p, "hi") will return <p>hi</p>

-> content_tag(:div, content_tag(:p, "Hello world!"), :class => "strong")

Metaprogramming with ruby

1) eval , #{} and their difference.

eval  is used to evaluate the string as expression.

#{} is used to delimit the expressions in a double-quoted string.

At first they both look same however there is a difference between both. Let me explain this with the help of an example.

Suppose we have a variable

exp = "2*4"

Now the output of eval(exp) will be 8

Where as output of  "#{exp}"  will be 2*4

2) instance_eval, module_eval and class_eval

instance_eval can be used to access the instance variable of an object.

For example:-

class Test
  def initialize
  @variable = "hello"
  end
end

obj = Test.new
obj.instance_eval do 
 puts @variable # Output-> hello
end

instance_eval can also be used for creating class methods

For example:-

class Test
end

Test.instance_eval do 
 def hello
   puts "hello world"
 end
end

Test.hello # output => hello world

Like instance_eval, module_eval and class_eval are used to access class variable from outside a class.
Both module_eval and class_eval operates on modules and class rather than their objects.

For Example:-

class Test
 @@variable = "hello"
end

 puts Test.class_eval(@@variable) # Output-> hello

module_eval and class_eval are also used to create new instance methods.
For Example:-

class Test
end

Test.class_eval do 
 def hello
   puts "hello world"
 end
end
obj = Test.new
obj.hello # output => hello world

3) instance_variable_get and instance_variable_set
instance_variable_get, as the name suggests, is used to retrieve the value of any instance variable.
It takes the the variable name as symbol argument

For example:-

class Test
  def initialize
  @variable = "hello"
  end
end

obj = Test.new
obj.instance_variable_get(:@variable) # Output => hello

instance_variable_set, as the name suggests, is used to set the value of any instance variable.
It takes a symbol argument as variable name and second argument which is the variable value

For example:-

class Test
  def initialize
  @variable = "hello"
  end
end

obj = Test.new
obj.instance_variable_set(:@variable,"hello world")

4) send method

send method is used to call a method of the same name as specified as the first argument(which is in symbol format)

For Example:-

@variable = "test"
puts( @variable.send(:reverse)) # this will call the reverse method for that string

You can also pass the any number of arguments after specifying the first argument which is the method name.

For Example:-

class Test
  def sum (a,b)
  return a+b
  end
end

obj = Test.new
obj.send(:sum, 4 , 5) # Output =>9

5) define_method 

This method can be used to define new methods during run time.
For Example:-

 class A
   define_method("test") do ||
     puts "hello"
   end
 end
b= A.new
b.test #output => hello

Another Example:-
Here we are also passing some arguments to the newly created method

 class Array
   define_method(:aNewMethod, lambda{ |*args| puts( args.inspect) } end
[].aNewMethod([1,2,3]) #Ouput [1,2,3]

6) remove_method

You can also remove the existing methods or method you created by using the remove_method.

For Example:-

puts("hello".reverse)
class String
remove_method(:reverse)
end
puts("hello".reverse) # Output => undefined method error!

Note: - If a method with the same name is defined for an ancestor of that class, the ancestor class method is not removed

7) method_missing


There might be the times when you may try to execute a method which is not defined, this will throw an error and cause the program to exit. To handle this situation you can write your own method called method_missing with an argument to which the missing method name is assigned.

class Test
  def method_missing (method_name)
    puts("#{method_name} do not exist")
  end
end

obj = Test.new
obj.new_method # Output = > new_method do not exist

8) Frozen Object
 
Ruby provides you a facility to freeze an object so that it cant be modified further. The object once frozen cannot be modified, if tried to do so it will raise a TypeError exception.

variable = "Hello" 
variable << "world" 
variable.freeze 
variable << " !!!" # Error: "can't modify frozen string (TypeError)"

Please note once an object is frozen it cant be be undone.

Git branching and merging

1) git branch
This will list all the branches of your repository in your local.

2) git branch branchname
To create a new branch of your current working repository. Type following code:-

Eg:- git branch newbranch

This will create a new branch in your local..

3) git checkout
This command will switch you to the branch name you entered.

Eg:-git checkout newbranch

4) git checkout -b branchname
This will create a new branch and will switch you to the same.

5) git push origin branchname
Push the branch from local to the github repository.

6) git merge name-of-the-branch-to-be-merged
To merge two branches first checkout the branch to which you want to merge.

Suppose you want to merge the changes from branch A to branch B then do the following:
git checkout B
git merge A

7) git stash
Sometimes you want to switch to some other branch without committing and pushing the changes of the current branch. However you still want to save the changes you have done in that branch. This can be done with the help of stashing.

Suppose you are in branch A and you want to save its changes before switching to branch B.
git stash
This will save the status of the current working directory.

Now you can switch to other branch suppose B
git checkout B
Do the changes, commit it and push it.

Now switch back to branch A
git checkout A
git stash apply //to apply the status u saved before.
git stash apply --index //to reapply the staged changes