"The secret to getting ahead is getting started."
― Mark Twain
Introduction
Hello and welcome to my 3rd post, hope everyone is doing well. The content for this post is what do you need to know in order to code with ReactJS
- react is a JavaScript library for building interfaces.
- The basic of react is understanding state and props
pre-requisite
- javascript
- html
State
- state is a built-in React object that is used to contain data or information about the component. A component state can change over time
class Greetings extends React.Component {
state = {
greetings:"Hello"
}
updateName(){
this.setState({greetings: Welcome to ReactJS})
}
render() {
return(
<div>
{this.state.greetings}
</div>
)
}
}
- this.setState() is used to change the value of the state object
Props
- props is being used for passing data from one component to another
import React, { Component } from 'react';
import FirstChild from './firstChild'; // we need to import the child component first
class ParentComponent extends Component {
state={
name:"Ali"
}
render() {
return (
<h1>I'm the parent component.</h1>;
<FirstChild
name={this.state.name}
/>
)
}
}
export default ParentComponent;
- FirstChild component
import React from 'react';
const FirstChild = () => {
return <p>{this.props.name}</p>
}
export default FirstChild
- to refer props in the child component, use this.props.[name]. In this example refer to this.props.name as i am passing name as a prop to FirstChild component
Conclusion
By understanding how state and props works, you are able to code with ReactJS easily. From my point of view, the things that i share is the basic of getting started with ReactJS. There is a lot more to cover and i'll continue to share another post for the follow up on what's next. Stay tuned and thank you for your time
"Practice the philosophy of continuous improvement. Get a little bit better every single day."
― Brian Tracy
Top comments (0)