React

It is a javascript library used to build user interfaces.

Javascript library means a javascript file that contains some
predefined functions.
Jordan Walke developed React.
React is used to build user interfaces.
To make a React application we have to use two libraries: React and React-dom.

createElement() :
The first argument to React.createElement() method is a string that represents the HTML
element type we want to create.
The second argument to React.createElement() method is a JavaScript object that contains
all the attributes we want the HTML element to have.

The third argument to React.createElement() method is a string that represents the

content of an element.
const heading = React.createElement(
    'h1',
    { id : 'abc'},
    'This is a heading.'
);
const paragraph = React.createElement(
    'p',
    null,
    'This is a test paragraph which is created by React. This paragraph has no
attribute and is contained inside a div which is also created by React.'
  );
 
  const box = React.createElement(
    'div',
    { className: 'box'},
    paragraph,
    heading
  );

render() : it is used to render and display the react element on the

web page.
The ReactDOM.render() method is used to render and display a React element object on the
web page.
The first argument to the ReactDOM.render() method is the React element (or JavaScript
object), and the second argument is the HTML element from the DOM where we want to
render the first argument.
 React
ReactDOM.render(
    box,
 
    document.getElementById('react-container')
  );

To add a class to a React element, we will have to use className instead of class, as class
is a reserved keyword in JavaScript which has some special meaning.

JSX : It is an extension to the JS that is used with react to create

HTML elements.
JSX allows us to write in JavaScript in a syntax that resembles HTML.
SX is not a valid JavaScript. Browsers understand only JavaScript and not JSX. Babel
converts JSX into JavaScript for browsers to understand.
Whenever we have more than one line of JSX code, we should add them inside brackets.

const heading = <h1 id='abc'>This is a heading.</h1>;

const paragraph = <p>This is a test paragraph which is created by React. This
paragraph has no attribute and is contained inside a div which is also created
by React.</p>;
const box = (
      <div className='box'>
    <h1 id='abc'>This is a heading.</h1>
    <p>This is a test paragraph which is created by React. This paragraph has
no attribute and is contained inside a div which is also created by React.</p>
    </div>
  );

JSX Expression:
We can write JavaScript inside JSX by writing any valid JavaScript expressions inside curly
braces within JSX.

const name = "Joe";

  const box = (
    <div className='box'>
    <h1 id='abc'>This is a {name} heading age {13 + 25}.</h1>
    <p>This is a test paragraph which is created by React. This paragraph has
no attribute and is contained inside a div which is also created by React.</p>
    </div>
  );
 React
//attribute
const att = 'abc';
    const name = "Joe";
  const box = (
    <div className='box'>
    <h1 id={att}>This is a {name} heading age {13 + 25}.</h1>
    <p>This is a test paragraph which is created by React. This paragraph has
no attribute and is contained inside a div which is also created by React.</p>
    </div>
  );

Component :
A component is a piece of UI that we can reuse. A component holds its functionalities
together, so that it can be seen as an independent unit. A component should ideally address
a specific concern and not hold too many responsibilities.
We should choose a component such that it is as small as possible and ideally only one
responsibility should be associated with one component.

function Box() {
return (
<div className='box'>
I am a box
</div>
);
}

const Box = () => <div className> I am a box </div>

const Box = () => {

return (
<div className=”box”>
I am a box
</div>
);
}
 React
We call or use a component like a self closing HTML element, but with first letter as capital
i.e <Component />.

While defining a component, we return some JSX code which represents some HTML code.
The JSX eventually gets converted to React.createElement() function call that returns a
React Element.

Props: props or properties of a component are information that can

be passed to a component.
We can access it using (.) dot operator i.e prop.name
Props are uneditable.
Props are information that can be passed to a component. Props can be used by a
component to customise its content. Props are passed to components like HTML attributes.
Props are always passed from a parent component to a child component.
Since, we include components using custom tags, props are passed to components like
HTML attributes. <Component propsName="stringValue" /> is true syntax.
The component function gets a default argument in the form of an object that contains all the
props being passed to the component.
Since props are variables, they can be used inside the JSX using the JSX expression, that
is, inside the curly braces.

const Box = (props) =>{

    return(
      <div className='box'>
        <h1 id='abc'>This is a {name} {props.head} heading age {13 + 25}.</h1>
        <p>This is a {props.head} paragraph which is created by React. This
{props.para} paragraph has no attribute and is contained inside a div which is
also created by React.</p>
      </div>
    );
  };
  const App = () =>{
    return(
      <div className='row'>
      <div className="col">
        <Box head = 'first ' para ="1st"/>
      </div>
      <div className="col">
        <Box head = 'second ' para="2nd"/>
      </div>
    </div>
    );
  };
 React
  ReactDOM.render(
    <App />,
    // <Box/>,
    document.getElementById('react-container')
  );

States : these are information associated with a componenet that

allows us to create dynamic and interactive components.
States are information, associated with a component, that can change. States allow us to
create components that are dynamic and interactive. States are only available to class
components.
The Class Components must extend React.Component.
Inside the class component, we must define the render() method.
We cannot change the state directly. We have to use React's setState() method to make any
changes to state variables.
 React has a built-in event handler for click - onClick. React event handlers are similar to
JavaScript event handlers, except that they are written in camel case.

class Box extends React.Component{

    state = {color:'black'};
    changecolor(color){
      console.log(color);
      this.setState({color : color});
    }
    render(){
      return(
        <div className='box'>
          <h1 className={this.state.color}>This is a
{this.props.head} .</h1>//must use props
          <p>This is a {this.props.head} paragraph which is created by React.
This paragraph has no attribute and is contained inside a div which is also
created by React.</p>
          <button onClick={()=>this.changecolor('red')}>Red</button>
          <button onClick={()=>this.changecolor('blue')}>Blue</button>
          <button onClick={()=>this.changecolor('yellow')}>Yellow</button>
          <button onClick={()=>this.changecolor('red')}>Green</button>
        </div>
      );
    }
  };
  const App = () =>{
    return(
      <div className='row'>
      <div className="col">
 React
        <Box head = 'first heading' />
      </div>
      <div className="col">
        <Box head = 'second heading' />
      </div>
      <div className="col">
        <Box head = 'third heading' />
      </div>
      <div className="col">
        <Box head = 'fourth heading' />
      </div>
    </div>
    );
  };
  ReactDOM.render(
    <App />,
    document.getElementById('react-container')
  );

We can categorise states mainly into two types: Application State and Component State.
When states are defined in the top most component, we call it application State.
States can be passed down the component tree from a top level component to the child
components via props. If states are defined to a child level component, there is no way it can
be shared to other top level components. States should be kept together and managed as
high up in the application as possible, so that all components have access to it.
We have used the map() method to create JSX tags out of each element of the array. The
map() method creates a new array populated with the results of calling a provided function
on every element in the calling array.
To call a function from a child component that is defined in the parent component, the
function is passed down from the parent component to the child component via props.
 React
We install Create React App from Node Package Manager (npm).
The npm start command uses Babel to convert all the JSX code into browser
understandable JavaScript code. It temporarily starts a web server of its own, runs the code,
and displays the output on the browser.
Each module must contain "import React from 'react';" at the beginning of the file so that we
can use functions related to React.
To import a module into another module, we have to add this line at the beginning of the file:
import component_name from 'relative/path/of/the/file';
 React
React is a JavaScript library.
React is a core library and React-dom is a website specific.
Instead of writing HTML directly, we will be writing some JavaScript code that uses the
functions provided by React library to create HTML elements for our web page.
React.createElement() is used to create a React element.
As we are dealing with a JSX file - so we must tell it to our browser. We will change the type
text/javascript to text/babel so that the browser understands that it needs to first convert the
JSX file into JavaScript using the Babel compiler.
JSX accepts any valid JavaScript expressions if we put them inside curly braces.
{3+2} is a JavaScript expression that evaluates to 5.
The React.createElement() method takes the nested elements as arguments.
We have to pass the top level component to the ReactDOM.render() method.
We can define a function using both a function and a class.
We have to write the name of the component in a capitalized form, so that when we use a
component the browser can distinguish it with other HTML elements.
Since, we include components using custom tags and not with function calls, props are
passed to components like HTML attributes.
Since props are variables, they can be used inside the JSX using the JSX expression, that
is, inside the curly braces.
Props are uneditable.
Whenever a component needs a state, we must define it as a Class component.
States need to be assigned explicitly in a Class Component, but Props are automatically
assigned.
When we pass a function to another component via props, we must bind the function to this
object. This is done, so that, inside the function this should continue to refer to the parent
component object.
A class component must extend React.component. A class component must have the
render() method. And the render() method should contain a return statement to return the
required JSX.
Each module must contain "export default component_name" at the end of the file so that
these modules can be imported and used into other modules.
To build a React project, we use npm run build from inside the project folder.
 React
We have used the <nav> tag as per Bootstrap's recommendation to create the header.
We have used Bootstrap's Breadcrumb to show the user's location on the website.
We have used Bootstrap's Carousel in the property details page to display property images.
The properties and the cities tables have one to many relationship. One property can be
present in only one city, whereas one city can have multiple properties.
We created a separate table to store the properties 'interested users' information:
interested_users_properties.
The logout functionality doesn't need Ajax, it simply is a click away to logout.php page.
We used the base_path variable inside utils.js to add domain to the urls based on
development and production environment.

To allow api calls from other websites, we added these lines to

get_properties_by_city.php:
header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
We used componentDidMount() function in React that is invoked immediately after a
component is mounted.
We used the fetch() function in React to initiate Ajax requests.