Tag: routing

With performance and lite weight Reactjs is able to pull many frontend developers to go with this library. Even Google and job trends show Reactjs library is on the boom and overtaking the other frameworks and libraries.

React core concepts that help you to kick-start building the Reactjs application.

• Stateless & Stateful Components
• State
• Props
• Routing

1. Stateless & Stateful Components

Stateless components are functional components only receives the props that are received from a parent and returns the element.  In addition, Stateless components cannot change the component state’s as well as they don’t have control over the methods of React’s life cycle.

Sample stateless component

import React from 'react';

const Intro = props => (
<p className="App-intro"> {props.message} </p> 
);

export default Intro;

Stateful components are class components having access to the lifecycle of the component.

Sample stateful component:

import React, { Component } from 'react';
import './App.css';
import Intro from '../Intro';
import Main from '../Main';

class App extends Component {

render() {
 return (

  <div className="App">
   <header className="App-header">
   <h1 className="App-title">Web Series List</h1>
   </header>
   <Main />
  </div>
 );
}
}

export default App;

2. State

State holds the information that helps in managing the components internal state that affects the rendered output.  In the below example we are using a setState method to update the state of our component on change of search text.

import React, { Component } from 'react';
import 'whatwg-fetch';
import SeriesList from '../../components/SeriesList';
import Intro from '../../components/Intro';

class Series extends Component {

  state = {
   series: [],
   seriesName: '',
   isFetching: false
  }

  onSeriesInputChange = (e) => {
    this.setState({seriesName: e.target.value, isFetching: true});
    fetch(`http://api.tvmaze.com/search/shows?q=${e.target.value}`)
    .then(response => response.json())
    .then(json => this.setState({series: json, isFetching: false}));
  }

render() {
  return (
   <div>
     <Intro message="Welcome to web series" />
      Total: {this.state.series.length}
    <div>
    <input type="text" onChange={this.onSeriesInputChange} placeholder="Search web series" />
    </div>
    {
     this.state.series.length ===0 &&
     this.state.seriesName.trim() === '' && 
     !this.state.isFetching && <p>No results found</p>
    }
    {
     this.state.isFetching && <p>Loading...</p> 
    }
    <SeriesList list={this.state.series} /> 
   </div>
  )
  }
}

export default Series;

3. Props

Similar to sate props also hold information but this information is passed to the child component from its parent as props. Props nothing but properties. For example below we are passing the message as a prop to the Intro component from its parent.

 <Intro message="Welcome to web series" />

import React from 'react';

const Intro = props => (
<p className="App-intro"> {props.message} </p> 
);

export default Intro;

4. Routing

‘react-router-dom’ is a library built on top of React that helps in achieving routing functionality in react applications. You can install it using npm command ‘npm install react-router-dom’.

Imported BrowserRouter from the library and place the main app component inside it.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter} from 'react-router-dom';

ReactDOM.render(
<BrowserRouter><Main/></BrowserRouter>, 
document.getElementById('root')
);
registerServiceWorker();

Component route details placed inside the switch component.

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import About from '../About';

const Main = (props) => (
<Switch>
<Route exact path="/about" component= {About} />
</Switch>
);

export default Main;

Prerequisites: HTML, CSS & Javascript are the technologies once should know to build or learn a react app.