React js
Reactjs is very fast as compared to plain javascript as it uses virtual dom.
It creates components which are easy to use and maintain
Setting up the environment:
- Install node.js
- Download react-create-app , refer : https://reactjs.org/docs/create-a-new-react-app.html
- Run these commands
npx create-react-app my-app
cd my-app
npm start
- If there are errors running server, try removing package-json.lock file and create a new .env file and put this value there SKIP_PREFLIGHT_CHECK=true
- Now run and hopefully, it should run.
Let’s create a sample app:
Create index.html
<html>
<body>
<div id=”root”></div>
</body>
</html>
Create index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
ReactDOM.render(<h1>hi</h1>, document.getElementById(‘root’));
Now, if we start the server and hit, localhost:3000, we can see “HI” in the browser.
Understanding the flow:
In index js, we have to import react and reactdom libraries.
Then we are putting Reactdom.render , which takes two params, one is html content or app reference and the second is the document element which needs to be updated.
Let’s begin with components, Just create a function which needs to have return value containing HTML content. From ReactDom.render, we can call this function instead of putting the whole HTML content
import React from ‘react’;
import ReactDOM from ‘react-dom’;
function MyFirstApp(){
return (
<div>
<h1>This is using function components
</h1>
</div>
)
}
ReactDOM.render(<MyFirstApp/>, document.getElementById(‘root’));
Now, let’s externalize the function so that it can be used by other files. For better code organization, we can put all components in a components folder. Here I created a new App1.sj, and created a new function MyFirstApp1 and then at the end, we have to export it.
import React from ‘react’;
function MyFirstApp1(){
return (
<div>
<h1>This is header
</h1>
</div>
)
}
export default MyFirstApp1
Now, make changed in the index.html to use these paths. We need to import the MyFirstApp1 from the path to the js file.
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import MyFirstApp1 from ‘./components/App1’
ReactDOM.render(<MyFirstApp1/>, document.getElementById(‘root’));
Working with Props
Now, we have repeated components in the page which have the same behavior, but just different values, like title, image and some text. So, rather than creating separate functions, we create a single component and pass these as Props. Props are immutable and should not be changed by the functions
Let’s say we want to show some employee names and their designation on the page.
So in the EmployeeData component, we added a parameter or props and from calling function we can pass the values.
function EmployeeData(props){
return (
<div>
<div><h1>{props.name}</h1></div>
<div><p>{props.desc}</p></div>
</div>
)
}
export default EmployeeData
import EmployeeData from ‘./EmployeeData’
function BodyContent(){
return (
<div>
<EmployeeData name=”name 1″ desc=”sample desc 1″ />
<EmployeeData name=”name 2″ desc=”sample desc 2″ />
</div>
)
}
In case , we want to get the employee data from a json file, then we can do something like below
import edata from ‘./edata’
function BodyContent(){
const allvals = edata.map(ed => <EmployeeData name={ed.name} desc={ed.desc} key={ed.div} /> )
return (
<div>{allvals}</div>
)
Using classes: we can use classes to have features of functions. Classes can help to have additional life cycle features. To convert function to a class, add a class identifier and extend React component.
Also every class needs to have render function which can return the view part. Only class based components can have state
class Footer extends React.Component {
render(){
return (
<div>
<h1>This is Footer
</h1>
</div>
)
}
}
Events: Following are the ways we can handle html elements events using javascript function calls
class Footer extends React.Component {
render(){
return (
<div>
<h1>This is Footer
</h1>
<button onClick={clickFunction } > button</button>
<button onClick={function(){alert(“clicked no function”)} } >button</button>
</div>
)
}
}
function clickFunction(){
alert(“clicked”)
}
States: If the state of component changes, it reflects all components and functions using it.
constructor(){
super();
this.state ={ counterValue : 0}
this.clickFunction =this.clickFunction.bind(this) // Need to bind the function if state is getting changed in that.
}
clickFunction() {
this.setState( {counterValue:3} ) //option 1 where no previous state
// option 2: user previous state for reference
this.setState (prevS => {
return{
counterValue : prevS.counterValue +1
}
} )
}