10 Topics You Should Know About React

1. JSX:

JSX stands for JavaScript XML. It is used for templating in react rather than regular JavaScript.

For example:

import React from ‘react’;
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;

2. render():

reactDOM.render() is a function that renders HTML to the webpage. It takes two arguments and they are HTML code and an HTML element where this function displays the given HTML code inside the designated HTML element.

For example:

import React from ‘react’;
 import ReactDOM from ‘react-dom’;
 import App from ‘./App.jsx’;
 ReactDOM.render(<App />, document.getElementById(‘app’));
import React from ‘react’;
 class App extends React.Component {
render() {
return (
<div>
<Header/>
</div>
);
}
}
class Header extends React.Component {
 render() {
 return (
<div>
<h1>Header</h1>
</div>
)
 }
 }
 3. Class component:

3. Class component:

A react class component must start with an upper-case letter and must include an “extends React.component” statement creating inheritance to React.component and giving the component access to functions of the React.component. Besides, a render() method is also required.

For example:

class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById(‘root’));

4. Function component:

A react function component must start with an upper-case letter and must include an “extends React.component” statement creating inheritance to React.component and giving the component access to functions of the React.component. Besides, a render() method is also required.

For example:

class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
function Car() {
return <h2>Hi, I am also a Car!</h2>;
}

5. constructor():

A component's properties get initiated when the constructor() function gets called. These component properties are kept in an object called state.

For example:

class Car extends React.Component {
constructor() {
super();
this.state = {color: “red”};
}
render() {
return <h2>I am a Car!</h2>;
}
}
class Car extends React.Component {
constructor() {
super();
this.state = {color: “red”};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}

6. Props:

React props work like function arguments in JavaScript and attributes in HTML. Props are immutable hence when we need immutable data to be passed into components props are passed to components via HTML attributes.

For example:

class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand}!</h2>;
}
}
const myelement = <Car brand=”Ford” />;

7. setState():

This method is used to update the state of the component where it only adds the changes to the original state and does not replace it.

For example:

import React from ‘react’;
class App extends React.Component {
constructor() {
super();
this.state = {
data: []
}
this.setStateHandler = this.setStateHandler.bind(this);
};
setStateHandler() {
var item = “setState…”
var myArray = this.state.data.slice();
myArray.push(item);
this.setState({data: myArray})
};
render() {
return (
<div>
<button onClick = {this.setStateHandler}>SET STATE</button>
<h4>State Array: {this.state.data}</h4>
</div>
);
}
}
export default App;

8. forceUpdate():

This method is used if a component needs to be updated manually.

For example:

import React from ‘react’;
class App extends React.Component {
constructor() {
super();
this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
};
forceUpdateHandler() {
this.forceUpdate();
};
render() {
return (
<div>
<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
<h4>Random number: {Math.random()}</h4>
</div>
);
}
}
export default App;

9. updateState():

Event handler functions in react are written in camel case. updateState() function gets triggered when an event takes place for example onClick event.

For example:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App.jsx’;
ReactDOM.render(<App/>, document.getElementById(‘app’));
import React from ‘react’;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: ‘Initial data…’
}
this.updateState = this.updateState.bind(this);
};
updateState() {
this.setState({data: ‘Data updated…’})
}
render() {
return (
<div>
<button onClick = {this.updateState}>CLICK</button>
<h4>{this.state.data}</h4>
</div>
);
}
}
export default App;

10. componentDidMount():

This method is run after the component is rendered. The statements are run which require components to be placed in the DOM.

For example:

class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: “red”};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: “yellow”})
}, 1000)
}
render() {
return (
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById(‘root’));