Design by ilias ahmed oracle ocp rhce,mssoft certified,front-enddevoloper

There are many react version

Components
In React, components make up the UI of the application. Components are
pieces of code that are reuseable and independent. Each component comes
with 1 or 2 of the following things:

 state: Data in a component expected to change over time

 props: Data that can be shared from parent component to child
component

Class Components
Class components contain a state and use a render() function to return JSX
markup. When defined, the class has to be an extension of the React.
Component class:
Hooks
In React, hooks are functions that give function components class-like abilities. These abilities
include:

 Using state
 Performing side effects

While there are standard React hooks, like useState() and useEffect(), there are also
custom-made hooks!

Most hooks are imported from the react library:

import React, { useState, useEffect } from "react";
JSX
JSX is a syntax extension of JavaScript that combines the JavaScript and
HTML-like syntax to provide highly functional, reusable markup. It’s used to
create DOM elements which are then rendered in the React DOM.

While not required in React, JSX provides a neat visual reqresentation of the
application’s UI.

A JavaScript file containing JSX will have to be compiled before it reaches a

web browser.

Syntax
JSX looks a lot like HTML:

const headerElement = <h1>This is a header</h1>;

In the block of code, we see the similarities between JSX syntax and HTML:
they both use the angle bracket opening <h1> and closing </h1> tags.

Under the hood, after it’s been processed to regular JavaScript, it looks like
this:

const headerElement = React.createElement("h1", "This is a header");
JavaScript code, such as variables and functions, can be used in JSX, as well:

import React from "react";
const App = () => {
  return (
    <React.Fragment>
      <button onClick={() => "The button was clicked!"}>Click!</button>
    </React.Fragment>
  );
};

JSX Attributes
The syntax of JSX attributes closely resembles that of HTML attributes.

const example = <h1 id="example">JSX Attributes</h1>;
In the block of code, inside of the opening tag of the <h1> JSX element, we
see an id attribute with the value "example".

Nested JSX Elements

In order for the code to compile, a JSX expression must have exactly one
outermost element. In the below block of code, the <a> tag is the outermost
element.

const myClasses = (
  <a href="https://www.codecademy.com">
    <h1>
      Sign Up!
    </h1>
  </a>
);

Multiline JSX Expression

A JSX expression that spans multiple lines must be wrapped in
parentheses ( and ).

const myList = (
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
);

Here, we see the opening parentheses on the same line as the constant
declaration, before the JSX expression begins. We see the closing parentheses
on the line following the end of the JSX expression.

JSX with .map() Method
The array method .map() comes up often in React. It’s good to get in the
habit of using it alongside JSX.

If you want to create a list of JSX elements from a given array,

then.map() over each element in the array, returning a list item for each one.

const strings = ['Home', 'Shop', 'About Me'];
const listItems = strings.map(string => <li>{string}</li>);
<ul>{listItems}</ul>
JSX Conditionals
JSX does not support if/else syntax in embedded JavaScript. There are three
ways to express conditionals for use with JSX elements:

Using Ternary Operator

Using ternary operator within curly braces in JSX:

const headline = (
  <h1>
    { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
  </h1>
);

Using if Statement
Using if/else statement outside of JSX element:

let text;
if (age >= drinkingAge) {
  text = 'Buy Drink';
}
else { 
  text = 'Do Teen Stuff';
}
const headline = <h1>{ text }</h1>
Using && Operator
Using && AND operator:

// Renders as empty div if length is 0
const unreadMessages = ['hello?', 'remember me!'];
const update = (
  <div>
    {unreadMessages.length > 0 &&
      <h1>
        You have {unreadMessages.length} unread messages.
      </h1>
    }
  </div>
);

Interested in contributing to Codecademy Docs? 

Props
In React, components are able to use props, or “properties”, to display and
share data throughout the application. In other words, props is the
information that gets passed from one component to another.

Parent components can pass props to their child components, but not the
other way around. Props can be many data types, including:

 Numbers
 Strings
 Functions
 Objects

Syntax
import React from 'react';
class ParentComponent extends React.Component {
  render() {
    return <ChildComponent prop1="Mike" prop2="piza">
  }
}
function ChildComponent(props) {
  return <h2>This is prop1: {props.prop1}. This is prop2: {props.prop2}.</h2>
}

this.props
Every component has something called props.

A component’s props is an object. It holds information about that

component.

To see a component’s props object, you use the expression this.props.

Here’s an example of this.props being used inside of a render method:

render() { 
  // Printing the props object
  console.log(this.props);
  return <h1>Hello world</h1>;
}

Pass props to a Component
You can pass information to a React component. How? By giving that
component an attribute:

<MyComponent foo="bar" />
Let’s say that you want to pass a component the message, "This is some
top secret info.". Here’s how you could do it:

<Example message="This is some top secret info." />

As you can see, to pass information to a component, you need a name for the
information that you want to pass.

In the above example, we used the name message. You can use any name
you want.

If you want to pass information that isn’t a string, then wrap that information
in curly braces. Here’s how you would pass an array:

<Greeting myInfo={["top", "secret", "lol"]} />

In this next example, we pass several pieces of information to <Greeting />.

The values that aren’t strings are wrapped in curly braces:

<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />
Displaying the Props
You will often want a component to display the information that you pass.

Here’s how to make a component display passed-in information:

1. Find the component class that is going to receive that information.

2. Include this.props.name-of-information in that component
class’s render method’s return statement.

import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}!</h1>;

Interested in contributing to Codecademy Docs? 

https://www.codecademy.com/resources/docs/react/props

https://www.codecademy.com/resources/docs/react/routing

https://www.codecademy.com/resources/docs/react/state
https://www.codecademy.com/resources/docs/react/virtual-dom

https://www.codecademy.com/resources/docs/react
https://www.codecademy.com/resources/docs/git

https://www.codecademy.com/resources/docs/git/branch

https://www.codecademy.com/resources/docs/git/clone

https://www.codecademy.com/resources/docs/git/commit

https://www.codecademy.com/resources/docs/git/init

https://www.codecademy.com/resources/docs/git/merge

https://www.codecademy.com/resources/docs/git/pull-requests

https://www.codecademy.com/resources/docs/git/pull

https://www.codecademy.com/resources/docs/git/push