Getting started with ReactJS

"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