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

The JSX code :

<div>My Name is Hossain</div>

Compile into :

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

2. JavaScript Expressions as Props

<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

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

4. Spread Attributes

const App = () => {
const props = {name: 'Hossain', age: 20};

return <Person {...props} />
}

5. Children in JSX

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

6. defaultProps

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

7. Use the Production Build

npm run build
or
yarn build

8. State

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:

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

10. Handling Events

  • 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>

Throughout my career as a front end developer I've emphasized the importance of scalable and well documented.