React

Question 1

What is React? What advantages react gives to us?

Answer 1

React is a JS library that allows you to structure HTML into small, DRY and manageable chunks.

Question 2

What is JSX?

Answer 2

JSX allows us to write HTML in React.

Question 3

What <div> Hello </div> actually creates inside JSX?

Answer 3

React.createElement(‘div’, null, ‘Hello’)

Question 4

How to create function-based component?

Answer 4

# First option 
const Sample = () => {
  return <div> Sample </div>
}
# Second option

const Sample = () => (

<div> Sample ! </div>

)

Question 5

How to add react component to the existing html code?

Answer 5

ReactDOM.render(< Sample/>, document.getElementById(‘react-sample’))

Question 6

How to create class-based component?

Answer 6

class MySample extends React.Component {
  render() {
    return <div> React Class ! </div>
  }
}

Question 7

How to send/receive params to class-based components?

Answer 7

< Sample question=’a?’ answer=’b’>

<div>
{ this.props.question }
{ this.props.answer }
</div>

Question 8

How to add css class name inside JSX?

Answer 8

# className='sample'
<div> Hello </div>

Question 9

How to import component from another file? And how to return default component from this file?

Answer 9

# to import to file
import Card from './components/Card'
# to return from the file 
export default Card

Question 10

What is react PropTypes? Why do we need it?

Answer 10

This is a library that can check what types/values we send to components and raise warnings if something doesn’t match.

Question 11

How to check component params with PropTypes?

Answer 11

Card.propTypes = {
question: PropTypes.string,
answer: PropTypes.string
}

Question 12

How to add unix id/key to compent?

Answer 12

< Card key={index} />

Question 13

How to add a button and call function on click?

Answer 13

# first option 
< button onClick={deleteCard}> Delete  < /button>

function deleteCard() {
  alert('Deleted')
}

second option inside the class

class Sample {
  deleteCard() {
    alert('Deleted')
  }
 < button onClick={this.deleteCard.bind(this)}> Delete  < /button>
}

# 3rd option 
class Sample {
  deleteCard = () => {
    alert('Deleted')
  }
 < button onClick={this.deleteCard}> Delete  < /button>
}

Question 14

Why do we need state? And how to create state?

Answer 14

We need a state to dynamically set properties because this.props we can use only to read data.

class App
  state = {
    visible: true 
  }

# access
this.state.visible
end

Question 15

How to set state?

Answer 15

this.setState({ visible: false })

Question 16

How to run parent function from the child component?

Answer 16

# parrent
< App hide_card={this.hideCard} />

# child
this.props.hideCard()

Question 17

How to add form and handle it on submit?

Answer 17

createCard = (event) => {
event.preventDefault(); # we use it to prevent redirect
}

< form onSubmit={this.props.createCard}>
< /form>

Question 18

Why do we need ref? And how to create ref?

Answer 18

Ref allows us to bind input fields with variables and get data from them without using document.getElementById

class Samle  {
  constructor(props) {
    super(props)
    this.question_input = React.createRef()
  }

  sample() {
   # return the value
    this.question_input.current.value
  }

< input ref={this.question_input} />
}