DEV Community

Cover image for Getting started with ReactJS
Ali Zulfaqar
Ali Zulfaqar

Posted on

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>
  )
 }
}
Enter fullscreen mode Exit fullscreen mode
  • 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;

Enter fullscreen mode Exit fullscreen mode
  • FirstChild component
import React from 'react';

const FirstChild = () => {
  return <p>{this.props.name}</p>  
}

export default FirstChild
Enter fullscreen mode Exit fullscreen mode
  • 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)