Working with react-router-dom

react-04-router

React Router has been broken into three packages: react-router, react-router-dom, and react-router-native. For webpages you need to use react-router-dom
and for mobile apps you need to use react-router-native. react-router is exported in both of these components.

Installation
npm install --save react-router-dom  

Two types of Router

*  <BrowserRouter>
*  <HashRouter>

Router components only expect to receive a single child element. To work within this limitation, it is useful to create an component that renders the rest of your application

Changes in the main component
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((  
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))
Actual routing settings.
<Route path='/aboutus'/>  
<Route exact path='/aboutus'/>  
  • When the pathname is ‘/’, the path does not match
  • When the pathname is ‘/aboutus’ or ‘/aboutus/xyz’, the path matches
  • If you only want to match ‘/aboutus’, then you need to use the “exact” prop.

I have added these changes in my layout file

<Switch>  
  <Route exact path='/' component={Home}/>
  <Route path='/aboutus' component={AboutUs}/>
  <Route path='/contactus' component={ContactUs}/>
</Switch>  
add these changes in required component. I have added these in my Navbar.js
    <nav>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/aboutus'>About Us</Link></li>
        <li><Link to='/contactus'>Contact Us</Link></li>
      </ul>
    </nav>

Publish local repository to Github using https

Follow below steps to push local repository to github

Step#1.

Create new empty repository on github https://github.com/new
Please make sure you do not select Initialize this repository with a README checkbox

Step#2.

If you want to create new local repository

echo "# any comment you want to add" >> README.md
git init
git add .
#git add README.md  # this works as well
git commit -m "first commit"
git remote add origin https://github.com/XXX-your-username-XXX/XXX-your-repo-name-XXX.git
git push -u origin master 

Last step will ask you forĀ  Github userid and password.
It will take some time to upload your changes to github depending on size of your changes. Once this is completed, go yo github and verify.

JSX Basics and Advanced Concepts

Take a look at following code from official react documentation

const element = <h1>Hello, world!</h1>;  

This is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. It is recommended to use it with React to describe what the UI should look like.

It also means that JSX is not valid JavaScript. Web browsers can’t read it! That means file will have to be compiled before it reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

Example

A basic unit of JSX is called a JSX element. Example of JSX element

<h1>Hello world</h1>  

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go.

const navBar = <nav>I am a nav bar</nav>;  

Attributes

JSX elements can have attributes, just like HTML elements can.

A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value.

const panda = <img src="images/panda.jpg" alt="panda" width="500px" height="500px" />;  

You can nest JSX elements inside of other JSX elements, just like in HTML.
a JSX expression must have exactly one outermost element.
You can embed any JavaScript expression in JSX by wrapping it in curly braces.

Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

Rendering of JSX element

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));  
  • One special thing about ReactDOM.render() is that it only updates DOM elements that have changed and this is what makes React very fast.
Advanced JSX

Syntax in JSX is mostly the same as in HTML, but there are subtle differences.

  • In JSX, you can’t use the word class! You have to use className instead.
<h1 class="big">Hey</h1>  
<h1 className="big">Hey</h1>  

This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript. When JSX is compiled, className gets translated into class.

  • in JSX for you have to include slash for closing tag. in HTML closing slash is not madatory for tags such as ‘< image>’ and ‘< br>’
  • Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript. You need to use curlt braces to inject JavaScript inJSX. The curly braces themselves won’t be treated as JSX nor as JavaScript. They are markers that signal the beginning and end of a JavaScript injection into JSX.
const pi = (  
  <div>
    <h1>
      PI, YALL!
    </h1>
    <p>
      {Math.PI.toFixed(20)}
    </p>
  </div>
);

Variables can be used as JSX element properties as well.

const pics = {  
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
};
const sideLength = "200px";  
const owlCat = (  
  <img 
    src={pics.owlCat} 
    alt="Ghastly Abomination"
     height={sideLength}  />
);

Event Handling

JSX elements can have event listeners, just like HTML elements can. Programming in React means constantly working with event listeners.

<img onClick={myFunc} />  

An event listener attribute’s value should be a function. The above example would only work if myFunc were a valid function that had been defined elsewhere:

list of valid events can be found here

If Else

Tertiary operator

The ternary operator works the same way in React as it does in regular JavaScript. However, it shows up in React surprisingly often.

x ? y : z  

x is evaluated as either “true” or “false”.
If x is “true” tertiary operator returns y
If x is “false” tertiary operator returns z

Usage
const headline = (  
  <h1>
    { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
  </h1>
);

JSX Conditionals: &&

.map in JSX

The array method .map() comes up often in React. If you want to create a list of JSX elements, then .map() is often your best bet.

const strings = ['Home', 'Shop', 'About Me'];

const listItems = strings.map(string => <li>{string}</li>);

<ul>{listItems}</ul>  

Learning React

React is not like Angular where many decisions are already made for you. In React, you have to make many decisions. Also, learning react means you need to learn multiple components like react-router, Redux etc.

This could be overwhelming and it could get you confused. So I decided to take a step by step approach to learn React.

Step#1 : Learning Path

  • Learn ES6 (At least overview and few concept like map and reduce)
  • What is React
  • JSX
  • Virtual DOM
  • Rendering
  • Components
  • Props
  • State
  • Event handling
  • Routing
  • Redux

Step#2 : Resources : getting started

There are tons of material and don’t confuse yourself with these. Stick to Most reliable and widely use approach and chances of distraction will be very less.

Step#2 : Resources : advanced (to be updated)

This is no way complete list and I will keep updating it as and when I find relevant material. If you have come across any good material, please let me know.

Adding React code highligher to Sublime 3

When I started using sublime 3 for react, code highlighter was not working properly. File was recognised as JavaScript but due to JSX syntax colour highlighter got screwed up as you can see in below screenshot. Anything coming after first closing JSX tag is not recognised properly as ‘/’ is not escape character.

I tried to find about plugins but information available was very user freindly. Please follow following steps to add syntax highliter

Step#1
Got to Package control and copy requited python code.
For sublime 3 copy following code

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)  

Step#2
Go to View–> Show Console and it will open console in sublime text window.
Alternatively you can press Ctr+~ to open same window.
Now paste code copied in above step and hit enter.

Step#3
Go to Preference–>Package Control
OR press Ctr+Shift+P
and Select Package Control:Install Package

Step#4
This step will open a pop up window. Please type required package name in the window. e.g. I wanted to install ‘babel-sublime’ as this handles react code highligter as well.

Step#5
You are not done yet.
Now go to View–>Syntax–>Open all current extensions as..–>Babel–>JavaScript(babel)

And here is the result.

If you compare this with first screenshot, you can see JSX code is highlighted properly after installing and activating ‘Babel-Sublime’

Please do let me know if you run into any issues.