About React Js

1. What is JSX?
   JSX is JavaScript XML.
   JXS allows writing HTML code in React.
   React suggested to use JSX to describe what the UI should look like
2. How JSX works?
   JSX is a syntax of regular JavaScript and it’s used to create React elements in an easy way.

for example:

//JSX code
<MyButton color="green">
  Click here
</MyButton>//how browser compile it
React.createElement(
  MyButton,
  {color: 'green'},
  'Click here'
)

3. Why JSX called syntactic sugar?
In react, JSX is syntactical sugar.
Syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express code.
It makes the language sweeter for human or developer use.
for example:

//JSX:
const headerTag= <h1>React make my life easier</h1>;
ReactDOM.render(headerTag, document.getElementById('root'));//Without JSX:
const myHeader= React.createElement('h1', {}, 'without JSX!');
ReactDOM.render(myHeader, document.getElementById('root'));

So, it’s easy to write code with JSX, that’s why JSX is called syntactical sugar.

4. Props in JSX!
In JSX, pass values using props

for example :

<MyComponent total={10} />

the value total will be used like the below example:

function evenOrOdd(props) {let numberType;if (props.number % 2 == 0) {numberType = `<p>${props.number} is even number</p>`;}else {numberType = `<p>${props.number} is odd number</p>`;}return <div>{props.number} is an {numberType} number</div>;}

5. Default Props:
default props use as the component class property itself and it’s used for undefined props, not null props
for example:

class MyButton extends React.Component {
// do something
}
MyButton.defaultProps = {
color: ‘green’
};// If props.color is not provided
render() {
  return <MyButton />; // props.color will be set to green
}// If props.color is set to null
render() {
  return <MyButton color={null} />; // props.color will set null
}

7. React Library ?
Angular or Vue is Framework where React is a Iibrary .
It focuses on helping you to build user interfaces using components.
It doesn’t help to do server communication, translations, routing and etc,
that’s why React is a Library

8. React is declarative:
In React app you use declarative style to write your components like below code:

<MyComponent value={this.state.value} onChange={this.handleChange}>
{
  array.map(element => <li value={element.value}>
                         {element.text}
                       </li>)
}
</MyComponent>

9. Data pass from one to another component:
In React app you can pass data by using props object and it will go down like below code:
Parent Component

<div>
 <MyComponent color={black}/>
</div>

props are available under this.props. In the child component like below code:

const MyComponent = React.createClass({
    render() {
        const { color } = this.props
        const headingStyle = { color: color }
        return (
            <div>
                <h1 style={headingStyle}>Hello world!</h1>
            </div>
        )
    }
})

10. React useState:
to set JSX dynamic or static value , useState hook will work like a magic
you can easily set JSX value with using DOM API , Just set value and it will work under “ root” id, just like below code:

const AllPost = () => {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => setPosts(data))
    }, [])
    return (
        <div>
            {
                posts.map(post => <div>{post.title}</div>)
            }
        </div>
    );
};