Introduction To React JS

1. What is React JS?

React JS

React JS is an open-source JavaScript library used to build user interfaces. It was developed by Facebook. It lets us compose complex UIs from small and isolated pieces of code called Components.

2. What are the differences between React JS and JavaScript?

Some of the differences between React JS and JavaScript are:

React JS	JavaScript
React JS is a library based on JavaScript	JavaScript is a scripting language
Whenever state (data) is changed, it updates only what is necessary by making use of virtual DOM	Whenever data is changed, it updates the whole HTML DOM
Whenever the state (data) is changed, the component re-renders and React efficiently updates the HTML DOM	If the data is changed, we need to update the HTML DOM by DOM methods/properties

3. What is React JS used for?

React is used for building user interfaces specifically for single-page applications.
React allows us to create reusable components.
React will efficiently update and render just the right components when the data changes.

4. What are the advantages of React JS?

The following are the major advantages of React JS:

Easy to Learn
Large Community
Developer Toolset
Open Source

5. How to add a sample React component to an HTML page?

Step 1: In the HTML file, add an HTML
div
element to which we want to add the React implementation.
For instance, the
index.html
looks like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>Steps To Add React to a Website</h1>
<div id="some_random_id"></div>
</body>
</html>
HTML
Step 2: Add the React Scripts to the same HTML page before the
</body>
tag as shown below:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Steps To Add React to a Website</h1>
<div id="some_random_id"></div>
<script
src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin
></script>
</body>
</html>

HTML
Collapse

Here, the scripts are added to load/import the React library.

Step 3: Now add one more script, to load our component to the container having id
some_random_id
in the above code. Let’s name the JS file as
myComponent.js
. The
src
of the newly added script element should have the path to the
myComponent.js
file as the value.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>Steps To Add React to a Website</h1>
<div id="some_random_id"></div>
<script
src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin
></script>
<script src="myComponent.js"></script>
</body>
</html>

HTML
Collapse
Step 4: Now, Create and open the file named
myComponent.js
and paste the following code:
class myButton extends React.Component {
constructor(props) {
super(props);
this.state = { isLiked: false };
}
render() {
if (this.state.isLiked) {
return "Yes I Really Like This.";
}
return e(
"button",
{ onClick: () => this.setState({ isLiked: true }) },
"Like Button"
);
}
}
const domContainer = document.querySelector("#some_random_id");
ReactDOM.render(React.createElement(myButton), domContainer);
JSX
Collapse

Here we have created a React component named

myButton

6. Why react is faster than JS?

React is a JavaScript library, thus technically it isn't

faster

at the act of DOM manipulation than JavaScript itself. React isn't

faster than JavaScript

. It is approximately as fast as JavaScript.

7. What are the advantages of React JS over JS?

Compatibility with platforms React JS supports various libraries along with an excellent architecture for app development. The tools can be chosen for customization without any limitations to the platform.
Reusability of components The non-complex logic in the components can be used and maintained easily. Just create a class and make use of as many instances as desired.
Interactive UI To build a user-friendly application with a high success rate, there is a need to have a functional, interactive, and high-quality UI. ReactJS provides declarative components that enable you to develop UI functions and debug them.
Virtual DOM One of ReactJS greatest assets is having a Virtual DOM. React compares new virtual DOM with current virtual DOM, and the difference will be efficiently updated to the Real DOM.
Future-oriented Since ReactJS is compatible with most of the other tools and platforms out there, there is no need to work on the existing code while an update is happening.
Wide Community One primary reason that makes ReactJS ideal for application development is an extensive community of developers always working to better the documentation.

8. What are the advantages of using
create-react-app
CLI?

Here are few advantages to using

create-react-app

One line command to set up React web app.
No need to mug up all the configuration, because it provides the way to set up and minifies the production-ready app.
Application versioning can be well maintained.
It comes with great package support like ESLint, Babel, Webpack, and so on.
Upgrading the existing app to the latest version is less painful

9. What is the difference between React Native and ReactJS?

ReactJS is a JavaScript library, supporting both front-end web and being run on the server, for building user interfaces and web applications.
React Native is a mobile framework that compiles native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

10. What are the differences between React and ReactDom?

React is a JavaScript library for building User Interfaces and ReactDOM is the JavaScript library that allows React to interact with the DOM.

11. Why React instead of Angular?

React uses virtual DOM whereas Angular uses HTML DOM.
React beats Angular in terms of performance as React updates only what is necessary without rewriting the whole HTML DOM.
React has larger community than Angular.

To know more, refer to this link

12. What is the version of React JS you are learning?

Kindly refer to Introduction to React JS | Cheat Sheet.

13. What is meant by React JSX?

React JS introduced a new HTML like syntax named JSX to create elements.

1
const element = <h1 className="greeting">Hello World!</h1>;

JSX

The above JSX element compiles to,

1
2
const elementProps = { className: "greeting", children: "Hello World!" };
const element = React.createElement("h1", elementProps);

JSX

14. Can web browsers read JSX directly?

Web browsers are capable to read the regular JS objects but not the JSX. Web browsers cannot read JSX directly.

As browsers can read only the regular JS objects, then JSX needs to be converted to the regular JS object by using Babel.

15. What is a React Fragment?

The Fragment is an alternate way to return a single JSX element. It groups a list of children without adding extra nodes to the DOM.

1
2
3
4
5
6
7
8
9
10
import { Fragment } from "react";
const Welcome = () => (
  <Fragment>
    <h1>Hello, User</h1>
    <p>You are learning React</p>
  </Fragment>
);
export default Welcome;

JSX

Short Syntax:

1
2
3
4
5
6
7
8
const Welcome = () => (
  <>
    <h1>Hello, User</h1>
    <p>You are learning React</p>
  </>
);
export default Welcome;

JSX

16. What is the purpose of render() in React?

The

render

method is the required method in the class component.

It is used to return the JSX that is displayed in the UI.
It is called whenever the props are updated and state is updated using
setState
method.
If more than one HTML element is to be rendered, then they must be grouped using a container element or react fragment.

17. What is the syntax for Conditional Rendering?

Conditional Rendering allows us to render different elements or components based on a condition.

Different ways to implement Conditional Rendering are:

Using an If...Else Statement

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Component } from "react";
import "./App.css";
class App extends Component {
  state = { isLoggedIn: true };
  ...
  renderAuthButton = () => {
    const { isLoggedIn } = this.state;
    if (isLoggedIn === true) {
      return <button>Logout</button>;
    }
    return <button>Login</button>;
  };
  render() {
    return <div className="container">{this.renderAuthButton()}</div>;
  }
}
export default App;

JSX

Collapse

Using Element Variables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component } from "react";
import "./App.css";
class App extends Component {
  state = { isLoggedIn: true };
  ...
  render() {
    const { isLoggedIn } = this.state;
    let authButton;
    if (isLoggedIn) {
      authButton = <button>Logout</button>;
    } else {
      authButton = <button>Login</button>;
    }
    return (
      <div className="container">
        <h1>React JS</h1>
        {authButton}
      </div>
    );
  }
}
export default App;

JSX

Collapse

Using Ternary Operators

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component } from "react";
import "./App.css";
class App extends Component {
  state = { isLoggedIn: true };
  ...
  render() {
    const { isLoggedIn } = this.state;
    return (
      <div className="container">
        {isLoggedIn ? <button>Logout</button> : <button>Login</button>}
      </div>
    );
  }
}
export default App;

JSX

Collapse

Using Logical && Operator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component } from "react";
import "./App.css";
class App extends Component {
  state = { isLoggedIn: true };
  ...
  render() {
    const { isLoggedIn } = this.state;
    return (
      <div className="container">
        {isLoggedIn && <button>Logout</button>}
        {!isLoggedIn && <button>Login</button>}
      </div>
    );
  }
}
export default App;

JSX

Collapse

Introduction To React JS

1. What is React JS?

2. What are the differences between React JS and JavaScript?

3. What is React JS used for?

4. What are the advantages of React JS?

5. How to add a sample React component to an HTML page?

6. Why react is faster than JS?

7. What are the advantages of React JS over JS?

8. What are the advantages of using
create-react-app
CLI?

9. What is the difference between React Native and ReactJS?

10. What are the differences between React and ReactDom?

11. Why React instead of Angular?

12. What is the version of React JS you are learning?

13. What is meant by React JSX?

14. Can web browsers read JSX directly?

15. What is a React Fragment?

16. What is the purpose of render() in React?

17. What is the syntax for Conditional Rendering?

Post a Comment

Coding Key

Interview Preparation

Subscribe Us

Contact Form

Introduction To React JS

1. What is React JS?

2. What are the differences between React JS and JavaScript?

3. What is React JS used for?

4. What are the advantages of React JS?

5. How to add a sample React component to an HTML page?

6. Why react is faster than JS?

7. What are the advantages of React JS over JS?

8. What are the advantages of using create-react-app CLI?

9. What is the difference between React Native and ReactJS?

10. What are the differences between React and ReactDom?

11. Why React instead of Angular?

12. What is the version of React JS you are learning?

13. What is meant by React JSX?

14. Can web browsers read JSX directly?

15. What is a React Fragment?

16. What is the purpose of render() in React?

17. What is the syntax for Conditional Rendering?

Post a Comment

Contact Form

8. What are the advantages of using
create-react-app
CLI?