All About ReactJS and Fundamentals
ReactJS is defined as a JavaScript library for building user interfaces. Let’s talk about React basics.
ReactJS is a JavaScript “library”. It is not exactly a “framework”. ReactJS is cool but not a complete solution and you will often need to use more libraries with React to form any solution. Actually React follows the Unix philosophy because it is a small library that focuses on just one thing and on doing that thing extremely well. React is made for building user interfaces or UI components.
React’s Tree Arrangement
Before React, when we needed to work with a browser’s API, which is known as the DOM API, we avoided traversing the DOM tree as much as possible and there is a reason for that. Any operation on the DOM is done in the same single thread that’s responsible for everything else that’s happening in the browser, including reactions to user events like typing, scrolling, resizing, etc.
How To Create React App
If you want to create react app what you need to do first you need to install node, and then you need npm or yarn to create your app.
After installing Node…
Open the terminal and check the node version to confirm that node is successfully installed or not.
Just run this command
node --version
// for check node versionnpm --version
// for check npm version
Everything is ready now time to create our very own first React app. Follow those commands.
npx create-react-app myfirstapp
// for create react appthencd myfirstapp
// for go inside your app foldernpm start
// this start the server for you.
Yahoo our first react app is created successfully.
JSX In Depth
Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, …children) function.
JSX code:
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>compiles into:
createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)You can also use the self-closing form of the tag if there are no children. So:
<div className="sidebar" />compiles into:
createElement(
'div',
{className: 'sidebar'}
)Specifying The React Element Type
The first part of a JSX tag determines the type of React element.
Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.
React Must Be in Scope.
Since JSX compiles into calls to React.createElement, the React the library must also always be in scope from your JSX code.
For example, both of the imports are necessary for this code, even though React and CustomButton are not directly referenced from JavaScript:
import React from 'react';
import CustomButton from './CustomButton';function WarningButton() {
// return React.createElement(CustomButton, {color: 'red'}, null); return <CustomButton color="red" />;
}
Updating React elements
Let’s do an update operation on the DOM trees that we have so far. Let’s simply make the time string tick every second.
We can easily repeat a JavaScript function call in a browser using the setInterval Web timer API. Let’s put all of our DOM manipulations for both versions into a function, name it render, and use it in a setInterval call to make it repeat every second.
Here is the full final code for this example:
const render = () => {
document.getElementById('mountNode').innerHTML = `
<div>
Hello HTML
<input />
<pre>${new Date().toLocaleTimeString()}</pre>
</div>
`; ReactDOM.render(
React.createElement(
'div',
null,
'Hello React ',
React.createElement('input', null),
React.createElement(
'pre',
null,
new Date().toLocaleTimeString()
)
),
document.getElementById('mountNode2')
);
};setInterval(render, 1000);React is declarative
In React you use declarative style to write your components. Let’s look at the previous example with <select>
<select value={this.state.value} onChange={this.handleChange}>
{somearray.map(element => <option value={element.value}>
{element.text}
</option>)}
</select>In this <select> example, you are not using for loop to manually create a mapped collection. You are not saying what should be done just how it should look like.
In React Data goes down
In React data goes down the tree of the components. If you want to pass data from parent to child component you need to use props. From JSX point of view props are HTML attributes.
Parent component:
<div>
<Greetings color={red} text='Hello' />
</div>In the child component, props are available under this.props.
Child component:
const Greetings = React.createClass({
render () {
const {color, text} = this.props
const divStyle = {padding: 10, backgroundColor: 'black'}
const headingStyle = {color: color}
return (
<div style={divStyle}>
<h1 style={headingStyle}>{text}</h1>
</div>
)
}
})Conditional rendering
In the previous example, the list was rendered depending on some conditional logic. It’s often needed to render one part of the markup if some conditions are met, and the other if they are not. In React there are a few ways to do that.
Ternary operator
In JSX it’s possible to use the ternary operator to perform conditional rendering:
React.createClass({
getInitialState () {
return {
hideTodos: true
}
},
render () {
return (
<div>
{
hideTodos ? 'Sorry there is no data' : <TodoList />
}
</div>
)
}
})Possible variations:
- ternary operator outside
returnexpression - if/else block outside
returnexpression
Helper function
React.createClass({
getInitialState () {
return {
hideTodos: true
}
},renderTodos () {
if (this.state.hideTodos) {
return 'Sorry there is no data'
}return <TodoList />
}render () {
return (
<div>
{
this.renderTodos()
}
</div>
)
}
})
How Optimizing Performance!
Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.
Thank you.