Why What React? & Its basics…
HELLO FRIENDS!!!
In this article, we are going to learn and answer the below-mentioned questions…
1. What is React?
2. Why React?
After that, we will be taking a look at the basics of React.
What is React
React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications.
React allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.
React allows developers to create large web applications that can change data, without reloading the page.
This corresponds to the view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.
React JS is also called simply to React or React.js.
In simple words,
React is a library to build UIs which are fast, scalable and simple.
It uses different components to build a single full-fledged app.
This whole process can be easily understood as a puzzle that is to be solved and to solved we need to put the correct component at the correct place once all the components are placed in the right place the app gets completed.
But the catch is that the components are to be built by the developers.
Why React?
Now, the main question arises in front of us is why one should use React. There are so many open-source platforms for making the front-end web application development easier, like Angular.
Let us take a quick look at the benefits of React over other competitive technologies or frameworks.
There are quite a few frameworks to do the same task as done by React
So, if you’re looking for the next best thing but you’re feeling a little bit lost in the framework jungle, I suggest checking out React.
1. Simplicity
ReactJS is just simpler to grasp right away. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web (and mobile applications), and support it. React uses a special syntax called JSX which allows you to mix HTML with JavaScript.
A developer can still write in plain JavaScript but JSX is much easier to use.
2. Easy to learn
Anyone with basic previous knowledge in programming can easily understand React while Angular and Ember are referred to as ‘Domain-specific Language’, implying that it is difficult to learn them. To react, you just need basic knowledge of CSS and HTML.
3. Native Approach
React can be used to create mobile applications (React Native). And React is a diehard fan of reusability, meaning extensive code reusability is supported. So at the same time, we can make IOS, Android and Web applications.
4. Testability
ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate with the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.
The benefits of React JS :
- JSX is used which makes it more updated and quite simple to use. It uses HTML tags and syntax to render components.
- Single Way Data Flow: It allows unique way data flow in which sets of values are passed as components rendered as properties in HTML tags. It cannot directly access or modify components but passes a call back which does this task. The property is then known as “Properties flow down, and actions flow up.
- Virtual DOM: React JS creates components and any change in the component than is compared with the previous state of the VDOM if there is any change then only that part of the component is updated whereas, in simple DOM the whole browser is reloaded on every change in the component or web page.
- The render method takes input and returns what to display. JSX is a XML like syntax. Components can be used to render () via these properties.
- State-full component: A component can maintain internal state data in addition to taking input data. When a component state changes, it is re-invoked by calling
render(). - React use Babel: It is a compiler that converts markup language into JavaScript. You can use the newest features of JavaScript with this and also is available for different conversions. For example, our React JS uses this to convert JSX into JavaScript.
- The JSX expressions can be used by wrapping them in curly braces. They are immutable hence cannot be changed, you can just use
render()to replace them in case of every time if you want modification anyhow. - React components are JavaScript functions that returns React element. React uses ES6 classes to create components and can be created using the render method.
Basics of React.
As from the above, we have got an idea that what react is and why it is popular among developers and the tech industry.
We will take it slow by learning the following,
JSX
This refers to an HTML like syntax which internally converts it to a react element.
State
React components has a built-in state object.
The state object is where you store property values that belong to the component.
When the state changes, the component re-renders.
state is only defined in a class component.
Component
There are two types of components in react,
1. Functional component
2. Class component( Consists of state and lifecycle methods)
Components are re-usable.
Props
These are only read-only.
Props can be passed from one component to another.
const myelement = <App device="Android" />;The component receives the argument as a props object.
class App extends React.Component {
render() {
return <h2>I am a {this.props.device}!</h1>;
}
}//on executing output will be
//I am a Android!
React LifeCycle
Each component in React has a lifecycle that you can monitor and manipulate during its three main phases.
The three phases are Mounting, Updating, and Unmounting.
There is much more to react lifecycle I will be explaining the whole lifecycle methods in my next article.
So, that’s it Thank you, folks!!!
For reading my article, let me know whether you have any queries regarding the article or the concepts which I explained by writing a response at the bottom.
Follow me on twitter to be in touch and let me know what other areas you feel difficulty in so that I read myself and will try to explain it with my articles.
https://twitter.com/bhavishya2107
THANKYOU !!!
KEEP LEARNING and CODING😎
Reference:
- https://reactjs.org/
You don’t require any other source for learning ReactJS the documentation is well placed with easy examples and explanations.
