Introduction to React.js | Miscellaneous Topics

Some important points: To pass objects o1 and o2 from one component tyo another: <ParentComponent> <ChildComponent o1={v1} o2={v2} /> </ParentComponent> Here, o1 and o2 are accessed in the child component as "this.props.o1" and "this.props.o2" To create code reusability and prevent error progataion whilst using the features of unit testing, use functional components which take one or more arguments as props. For example, to define three buttons using the same set of code,

function button(props) {
	return (
			<button type="button">{this.props.color}</button>
	)
};
export default button;

If the color is given, a button will ebev created with the text denoted by colour.
The window,document and history objects are avauibale in the arrow and normal functions for both class compoments and functional components.
The event object is available when an event is triggered.
For example to add a link from a button, use <button type="button" onClick={this.myFunc}></button>

The "this" variable reopresents the bUTTON JSX element and on click of the button, the myFunc variable will be called.
If you specify no argement for default arguments, this argments should be passed froom left to right and using the "=" operator
To import a component in a file, you need to export it using a export default statement
To access nested components like Accessing the child component written inside Parent component,
use <Parent.Child>
The functional components contain a return statement which contain a JSX code
For example to include a Javascript code in a react file using a functional component use

  
  function App(props) {
  	return (
    	<script type="text/javascript">Some code here</script>
 	);
  }
  
  

There is a package available in npm that is used to inclde js(Javascript) files in render function the name of the package is react-helmet and the name of the component is Helmet.

The index.js file in the src folder is excuted when creating an application using the create-react-app.

A node_modules folder will be created when the npm install command is called

There are few requirements in the Raect.js library. A node.js backend server and node package manager(npm) which resolves and manages all the dependencies.

The code is as follows on the command line:

  
  npm install;
  npm update;
  npm create-react-app app;
  npm start;
  
  

The default server name is localhost.
The default port number is 3000. It is changeable

The Virtual DOM

The virtual DOM updates only that part of the DOM which is updated by the change if state variable and the virtual DOM is stored in the RAM (in-memory or Random Access Memory).

axios library

axios library is used to make cross site AJAX calls

  
  import axios from "axios";
  axios.get({
  	method: "POST",
 	url: url,
    data: form.serialize()
  }).
  	then(function(req,res){}).
    error({});
  
  
  

Miscellaneous examples

The then function is called when the server returns a valid response and error and if there is an error while processing the request it supports both GET and POST methods

Namespace collisions in JSX

Instead of class attribute in HTML for JSX elements is className attribute abd forName attribute

Since class and for name will collide with the htn, markup

To include only name of the component in the .jsx file

import{React,Component} from 'react';

Packages required
The 'react' and 'react-dom' packages are required to be implemented in the the index.js file as it is the first file wiill be exceuted
The "react-dom" package DOM package contains renderDOM() method. This is the virtual in-memory DOM instead of the DOM

To use react in strict mode use

<React.StrictMode> To maintain state across multiple HTTP requests in a session, use the REDUX state manager