code exercises

// 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.message...

/*const For action.type*/ const LOGIN='LOGIN'; const LOGOUT='LOGOUT'; const defaultState = {   authenticated: false }; const authReducer = (state = defaultState, action) => {   switch (action.type) {     case LOGIN:       return {         authenticated: true       }     case LOGOUT:       return {         authenticated: false       }     default:       return state;   } }; const store = Redux.createStore(authReducer); const loginUser = () => {   return {     type: LOGIN   } }; const logoutUser = () => {   return {     type: LOGOUT   } }; /*store.subscribe() function*/ const ADD = 'ADD'; const reducer = (state = 0, action) => {   switch(action.type) {     case ADD: ...

/*Handle an Action*/ const defaultState = {   login: false }; const reducer = (state = defaultState, action) => {   return action.type==='LOGIN' ? state={login:true} : state }; const store = Redux.createStore(reducer); const loginAction = () => {   return {     type: 'LOGIN'   } }; /*Switch Statement to Handle Multiple Actions*/ const defaultState = {   authenticated: false }; const authReducer = (state = defaultState, action) => {  switch(action.type) {     case 'LOGIN':        return {authenticated: true};     case 'LOGOUT':        return {authenticated: false};     default:        return state;     } }; const store = Redux.createStore(authReducer); const loginUser = () => {   return {     type: 'LOGIN'   } }; const logoutUser = () ...

Create a Redux Store const reducer = (state = 5 ) => { return state; } const store=Redux.createStore(reducer) Get State from the Redux Store const store = Redux.createStore( (state = 5 ) => state ); const currentState=store.getState() Define a Redux Action const action={ type : 'LOGIN' } Define an Action Creator const action = { type : 'LOGIN' } function actionCreator(){ return action } Dispatch an Action Event const store = Redux.createStore( (state = {login: false }) => state ); const loginAction = () => { return { type : 'LOGIN' } }; store.dispatch(loginAction ()); store.dispatch({ type : 'LOGIN' });

If they ask "how old are you" before entering the club,this is a good training. HTML(none) <div id="app"></app> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block a   color: white p   margin-top: 1em   text-align: center   color: #aaa JAVASCRIPT(babel) const inputStyle = {   width: 235,   margin: 5 }; class CheckUserAge extends React.Component {   constructor(props) {     super(props);     this.state = {       input: "",       userAge: ""     };     this.submit = this.submit.bind(this);     this.handleChange = this.handleChange.bind(this);   } ...

HTML(none) <div id="app"></div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block JAVASCRIPT(babel) class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       display: true     }     this.leopardDisplay = this.leopardDisplay.bind(this);   }   leopardDisplay() {     this.setState({       display: !this.state.display     });   }   render() {     if(this.state.display) return (        <div>          <button onClick={this.leopardDisplay}>Snow Leo...

HTML <div id="pdiv">   <p>Press Enter</p> </div> <div id="app"> </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: lightblue   display: inline-block    p   font-size: 1.8em   font-family: Verdana   color: black JAVASCRIPT(babel) class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       message: ""     };     this.handleEnter = this.handleEnter.bind(this);     this.handleKeyPress = this.handleKeyPress.bind(this);   }   componentDidMount() {     document.addEventListener("keydown", this.handleKeyPress);   ...

HTML <div id="app">   </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: lightblue   display: inline-block JAVASCRIPT(babel)  class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       programmers: null     };   }   componentDidMount() {     setTimeout( () => {       this.setState({         activeUsers: 3051       });     }, 50001);   }   render() {     return (       <div>         <h1>Programmers: { this.state.programmers }</h1>   ...

HTML <div id="app">   </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: lightblue   display: inline-block input   color: black,   font-size: 1.4em p   margin-top: 1em   text-align: center   color: #aaa,   font-size: 2em JAVASCRİPT(babel)/*Reactjs*/ class MyApp extends React.Component { constructor(props) { super(props); this.state = { inputValue: '' } this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ inputValue: event.target.value }); } render() { return ( <div> <GetInput input= {this.state.inputValue} handleChange={this.handleChange}/> ...

HTML <div id="app">   </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block a   color: white p   margin-top: 1em   text-align: center   color: #aaa JAVASCRIPT(babel)/*Reactjs codes in here.*/ class MyApp extends React.Component {   constructor(props) {     super(props);     this.state = {       name: "Ordinary Student",       property: "Student"     };   }   render() {     return (       <div>         <Navbar property={this.state.property} />       </div>     );   } ...