The fundamental concept of React.js

React is a flexible, efficient, open-source Javascript library. It was developed by Facebook (2013) for building user interfaces.

It allows us to create a complex UI by making components. components are reuseble

1. JSX in React

Usually JSXjust syntactic sugar for React.createElement(component, props, ...children)

The JSX code :

<div>My Name is Hossain</div>

Compile into :

React.createElement("div", null, "My Name is Hossain");

2. JavaScript Expressions as Props

We can pass any javascript expression in props with {} . Flowing the example below :

<Component sum={5 + 9 + 1} />

For Component , the have value props.sum will be 15 . because the expression is 5 + 6 + 1 .

3. String Literals

We can pass a string as a prop. there two JSX expressions are equivalent. it the same as the HTML attribute.

<Component name="Hossain" />
<Component name={'Hossain'} />

4. Spread Attributes

We can already have as props as an object, and we went to pass props in JSX. we can use ... “spread” operator to pass a props objects.

const App = () => {
  const props = {name: 'Hossain', age: 20};
  
  return <Person {...props} />
}

5. Children in JSX

You can pass more JSX as children props.children or Display nested component as same as HTML.

<Container>
  <App1 />
  <App2 />
</Container>

6. defaultProps

defaultProps can be defined property in class component. it set default props in the class . This is used for undefind but not use null

class Container extends React.Component {
  // ...
}Container.defaultProps = {
  color: 'red'
};

7. Use the Production Build

If you are not sure your build process set up currently, you can install React Developer Tools for Chrome. if you visit your site with React production mood, you can see the React Developer Tools background color is dark. but your site is development mood, you can see the React Developer Tools background color is red. if you build your site with create-react-app , you can be flowing this commend:

npm run build
or 
yarn build

8. State

Until now, we can use static data, but when data is changing for state change, we can use useState the form React hooks . flowing the example blew: useState is a function. Its default value of the count value. if setCount() to change state value. count value is changing.

const App = () => {
  [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1)
  }
  
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

9. Conditional Rendering:

In JSX possible to use the ternary operator for conditional rendering.

<div>{name ? name : 'What is your name?'}</div>

10. Handling Events

Handling events to react element is very similar to handle events in the DOM element. there are some syntax deferent

• React element name use camelCase.
• With JSX you can pass a function as an event handler, rather than a string.

<button onClick={() => console.log('Clicked me')}>
    Click me
</button>