Basic Fundamentals helps to enrich react js basic knowledge
React is an open-source, component-based front-end library responsible only for the view layer of the application created by Jordan Walke, who was a software engineer at Facebook. An engineer from Facebook , cool right? It was initially a secret of facebook but later it was public in 2013. Now many of websites build based on this
React js. React is now vast and enriching. Today I will discuss some basic but useful concepts in react js.
React JSX
JSX is basically an extension of javascript which helps to write HTML inside JS.JSX provides you to write HTML/XML-like structure in the same file where you write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code.
import ‘./App.css’;
function App() {
return (
<div className=”App”>
<h1>Hello</h1>
<p>Lets learn react together</p>
</div>
);
}
export default App;
React Components
At first when I learned JS I used to write too many repeated codes. But, coding became so easy when I came to know about react components. In this approach, the entire application is divided into a small logical group of code, which is known as components.
React State
State is basically a structure that contains data or information about components. State is not constant; it can change.A component with the state is known as stateful components. The change in state over time can happen as a response to user action or system events. It is the heart of the react component which determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.
It can be set by using the setState() method and calling setState() method triggers UI updates. A state represents the component’s local state or information.
import React, { Component } from ‘react’;
class App extends React.Component {
constructor() {
super();
this.state = { displayBio: true };
}
render() {
const bio = this.state.displayBio ? (
<div>
<h3>React is a language that makes code easier.</h3>
</div>
) : null;
return (
<div>
<h1> Welcome to JavaTpoint!! </h1>
{ bio }
</div>
);
}
}
export default App;
React Props
Props stand for “Properties.” They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.
import React, { Component } from ‘react’;
class App extends React.Component {
render() {
return (
<div>
<h1> Welcome to { this.props.name } </h1>
<p> I love eating chocolates. </p>
</div>
);
}
}
export default App;
React Context
Context is a term of reacting it helps to pass data to non-child components. In the React application, you can pass data in a top-down approach via props. Sometimes it is inconvenient for certain types of props that are required by many components in the React application. Context provides a way to pass values between components without explicitly passing a prop through every level of the component tree.
Suppose you need login information of a user creating a website it is not possible to pass data from one component to another if they are not connected so you can use react context to make this easier.
class App extends React.Component {
render() {
return <Toolbar theme=”dark” />;
}
}
function Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
class ThemedButton extends React.Component {
render() {
return <Button theme={this.props.theme} />;
}
}
React HOOK
React hook is a new feature introduced by react.It is also a very good feature where you can use a react state without even declaring a react class.
You can call react hook at the top level, you have to use the react function, you have to import the react hook from the react class.
import React, { useState } from ‘react’;
function CountApp() {
const [count, setCount] = useState(null);
return (
<div>
<p>You have selected {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CountApp;
React Redux
React Redux is like UI bindings. It is kept up-to-date with any API changes to ensure that your React components behave as expected.It encourages good ‘React’ architecture.It implements many performance optimizations internally, which allows components to re-render only when it actually needs.
To install react redux you can give this command below
$ npm install redux react-redux — save
React DOM
DOM stands by Document Object Model. When we run a web page behind the scenes browser receives HTML and passes the code HTML parser and then creates It works like a tree data structure. The Dom tree that is actually, this whole dom passes to Render Tree and then processes for structure and this structure we see as displaying the browser that we are browsing on any browser like google chrome, mozilla firefox. Actually, dom makes our code easier than before.
Virtual DOM
As now we are a bit clear about dom we can easily understand what is VDOM and its working
procedure. It is a carbon copy of the actual dom. This means when we run a react application in the browser behind the scenes the browser copies the original dom and makes a temporary copy. This copy can be manipulated and updated in an efficient way. When we update or delete some code in react components the virtual dom looks at the difference between before change VDOM and after Change the virtual DOM.
React Conditional Rendering
Conditional rendering is like rendering data or occur any operation based on condition.
In other words, based on one or several conditions, a component decides which elements it will return. Lets clear this with an example of handling a login/logout button. The login and logout buttons will be separate components. If a user logged in, render the logout component to display the logout button. If a user not logged in, render the login component to display the login button. In React, this situation is called conditional rendering. We can control conditional rendering by using if,if-else, Unary operator etc.
