What is ReactJS?
đź“ŚReactJS is an open-source, component based front end library responsible only for the view layer of the application. It is maintained by Facebook.
ReactJS uses virtual DOM based mechanism to fill in data (views) in HTML DOM.
đź“ŚThe virtual DOM works fast owning to the fact that it only changes individual DOM elements instead of reloading complete DOM every time.
Create React App
đź“Ścreat-react-app is a React app boilerplate generator created by Facebook. It provides a development environment configured for ease-of-use with minimal setup, including:
1.ES6 and JSX transpilation
2.Dev server with hot module reloading
3.Code linting
4.CSS auto-prefixing
5.Build script with JS, CSS and image bundling, and sourcemaps
6.Jest testing framework
Installation
First, install create-react-app with node package manager (npm)
npx create-react-app my-app
cd my-app
npm start
JSX Expression
scr folder and click App.js
function App(){
const name= 'Buddhadeb'
return(
<div className ="Container">
<h1> Hello World </h1>
<h2> Hi {name}</h2>
</div>
)
}
React Components
1.Stateless componentđź“Ś
import React, { Component } from 'react';
import { render } from 'react-dom';
class FirstComponent extends Component {
render() {
return (
<div>
Hello, I am Buddhadeb Chhetri.
</div>
);
}
}
export default FirstComponent
2.Stateless Functional Componentsđź“Ś
import React from 'react';
import PropTypes from 'prop-types';
const FirstComponent = props => (
<div>
Hello, ! I am {props.name}.
</div>
);
FirstComponent.propTypes = {
name: "Buddhadeb Chhetri"
}
3.Properties in stateless componentđź“Ś
const YourComponent = ({ propExample1,
example2 }) => (
<div>
<h1>properties from parent
component:</h1>
<ul>
<li>{propExample1}</li>
<li>{example2}</li>
</ul>
</div>
)
<YourComponent propExample1="Buddhadeb"
example2="Chhetri" />
4.Class componentđź“Ś
import React from 'react'
class YourComponent extends
React.Component {
render() {
return <div>Buddhadeb Chhetri</div>
}
}
export default YourComponent
5.Properties in class componentđź“Ś
class YourComponent extends
React.Component {
render() {
return (
<div>
<h1>
properties from parent
component:
</h1>
<ul>
<li>{this.props.propExample1}</li>
<li>{this.props.example2}
</li>
</ul>
</div>
)
}
}
6.Stateđź“Ś
class CountClicks extends React.Component {
state = {
clicks: 0
}
onButtonClick = () => {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}))
}
render() {
return (
<div>
<button
onClick={this.onButtonClick}>
Click me
</button>
<span>
The button clicked
{this.state.clicks} times.
</span>
</div>
)
}
}
7.React Routerđź“Ś
import {
BrowserRouter,
Route
} from 'react-router-dom'
const Hello = () => <h1>Hello world!</h1>
const App = () => (
<BrowserRouter>
<div>
<Route path="/hello"
component={Hello}/>
</div>
</BrowserRouter>
)
open: https:localhost:3000/hello
8.useState hookđź“Ś
import React, { useState } from 'react'
function Example() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() =>
setCount(count + 1)}>
Click here to increase the
counter.
</button>
</div>
)
}
Top comments (4)
hey can you use the
for code, very hard too see it
Hum, or better yet, buff up the debugging skills: developer.chrome.com/docs/devtools... and learn how to watch a value and use breakpoints.
Also you can recommend the following extension.
marketplace.visualstudio.com/items...
as there are plenty of snippets that will help them code faster and have a better understanding of the code snippets.
For the beginner, this will be helpful.