티스토리 뷰

업무/리액트

리액트 연습 화면하나 만들기 !

/daydreamer 2022. 3. 16. 15:51

 

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Staking EX</title>
	</head>

	<body>
		<div id="root"></div>
	</body>

</html>

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';


import {createStore} from 'redux';
import rootReducer from './Reducers';


const store = createStore(rootReducer);



ReactDOM.render(
	
	<Provider store = {store}>
		<App />
	</Provider> //provider 를 사용하여 react-redux 연동
	,
	document.getElementById('root')
);

/* app.js 호출  */


//reportWebVitals();
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

 

 

app.js

import React from "react";

import './App.css';

import {useSelector, useDispatch} from 'react-redux';
import * as walletActions from './Actions/connectInfo';
import * as webActions from './Actions/webInfo';

import TopBar from "./Components/top";
import BtnConnect from "./Components/btnConnect"
import BtnStaking from "./Components/btnStaking"



const App = () =>{
	const web = useSelector((store) => store.web);
	const wallet = useSelector((store) => store.wallet);
	const dispatch = useDispatch();
	const update_ = (type, data) =>{
		console.log('Type:::::::'+ type); //wallet 이어야함 
		console.log('Data:::::::'+ data);
			
		if(type===walletActions.WALLET){
			dispatch(walletActions.update(data));
		}else if(type===webActions.WEB){
			dispatch(webActions.update(data));
		}
	}

	return(
		<div className="App">			
			<TopBar />
			

		<body className="App-body">
			<section >
				<div className="container">
					<div>
					{/* 지갑연결 버튼  */}
						<BtnConnect data = { {web : web, wallet : wallet, update : update_} }></BtnConnect>
					
					{/* 스테이킹 화면 */}
						<BtnStaking data = {{web : web, wallet : wallet, update : update_} }></BtnStaking>

					</div>			
				</div>
			</section> 
		</body>

		</div>
	);
}

export default App;
저작자표시 비영리 변경금지

'업무 > 리액트' 카테고리의 다른 글

리액트 기초 (2)  (0) 2022.03.16
리액트 기초 (1)  (0) 2022.03.13
리액트 설치  (0) 2022.03.10
공유하기 링크
댓글