React js is a javascript library for building user interfaces. Reach js has two categories –
- React for web
- React native
Prerequisite
- Html
- Css
- Javascript
Start to react we need to understand the following things –
React JSX
JSX means JavaScript XML. Using JSX we can write HTML in React by which we can easily write HTML inside react.
Component
It’s a reusable code component. They return HTML code. It can be two type –
- Function component
- Class component
Add script inside head tag
The first step to work on react js we need to add script inside our head tag.
<!-- Add react js library -->
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
But here we will use class component
Get Started
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello World!</h1>
}
}
ReactDOM.render(<p>Hallo</p>, document.getElementById('app'));
</script>
</body>
</html>
Data passing using prop
A prop is just like a function argument and we can pass them to a component. It is made the component more dynamic and powerful. like in the previous example if we want to show dynamic content then we use like –
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>{this.props.msg}</h1>
}
}
ReactDOM.render(<Hallo msg="Hi, Welcome to react js"/>, document.getElementById('app'));
</script>
Now you can see we have msg attribute in Hello component and we are passing message though this attribute so by which we can create a more powerful component in react js.
We can use multiple attributes or prop and those props are read only
Componets inside component
In react, js component can be nested. So by which we can create a lot of small components to building the main component. It’s useful because of; if we have some bugs on our system then we know the component and we will focus on related component witch will save development time.
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>{this.props.msg}</h1>
}
}
class HelloSection extends React.Component {
render() {
return (
<div>
<Hallo msg="Hi, Welcome to react js"/>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
</div>
);
}
}
ReactDOM.render(<HelloSection />, document.getElementById('app'));
</script>
You can see we have Hello component and we are using Hello component inside HelloSection component.
State in react js
The state is just like two way binding of angular js. Suppose that you have an object and you are using that object into your component and somehow the value of that variable or object changed so that value should be change on your component the prop doesn’t work like that but using state your component rerender or change the value of the component.
<script type="text/babel">
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "I am stage and i will change",
};
}
render() {
return <h1>{this.state.msg}</h1>
}
}
ReactDOM.render(<Hallo />, document.getElementById('app'));
</script>
It’s just a simple example which shows how to use state in react now we will see a rerender property of state using event.
Use of Event in react js
<script type="text/babel">
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "I am stage and i will change",
};
}
msgChange = () => {
this.setState({msg: "You have changed the message."});
}
render() {
return (
<div>
<h1>{this.state.msg}</h1>
<button type="button" onClick={this.msgChange}>Change Msg</button>
</div>
)
}
}
ReactDOM.render(<Hallo />, document.getElementById('app'));
</script>
setState() is a method whitch change the value of state object.
