ReactJS-learning-Brad.txt

* ReactJS is client side Javascript library
* Created & Maintained by Facebook.
* Used to build dynamic user interfaes.
* Component based library.
* React is "technically" a library because it doesn't include a 'router' OR 'Http' like Angular does and so on but it is often refered to as a Framework as it is used for many of the same reasons as a framework.
* 







* Components can have "props" & "state"
* Class components can have "state" but "Functional components" could not. But "Hooks" allow us to have "State" within "Functional components".
* Class component example
	import React, { Component, Fragment } from "react";
	export default class App extends Component {
		render(){
			return (
				<React.Fragment>
					<p> Hello World </p>
				</React.Fragment>
			);
		}
	}

* Functional component example
	import React, { Fragment } from "react";
	export default App() {
		return (
			<React.Fragment>
				<p> Hello World </p>
			</React.Fragment>
		);
	}

* We should use "className" in place of "class" with HTML tags. And in "label" tag we should use "htmlFor" in place of "for".

* We should use "this." whenver we call a function which is outside of "render" method.
	export default class App extends Component {

		render(){
			return (
				<React.Fragment>
					<p> Hello World </p>
					{ this.foo() }
				</React.Fragment>
			);

			foo(){
				return "Hello";
			}
		}
	}

	But if the function is inside of "render" method then we no need to use "this." while calling the function in JSX.

* We can create "defaultProps" as below
	-> static defaultProps = {
		title: "Github Finder",
		icon: "fab fa-github"
	}

* In addition to "defaultProps" we also have "PropTypes". In order to use "PropTypes" we need to import it as below.
	-> import PropTypes from "prop-types";

	-> static propTypes = {
		title: PropTypes.string.isRequired,
		icon: PropTypes.string.isRequired
	}



------------------------------------------------------------------------------------------

* We should create "defaultProps" & "defaultProps" in "class components" as below
	import React, { Component } from "react";
	import PropTypes from "prop-types";

	export default UserItem extends Component {

		const { login, avatarUrl } = this.props.user;

		static defaultProps = {
			login: "Github Finder",
			avatarUrl: "https://www.google.com/"
		}

		static propTypes = {
			login: PropTypes.string.isRequired,
			avatarUrl: PropTypes.string.isRequired
		}

		render(){
			return (
				<React.Fragment>
					<p> Hello World </p>
					Name is = { login }
					Avatar URL is = { avatarUrl }
				</React.Fragment>
			);
		}
	}




* We should create "defaultProps" & "defaultProps" in "functional components" as below
	import React from "react";
	import PropTypes from "prop-types";

	export const UserItem = props => (

		const { login, avatarUrl } = props.user;

		return (
			<React.Fragment>
				<p> Hello World </p>
				Name is = { login }
				Avatar URL is = { avatarUrl }
			</React.Fragment>
		);
	);

	UserItem.defaultProps = {
		login: "Github Finder",
		avatarUrl: "https://www.google.com/"
	}

	UserItem.propTypes = {
		login: PropTypes.string.isRequired,
		avatarUrl: PropTypes.string.isRequired
	}



Note: We can destructure the "props" variables as below as well
export default const UserItem = ({ user: { login, avatarUrl }})


------------------------------------------------------------------------------------------

* 















============================================== Errors =============================================
* We will get "parse" error when we don't wrap all the tags in a single tag while returning.
* 






===================================================================================================

React JS topics:
---------------------------------------------------------------------------------------------------
* Class based components
* Stateless functional components
* Context API
* React Redux
* React Hooks
* Lifecycle
* PropTypes
* defaultProps
* 



**************************************** V2 *****************************************************
* JSX elements are wrapped in an enclosing tag.
* 


'Class component' hooks
--------------------------------------
* state
* componentDidMount
* render
* componentDidUpdate
* componentWillUnmount




'Functional component' hooks
--------------------------------------
* useState
* useEffect --> It is an arrow functions without paramaeters
useEffect(() => {
	
	// eslint-disable-next-line
}, []);
* useReducer
* useContext





* In 'Class component' we use 'state' whereas in 'Functional component' we use 'useState' hook
* In 'Class component' we use 'componentDidMount' whereas in 'Functional component' we use 'useEffect' hook
* In 'Class component', 'propTypes' will be diclared inside of the class whereas in 'Functional component' 'propTypes' will be diclared outside of the function with function name.
	User.propTypes = {}
* In 'Functional component' there will be no 'render' method & props will be passed as arguments
const User = ({name, id}) => {}
* 








*********************************** Imports & shortcuts************************************
* imrc
* imr
* cc
* fc


* import React, { Component, createContext } from 'react';
* import { BrowserRouter, Route, Link, NavLink, withRouter } from 'react-router-dom';


export const ThemeContext = createContext();





*******************************************************************************************



******************************** The NetNinja *********************************************
* 'npx' comes with npm 5.2+ versions.
* Context API - Clean & easy way to share state between components
* 'Context API' is alternative to 'Redux' we can say
* 'contextType' will be used in 'Class component' but not in 'Functional component'.
* 'useEffect()' will be triggered everytime data changes/renders & We can use 'useEffect()' method as many times as want.
	useEffect(() => {
		console.log('Songs changed');
	}, [songs]);
	useEffect(() => {
		console.log('Age changed');
	}, [age]);

* Use 'pascalcase' while creating 'context' files. Ex: BookContext.js
* Use 'camelcase' while creating 'reducer' files. Ex: bookReducer.js

* We have two types of components
	-> Container components - Sometimes called as 'class based components'
		* Contains state
		* Contains life-cycle hooks
		* Not concerned with UI
		* Use classes to create
	-> UI components - Sometimes called as 'stateless'/'Functional components'/'UI' components
		* Don't contain state
		* Receive data from 'props'
		* Only concerned with UI
		* Use functions to create



* <button onClick={() => {deleteNinja(ninja.id)}}> Delete Ninja </button>


Redux
**************************************************************************************
* First React creats a 'Virtual DOM' and renders in to the DOM. And React keep watches the changes and if any mondification occures, then React compares that change with 'Virtual DOM' and then reders that particular change to the DOM.
* A layer on-top of React
* Components look like HTML template (actually JSX)
* They can contain 'state' (data or UI state)
* They also can contain javascript for functionality


* Only 'Class based components' contain 'Life-cycle' hooks but not 'Functional components'

* 'axios' is a HTTP request library.

* 


Routing Example:
******************************************************************************************
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

class App extends Component {
	render(){
		return (
			<BrowserRouter>
				<div className='App'>
					<Navbar />
					<Route exact path='/' component={Home} />
					<Route exact path='/about' component={About} />
					<Route exact path='/contact' component={Contact} />
				</div>
			</BrowserRouter>
		);
	}
}

export default App;

   -------------------------------------------------------------
import { Link, NavLink, withRouter } from 'react-router-dom';

const Navbar = (props) => {

	console.log(props);
	setTimeout(() => {
		props.history.push('/about');
	}, 2000);

	return (
		<ul>
			<li><Link to='/'>Home</Link>
			<li><Link to='/about'>About</Link>
			<li><Link to='/contact'>Contact</Link>
		</ul>
	);
}

export default withRouter(Navbar);



* If we use '<NavLink>' instead of '<Link>' tag, '<NavLink>' adds a class named 'active'.
* React router automatically applies some properties(Ex; history) to the 'props' by default on every route.

* But we can add those default props with 'Higher order component' which is 'withRouter'
	

******************************************************************************************
-------------- React, Redux & Firebase App Tutorial - The Net Ninja ----------------------
*