Apply for Zend Framework Certification Training

ReactJs



< Context api in reactJs React Hooks Tutorial – useState by examples >



Step - 1 npm i create-react-app
Step - 2 npx create-react-app redux-app
Step- 3 cd redux-app
        d:/redux-app>npm start
 
Step -4 d:/redux-app>^c
d:/redux-app>y
d:/redux-app> npm i redux
d:/redux-app> npm i react-redux
d:/redux-app> npm start
 
 
Step -5 create an file products.jsx in src/componants folder
 
import {useDispatch} from 'react-redux'
const Products = ()=>{
    const dispatch = useDispatch();
    return(
        <>
        <img src="school-bag.jpg"/><br/>
        <input type="button" value="+" onClick={(e)=>dispatch({'type':'INCREMENT'})}/>
 
 
        <input type="button" value="-" onClick={(e)=>dispatch({'type':'DECREMENT'})}/>
        
        </>
    )
}
export default Products
 
Step - 6 Create an file cart.jsx in src/componants folder
 
import { useSelector } from "react-redux"
const Cart = ()=>{
   const selector = useSelector(state=>state)
    return(
        <>
        {selector}
        </>
    )
}
export default Cart
 
Step -7 Create a page productpage.js i src/pages folder
 
import Cart from "../componants/cart"
import Products from "../componants/products"
 
const Productpage = ()=>{
    return(
        <>
        {<Products/>}
        {<Cart/>}
        </>
    )
}
export default Productpage
 
 
Step -8 Create an file store.js in src folder
 
import { createStore } from "redux";
const Reducer =(state = 0 ,action)=>{
    if(action.type =='INCREMENT'){
        return state+1
    }
    if(action.type =='DECREMENT'){
        return state-1
    }
    return state;
 
}
export const store = createStore(Reducer)
 
Step -9 Add some code in index.js
 
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {store} from './store'
import { Provider } from 'react-redux';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);
 
 
reportWebVitals();
 
Step - 10 Add some code in App.js
 
import logo from './logo.svg';
import './App.css';
import Productpage from './pages/productpage';
function App() {
  return (
    <>
    {<Productpage/>}
    </>
  );
}
 
export default App;
 

< Context api in reactJs React Hooks Tutorial – useState by examples >



Ask a question



  • Question: 
    {{questionlistdata.blog_question_description}}
    • Answer:
      {{answer.blog_answer_description  }}
    Replay to Question

(+91)-9910699802
Become A Member     Become A Teacher
Back to Top