Talk on React JS, and why its awesome
ReactJS basically is an open-source JavaScript library which is used for building user interfaces mostly for single page applications.
Why is ReactJS gaining so much popularity?
- Super easy to maintain (Javascript).
- Comparatively lesser lines of codes.
- React is extremely efficient.
- The brains behind Facebook are maintaining this project.
- Open source and a lot of contribution going on.
Which language does it use?
JSX (JavaScript XML) - It is the language which adds XML syntax to Javascript code.
- Easier - JSX offers a solid class system much like Java
- Faster - JSX performs optimization while compiling the source code to JavaScript.
- Safer - In contrast to JavaScript, JSX is statically-typed and mostly type-safe.
How does it work?
- Integrating it with the html file and bundling of the js file
- Component structure
- How the state is managed
- Explain the rendering part
Example of JSX using ECMAScript 2015 JavaScript syntax.
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Some name"
};
}
render() {
return (
<div>
<Header name={this.state.name} />
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>{this.props.name}</h1>
</div>
);
}
}
export default App;
A basic example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
<div id="myDiv">
<!-- Component will render here -->
</div>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return (
<h1>Hello world this is React JS</h1>
);
}
}
ReactDOM.render(<Greeting />, document.getElementById('myDiv'));
</script>
</body>
</html>
Pros/Cons
- Its fully open source.
- Easy to use , It allows developers to create fast user interfaces.
- React-JS is used by React Native internally.
-
It also uses the concept called Virtual DOM
- React.js uses a special syntax called JSX.
- Search engine friendly.
- React uses the least abstractions
- It is extremely easy to write UI test cases because the virtual DOM system implemented entirely in JS.
- An open-source library: constantly developing and open to contributions.
Cons
- Just a view library at its core
- The library itself is pretty large.
- There is a high dependency on third party libraries.
- Facebook recently changed the open source license recently, which caused a lot of problems, but they reverted it. [But now its MIT]
How react native is different from react
React native is used for cross platform development for mobile applications like iOS, Android & even windows (with help of third party applications)
- React Native uses native APIs as a bridge to render components on mobile.
- React Native doesn’t use HTML.
Who’s using React/React native?
{And conclude that React JS is safe to use and an awesome tool to replace web & native apps}