The fundamental concept of React.js

1. JSX in React

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

2. JavaScript Expressions as Props

<Component sum={5 + 9 + 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>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store