React 데모 프로젝트 연습하기

예전에 개발소스로 좀 연습을 했었는데... 다시 처음부터 프로젝트 생성부터 해서 다시 react연습 해보려고 합니다.

우선 프로젝트를 생성합니다.

npm install -g create-react-app

crete react-app demoproject

npm start 실행 하여 이제 실행되는거 확인하면 이제 소스 수정하여 데모프로젝트를 작업할 수 있습니다.

우선 다음의 모듈을 설치 합니다.

npm install bootstrap

npm install react-router

npm install react-router-dom

npm install reactstrap

1.  로그인 화면은 껍데기만 구현하였습니다.

로그인 화면 소스 Login.js

import 'bootstrap/dist/css/bootstrap.min.css';
import React from "react";
import { Button, Form, Input, Label } from 'reactstrap';
import './Login.css';

const Login = ({ history }) => {

    return (
        <div className="form-main">
        <Form className="form-signin" >
            <h2 className="form-signin-heading">Please sign in</h2>
            <Label for="inputEmail" className="sr-only">Email address</Label>
            <Input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
            <Label for="inputPassword" className="sr-only">Password</Label>
            <Input type="password" id="inputPassword" className="form-control" placeholder="Password" required />

            <Button className="btn btn-lg btn-block" color="primary" type="button" onClick={() => { history.push('/main') }}> Sign in</Button>
        </Form>
        </div>
    );

}

export default Login;

Login.css

.form-main {
  margin-top : 100px;
}

.form-signin  { 
  margin-bottom: 2px;
  width: 500px;
  height: 300ps;
  margin: 0 auto; 
}

.form-control {
  margin-bottom: 2px;
}

2. home 화면

App.js

import React from 'react';
import {Route} from 'react-router';
import './App.css';
import Login from './screens/login/Login';
import About from './screens/About';
import Posts from './screens/Posts';
import Mypage from './screens/Mypage';
import Search from './screens/Search';
import LayoutScreen from './layout/LayoutScreen';

class App extends React.Component {
  render() {
    return (
      <div className="App" >
        
        <Route exact path="/" component={Login}/>
        <Route path="/main" component={LayoutScreen}/>
        <Route path="/about" component={About}/>
        <Route path="/posts" component={Posts}/>
        <Route path="/mypage" component={Mypage}/>
        <Route path="/search" component={Search}/>
        
      </div>

    );
  }
}

export default App;

프로젝트 예제소스는 아래 github 에 올려 두었습니다. 직접 다운 받아서 모듈만 설치하고 npm start 하면 실행 됩니다.

github.com/sksmail/react-project-demo

sksmail/react-project-demo