How To Build Something In React.

npx create-react-app foldername
npm install
or
yarn install
npm install react-dom
or
yarn add react-dom
npm start
or
yarn start
import React from 'react'import { render } from 'react-dom'class Index extends React.Component {constructor(props) {super(props)this.state = { value: 0 }}render() {return (<>{/* h1 tag where we are render value */}<h1>{this.state.value}</h1>{/* button for increment */}<buttononClick={() => {this.setState({ value: this.state.value + 1 })}}>Increment</button>{/* button for decrement */}<buttononClick={() => {this.setState({ value: this.state.value - 1 })}}>Decrement</button>{/* button for reset */}<buttononClick={() => {this.setState({ value: 0 })}}>Reset</button></>) }}render(<Index />, document.getElementById('root') )
  • To change the state we use ‘setState({})’ function which takes an object as a parameter inside that object we can pass the key and the value we are going to update.
  • when the state changes the render function going to call again but instead of rendering every element react going to render the elements which are needed to change because instead of real dom react uses virtual dom.
  • In render function, we pass our component as a first parameter and, the root element as a second parameter.
  • A component can only return one element at a time if there are multiple components we can wrap inside react fragment ‘<> </>’.
  • we can only write expression inside JSX and it should be wrapped inside curly brackets.
  • instead of class in ‘react,’ it is className
<p className="name">John Wick</p>
  • Every JSX element must be closed.
import React from 'react'import { render } from 'react-dom'import Counter from './counter'class Index extends React.Component {constructor(props) {super(props)this.state = { value: 0 }}handleIncrement = () => {this.setState({ value: this.state.value + 1 })}handleDecrement = () => {this.setState({ value: this.state.value - 1 })}handleReset = () => {this.setState({ value: 0 })}render() {return (<Countervalue={this.state.value}handleIncrement={this.handleIncrement}handleDecrement={this.handleDecrement}handleReset={this.handleReset}/>)}}render(<Index />, document.getElementById('root'))
import React from "react";export default function Counter(props) {return (<><>{/* h1 tag where we are render value */}<h1>{props.value}</h1>{/* button for increment */}<buttononClick={props.handleIncrement}>Increment</button>{/* button for decrement */}<buttononClick={props.handleDecrement}>Decrement</button>{/* button for reset */}<buttononClick={props.handleReset}>Reset</button></></>)}
  • ‘props’ is an object which passes down by its parent component.
  • we can use only in class component
  • componentDidMount called after rendering finishes for the first time.
import React from 'react'import { render } from 'react-dom'class Index extends React.Component {constructor(props) {super(props)this.state = { value: 0 }}componentDidMount() {
alert("This page is rendered")
}
render() {return (<> <h1>Hello React</h1></>) }}render(<Index />, document.getElementById('root') )
npm build
or
yarn build

--

--

--

know how to print "hello word"

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

My Phase 2 Project and First Impression of React

Create Your First Chrome Extension in 3 Minutes

Vue.js Creator Evan You Interview: “You need to understand what your users want”

GraphQL Code-Gen 1.0

Emitting Custom Events — VueJS Tutorial

Increase OR Decrease the size of static partition in linux

Week 8 | Arc Diagram and Edge Bundling

Contact me Part I — The Server

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abinash

Abinash

know how to print "hello word"

More from Medium

React and Redux simplified.

React Components

React Code Architecture