React JS

React Js

React JS is a javascript library that used to produce HTML that shown to the user in the web browser. When we write react code we will be writing individual components or views.

Components

Components are snippets of codes that produce HTML. When we write react code, we write multiple different components, and we nest this component together, one inside the other, in different fashions, to make a really complex application relatively simple.

Components are a collection of the javascript function that produces HTML. so we writing components, we will write in javascript but it alternatively produces HTML.

Modern Javascript Tooling

To learn more about ES6 please refer here.

const App = function() {

    return <div>Hi</div>

}

JSX is a subset of or dialect of javascript, allows us to write that looks like HTML inside of a javascript, but really behind the scene just javascript. So webpack and babel do some level of transpile to "vanilla javascript" show in the browser.

Writing a simple component

Types of component

1. Functional component

2. Class based component

  

Ex: Functional component

import React from 'react';

const SearchBar = () => { // Sometimes called as federal function

return <input />;

}

export default SearchBar;

Ex: Class-based component

import React, { Component } from 'react'; // Import react and pull off the property 'Component' as a variable called component.

class SearchBar extends Component { // Enhancing the behaviour by extending React base component class

render() { // Every class based component must have a render method.

return <input />

}

}

export default SearchBar;

State

is a plain javascript object that used to record and react to user events. Each class-based component that we define, has its own state object. Whenever a state is changed, the component immediately re-renders, also force all of its children to re-render as well.

Before we use ever use state inside a component, we need to initialise the state object. To initialise state we set the property state to a plain javascript object inside the class's constructor method. Each instance of a class-based component has its own copy of state. We initialise a state by defining a 'constructor'

 method and setting the state as 'this.state' inside it.

A functional component doesn't have a state, only class-based component do.

All the javascript classes have a special function called the constructor. A constructor function is the first and the only function called automatically, whenever a new instance of the class is created.

A controlled field is a form element like an input, its value is set by the state rather than the other way around. When input changes, it causes the state to be updated. Input tells the state that what it should be. When input changing tells the state to change.

class SearchBar extends Component { // Enhancing the behaviour by extending React base component class

// 'Component' itself has its own 'constructor' function

constructor(props) {

super(props); // when we define a method, that is already defined in its parent class (which is 'Component')

// we call that parent method in the parent class by calling 'super()'

this.state = { term: ''}; // creating a new object and assign it to 'this.state'

// object we pass also contains 'properties' that we want to record in the state ( here 'term': search term )

}

render() { // Every class based component must have a render method.

return <input onChange={event => this.setState({ term: event.target.value })} /> // state value can change only with 'this.setstae()'

}

}

Downwards dataflow : only the most parent component in an application should be responsible for fetching data. Data may be from API or Flux framework (redux) even.

class App extends Component {

constructor(props) {

super(props)

this.state = { videos: [] };

YTSearch({ key: API_KEY, term: 'flowers' }, (videos) => {

this.setState({ videos }) // this.setState({ videos: videos})

});

}

render() {

return (

<div>

<SearchBar />

</div>

)

}

}

Passing data from the parent component 'App' to the child component is really straight forward. we pass a list of items, just by defining a property in the JSX tag. This is called as 'passing props' in react. Any time the app re-renders (when we set state to the component), child component will get new list of items.

render() {

return (

<div>

<VideoList videos={this.state.videos} />

</div>

)

}

When we use the functional component, the props object will arrive as an argument for the function.

const VideoList = (props) => {

return (

<div>

{props.videos.length}

</div>

)

}

Building and passing list item into list by using child component.

import React from 'react';

import VideoListItem from './video_list_item'

const VideoList = (props) => {

const videoItems = props.videos.map((video) => {

return <VideoListItem video={video} />

})

return (

<ul >

{videoItems}

</ul>

)

}

export default VideoList;