Category: Reactjs

import React from 'react';
import Hello from './Component/Hello';

function App() {
  return (
 <Hello/>
  );
}

export default App;

Welcome.js এর ফাইলটি এরকম হবে 
import React,{Component} from 'react';
function Welcome(){
    return <h1>Hello Function</h1>
}
export default Welcome;

App.js এর ফাইলটি এরকম হবে 
import React from 'react';
import Welcome from './Component/FunctionalComponent';
function App() {
  return (

  <Welcome></Welcome>
    
  );
}

export default App;

// Hello.js এর ফাইলটি এরকম হবে 
import React,{Component} from  'react';

class Hello extends React.Component {

    render (){
        return (
        <h1>Gsm Ashik Roll Number Is {this.props.roll}</h1>
        );
    }
}

export default Hello;

// App.js এর ফাইলটি এরকম হবে 
import React from 'react';
import Hello from './Component/Hello';

function App() {
  return (
  <Hello roll="14"></Hello>
  );
}
export default App;

// Welcome.js এর ফাইলটি এরকম হবে 
import React,{Component} from 'react';
function Welcome(props){
return <h1>Hello Function {props.color}</h1>
}
export default Welcome;

// App.js এর ফাইলটি এরকম হবে 

iimport React from 'react';
mport Welcome from './Component/FunctionalComponent';

function App() {
  return (

  <Welcome color="#454414"></Welcome>
 
  );
}

export default App;

// Hello.js এর ফাইলটি এরকম হবে 
import React,{Component} from  'react';

class Hello extends React.Component {
constructor(){
    super();
    this.state={"name":"Bangladesh"};
}
    render (){
        return (
        <h1>My Country Is {this.state.name}</h1>
        );
    }
}
export default Hello;

//App.js এর ফাইলটি এরকম হবে 
import React from 'react';
import Hello from './Component/Hello';

function App() {
  return (

  <Hello></Hello>
 
  );
}
export default App;

// Hello.js এর ফাইলটি এরকম হবে 
import React,{Component} from  'react';
class Hello extends React.Component {
     shut(){
        alert("Hello I Am Clicked");
    }
    render (){
        return (
        <button onClick={this.shut} >Ckickme </button>
        );
    }
}
export default Hello;

import React, { Component } from 'react';

class Hello extends Component {
    constructor(props){
        super();
        this.state= {name:'olee ahmmed'};
        this.handlechange = this.handlechange.bind(this);
    }
  
    handlechange (){
        this.setState({name:'Gsm'});
    }
    render() {
        return (
            <div>
                <h1 >Hello World {this.state.name} {this.props.profession}</h1>
                <button onClick={this.handlechange} >Ckickme </button>
            </div>
        );
    }
}

export default Hello;

//App.js এর ফাইলটি এরকম হবে 
import React from 'react';
import Hello from './Component/Hello';

function App() {
  return (

  <Hello></Hello>
 
  );
}
export default App;

import React,{Component} from 'react';
function shut(){
    alert("He I Am Clicked");
}
function Welcome(props){
return <button onClick={shut}>Clickme</button>
}
export default Welcome;

import React from 'react';
import Welcome from './Component/FunctionalComponent';


function App() {
  return (
  
 <Welcome></Welcome>
  );
}

export default App;

 //এটা Sidebar.js ফাইল 
<div>
{this.props.children}
            </div>
//এটা Example.js ফাইল  এ Sidebar ইম্পোর্ট করার পর  
<Sidebar>
<Footer></Footer>
</Sidebar>            

import React, { Component } from 'react';
class Login extends Component {

    constructor () {
      super();
      this.state = {
        email: '',
        password: ''
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange (evt) {
      // check it out: we get the evt.target.name (which will be either "email" or "password")
      // and use it to target the key on our `state` object with the same name, using bracket syntax
      this.setState({ [evt.target.name]: evt.target.value });
    }
  
    render () {
      return (
        <form>
 <h1>{this.state.email}</h1>
 <h1>{this.state.password}</h1>
          <label>Email</label>
          <input type="text" name="email" onChange={this.handleChange} />
  
          <label>Password</label>
          <input type="password" name="password" onChange={this.handleChange} />
  
        </form>
      );
    }
  }

  export default Login;
  

  <div className={"card" + (this.props.plain ? " card-plain" : "")}>

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <div className="example">
        <form onSubmit={this.handleSubmit}>
          <span>Essay #1</span>
            <textarea value={this.state.value} onChange={this.handleChange} cols={40} rows={10} />
          <input type="submit" value="Submit" />
        </form>
        <div className="preview">
          <h1>Preview</h1>
          <div>{this.state.value}</div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <EssayForm />,
  document.getElementById('app')
);

import React, { Component } from 'react';

class Hello extends Component {
    constructor(props){
        super();
        this.state= {name:'olee ahmmed',toggle: false};

        this.handlechange = this.handlechange.bind(this);
        this.toggleState = this.toggleState.bind(this);

	}
    
  
    handlechange (){
        this.setState({name:'Gsm'});
    }
	toggleState() {
		this.setState({
			toggle: !this.state.toggle
		});
	}
    render() {
        return (
            <div>
                <h1 >Hello World {this.state.name} {this.props.profession}</h1>
                <button onClick={this.handlechange} >Ckickme </button>

        <button onClick={this.toggleState}>{this.state.toggle ? 'ON' : 'OFF'}</button>
            </div>
        );
    }
}

export default Hello;

// Navigation.js
import React, { Component } from 'react';
import { Route, Link, BrowserRouter, Switch } from 'react-router-dom';
import App from './App';
import AboutUs from './AboutUs';
import ContactUs from './ContactUs';
import ErrorPage from './ErrorPage';
class index extends Component {
    render() {
        return (
            <div>
                   < BrowserRouter >
      <div>
         <ul>
            <li>
               <Link to="/">Home</Link>
            </li>
            <li>
               <Link to="/aboutus">About Us</Link>
            </li>
            <li>
               <Link to="/contactus">Contact Us</Link>
            </li>
         </ul>
         <Switch>
            <Route exact path="/" component={App} />
            <Route path="/aboutus/:id" component={AboutUs} />
            <Route path="/contactus" component={ContactUs} />
            <Route component={ErrorPage} />
         </Switch>
      </div>
   </ BrowserRouter >
            </div>
        );
    }
}

export default index;

import React,{Component} from 'react';
class Navbar extends React.Component {

    render (){

        return(
<nav className="navbar navbar-default">
  <div className="container-fluid">
    <div className="navbar-header">
      <a className="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul className="nav navbar-nav">
      <li className="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
            
        );
    }
}

export default Navbar;

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './Component/Hello';
import Navbar from './Component/Navbar';

function App() {
  return (
  <Navbar></Navbar>
  );
}

export default App;

import React, { Component } from 'react'

export default class Button extends Component {
    render() {
        return (
            <button
            type={this.props.type || 'button'}
            value={this.props.value || null}
          >
            {this.props.text}
          </button>
        )
    }
}
// Use Like This Way
  <Button
          type='submit'
          value='submit'
          text='Send form'
        />

import React, { Component } from 'react'

export default class Label extends Component {
    render() {
        return (
           
           <Label
          hasLabel={this.props.hasLabel}
          htmlFor={this.props.htmlFor}
          label={this.props.label}
        />
         
        

        )
    }
}


        // Use Like This Way
        <label
        htmlFor={this.props.htmlFor}
        label={this.props.label}
      >{this.props.label}</label>

import React, { Component } from 'react'

export default class Input extends Component {
    render() {
        return (
            <input
            id={this.props.htmlFor}
            max={this.props.max || null}
            min={this.props.min || null}
            name={this.props.name || null}
            placeholder={this.props.placeholder || null}
            required={this.props.required || null}
            step={this.props.step || null}
            type={this.props.type || 'text'}
          />
        )
    }
}
// Use Like This Way
<Input
hasLabel='true'
htmlFor='numberInput'
label='Number input'
required='true'
type='number'
min='0.5'
max='100'
step='0.5'
/>

import React, { Component } from 'react'

export default class Select extends Component {
    render() {
        return (
            <select
            defaultValue=''
            id={this.props.htmlFor}
            name={this.props.name || null}
            required={this.props.required || null}
          >
            <option value='' disabled>Select one option</option>
  
            {selectOptionsList}
          </select>
        )
    }
}


// Use Like This Way
<Select
hasLabel='true'
htmlFor='select'
label='Select'
options='one, two, three, option four, five'
required='true'
/>

// Create component for datalist input
class Datalist extends React.Component {
  render() {
    // Get all options from option prop
    const dataOptions = this.props.options.split(', ');

    // Generate list of options
    const dataOptionsList = dataOptions.map((dataOption, index) => {
      return <option key={index} value={dataOption} />
    });

    return (
      <fieldset>
        <Label
          hasLabel={this.props.hasLabel}
          htmlFor={this.props.htmlFor}
          label={this.props.label}
        />
        
        <input list={this.props.htmlFor} />
          
        <datalist
          defaultValue=''
          id={this.props.htmlFor}
          name={this.props.name || null}
          required={this.props.required || null}
        >
          <option value='' disabled>Select one option</option>

          {dataOptionsList}
        </datalist>
      </fieldset>
    );
  }
};

// Use This Way 
     <Datalist
          hasLabel='true'
          htmlFor='datalist'
          label='Datalist'
          options='Chrome, Edge, Firefox, Internet Explorer, Opera, Safari, Vivaldi'
          required='true'
        />

import React, { Component } from 'react'

export default class TextArea extends Component {
    render() {
        return (
            <textarea
            cols={this.props.cols || null}
            id={this.props.htmlFor}
            name={this.props.name || null}
            required={this.props.required || null}
            rows={this.props.rows || null}
          >
          </textarea>
        )
    }
}
// Use Like This Way
<Textarea
hasLabel='true'
htmlFor='textarea'
label='Textarea'
required='true'
/>

import React, { Component } from 'react'

export default class CheckBox extends Component {
    render() {
        return (
            <label
            htmlFor={this.props.htmlFor}
            label={this.props.label}
          >
            <input
              id={this.props.htmlFor}
              name={this.props.name || null}
              required={this.props.required || null}
              type='checkbox'
            />
            {this.props.label}
          </label>
        )
    }
}
//Use Like This Way 
<Checkbox
hasLabel='true'
htmlFor='checkbox'
label='Checkbox'
required='true'
/>

import React, { Component } from 'react'

export default class Radio extends Component {
    render() {
        return (
            <Radio
            hasLabel='true'
            htmlFor='radioTwo'
            label='Radio two'
            name='radios'
            required='true'
          />
        )
    }
}
// Use Like This Way
<label
htmlFor={this.props.htmlFor}
label={this.props.label}
>
<input
  id={this.props.htmlFor}
  name={this.props.name || null}
  required={this.props.required || null}
  type='radio'
/>
{this.props.label}
</label>

import React, {Component} from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css';

class CustomComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [
                {
                    firstName: "Alexander",
                    lastName: "Hamilton",
                    age: 19
                },
                {
                    firstName: "Eliza",
                    lastName: "Schuyler",
                    age: 18
                },
                {
                    firstName: "George",
                    lastName: "Washington",
                    age: 27
                },
                {
                    firstName: "Aaron",
                    lastName: "Burr",
                    age: 20
                }
            ]
        }
    }
    render() {
        let { data } = this.state;
        return (
            <div>
                <ReactTable
                    columns={[
                        {
                            Header: "First Name",
                            accessor: "firstName"
                        },
                        {
                            Header: "Last Name",
                            id: "lastName",
                            accessor: d => d.lastName
                        },
                        {
                            Header: "Age",
                            accessor: "age"
                        }
                    ]}
                    data={data}
                />
            </div>
        );
    }
}

export default CustomComponent;

import React, {Component} from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css';
import axios from 'axios';

class CustomComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: []
        }

    }
    componentDidMount() {
        axios.get('https://restcountries.eu/rest/v2/lang/es').then(response => {
this.setState({data:response.data})
        } ).catch(error => {
            alert("Something Went Wrong");
        })
    }

    render() {

        let tableData = this.state.data;
        const col = [{Header:"Name",accessor:"name"},{Header:"Capital",accessor:"capital"}];
        return (
            <div>
                <ReactTable
                    columns={col}
                    data={tableData}
                    defaultPageSize={5}
                    pageSizeOptions={[2,3,5,7]}
                />
            </div>
        );
    }
}

export default CustomComponent;

import React, {Component} from 'react';
import reacttable from 'react-table-6';
import 'react-table-6/react-table.css';
import ReactTable from "react-table-6";

class MyTable extends Component {

    render() {
        const data = [{'name':'ahmmed'}];
        const column = [{header:"Name",accessor:"name" }];


        return (
            <div>
                <ReactTable data={data} columns={column}
                            getTdProps={(state, rowInfo, column, instance) => {
                                // rowInfo contains a lot of information about the row (including index on both the
                                // page and it's index within the data set), the rowInfo.original objet contains
                                // values in the cells of the row clicked.
                                return {
                                    // You can define an onClick function here that will apply to all rows
                                    onClick: (e, handleOriginal) => {
                                        const rowData = rowInfo.original;
                                        // You can interact with the row data here, to use it however you want
                                        this.setState({name: rowData.name})
                                        console.log(rowData);
                                    }
                                }
                            }}

                ></ReactTable>
            </div>
        );
    }
}

export default MyTable;