Fundamental ReactJS Concepts

What is ReactJS

ReactJS is an open-source, front-end, JavaScript library for building user interfaces or UI components.

It’s not a frame work. It’s a library.

You can choose any of your favorite 3rd party libraries and use them as a plugin.

JSX

JSX stands for JavaScript XML. JSX allows you to write HTML elements in JavaScript and place them in the dom without using React.createElement() method.

Without JSX

const myElement = React.createElement('h1', {style: {color: ‘red’}}, 'Hello World!');

ReactDOM.render(myelement, document.getElementById('root'));

With JSX

const myelement = <h1>Hello World!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

You can also use JavaScript expression anywhere in JSX.

Using JS in react

You can also use JS in react to generate markup dynamically.

<div>
  myData.map(element => <h1>{element.value}</h1>)
</div>

In the above example, the myData array is mapped using map function to create h1 dynamically based upon myData.

React Component

A react component simply a plain old JavaScript function that workers in isolation and return HTML via a render() function. React is designed around the concept of reusable components. Components are independent and reusable bits of code. In react, components can be of two types, class components and function components.

function Button() {
  return <button type="submit">Send</button>;
}
ReactDOM.render(<Button />, mountNode);

Components name should starts with a capital letter since we are dealing with a mix of HTML elements and React elements.

Components with JavaScript Classes

Sometimes we need to go beyond simple function components. Here’s come to react class components. React supports creating components using JavaScript class syntax. If we write the above Button component using class, it should look like this

class Button extends React.Component {
  render() {
    return <button type="submit">Submit</button>;
  }
}
// same syntex as before
ReactDOM.render(<Button />, mountNode);

Using events in React

When handling events inside react elements, you should remember two important differences from plain JavaScript

• React elements should be named in camelCase formate. So it should be onClick rather then onclick

When passing a function as the event handler, it should be within curly braces, not a string. It’s onClick={handleChange}, not onClick=“handleChange”

Components with props

React components can also receive pros. React props are like function arguments in JavaScript.

function Button (props) {
  return <button type="submit">{props.label}</button>;
}

ReactDOM.render(<Button label="Send" />, mountNode)

React Props are read-only! You will get an error if you try to change their value.

Conditional rendering

Often there is a need to render some part if some conditions are met. In JSX, it’s possible to use the ternary operator to perform conditional rendering

function Headings (props) { 
  props.condition ?  return <span>'Welcome, my friend.'</span> :
  return <span>'Sorry, you are not authorized'</span> 
}

ReactDOM.render(<Headings condition={true} />, mountNode)

Virtual DOM

This is basically a virtual representation of a UI that is kept in the memory. This virtual DOM is synced with the actual DOM by a library such as ReactDOM.

This synced process is called as reconciliation.

How rendering works

• In react, every setState() call informs React that something needs to be changed. React then calls render() method to update the Virtual DOM in the memory and compares it with what is rendered in the browser.
• If there are changes, React does the smallest possible update to the Virtual DOM.
• Finally, React update the actual DOM only at the node where there is an actual change needed.

That’s all for now. Hope you learned something from here.