ReactJS - Add React to a New Application

ReactJS - Add React to a New Application

Installing Create React App

$sudo yarn add -g create-react-app

$create-react-app my-app

$cd my-app

~/my-app$ yarn start

Open to localhost:3000 - Default page of your project

Building the app for production and ready to be deployed.

React를 프로덕션 모드에 올바르게 묶고 최적의 성능을 위해 빌드를 최적화 한다.

~/my-app$ yarn build

~/my-app$ yarn global add serve

~/my-app$ serve -s build

Open to localhost:5000 - Default page of your project

Ejecting the app for use

현재 프로젝트의 모든 설정 및 스크립트를 개발자가 사용할 수 있도록 밖으로 꺼네는 것을 말한다.

이 방법은 단방향 명령방식으로서 한번 실행하면 돌이킬 수 없다. 신중을 기하자

~my-app$ yarn eject

? Are you sure you want to eject? This action is permanent. (y/N) y

Eject에 성공하였으며 왜 Eject하였는지 설문에 응해달라고 함!!

Adding React-Bootstrap 버전준수

동적이고 스타일리쉬한 Bootstrap 라이브러리 추가하기

~/my-app$ yarn add react-bootstrap

~/my-app$ yarn add bootstrap@3

react-bootstrap 라이브러리에는 css가 포함되어 있지 않으므로 두번째 설치한 bootstrap라이브러리의 css 를 index.js로 import시키자.

index.js

/..../

import 'bootstrap/dist/css/bootstrap.css';

import 'bootstrap/dist/css/bootstrap-theme.css';

/...../

App.js

/...../

import {Navbar, Nav, NavItem, MenuItem, NavDropdown} from 'react-bootstrap';

/..../

<div className="App">

<Navbar>

<Navbar.Header>

<Navbar.Brand>

<a href="#">React-Bootstrap</a>

</Navbar.Brand>

<Navbar.Header>

<Nav>

<NavItem eventKey={1} href="#">Link</NavItem>

<NavItem eventKey={2} href="#">Link</NavItem>

<NavDropdown eventKey{3} title='Dropdown' id="basic-nav-dropdown">

<MenuItem eventKey{3.1}>Action</MenuItem>

<MenuItem eventKey{3.2}>Action</MenuItem>

<MenuItem eventKey{3.3}>Action</MenuItem>

<MenuItem divider />

<MenuItem eventKey{3.3}>Separate link</MenuItem>

<NavDropdown>

</Nav>

</Navbar>

/...../

</div>

react-bootstrap : Grid, Row, Col

App.js

/...../

import {Grid, Row, Col} from react-bootstarap;

/...../

render() {

const NUMBER_OF_PARAGRAPHS = 15;

      const paragraphs = flatten(times(NUMBER_OF_PARAGRAPHS, (index) =>

          (<p key={index}>React에 간편하게 bootstrap을 달아보자!------

          최근 리액트 프로젝트를 시작하며 어떠한 스타일링 라이브러리를 달아볼까 생각하다가 아직은 알파버전 이지만 쉽고 직관적인 class와 scss를 사용하는 bootstrap4를 적용하기로 했습니다. bootstrap을 적용하는 여러가지 방법이 있지만 쉽고 유용한 방법을 찾던 중 reactstrap 이라는 프로젝트를 발견하게 되었죠!

          bootstrap의 다양한 엘리먼트들을 컴포넌트로 제공해서 직접 import 하여 사용할 수 있는 편리한 라이브러리입니다.</p>)

      ));

return(

/...../

<div className="App-intro">

            <Grid>

                <Row className="show-grid">

                    <Col lg={8}>

                        {paragraphs.map(paragraph => paragraph)}

                     </Col>

                    <Col lg={4}>

                       sidebar

                    </Col>

                </Row>

            </Grid>

        </div>

/...../

Adding Lodash

모듈성, 성능 및 부가 기능을 제공하는 최신 javascript 유틸리티 라이브러리

~/my-app$ yarn add lodash

Adding sticky 버전 준수

버전이 안맞으면 TypeError: this.props.children is not a function 발생

~/my-app$ yarn add sticky@5

App.js

/...../

import {StickyContainer, Sticky } from react-sticky;

/...../

class App extends Component {

  render() {

/...../

const NUMBER_OF_KITTIES = 5;

        const kitties = range(0, NUMBER_OF_KITTIES).map((i) => {

          return (

              <div classname="sidebar-kitties" key={i}>

                <StickyContainer style={{zIndex: 2}}>

                  <Sticky>

                    <img src="http://placekitten.com/g/300/250" alt="kittie" />

                  </Sticky>

                  <div style={{height: "300px"}}></div>

                </StickyContainer>

              </div>

          )

        });

return (

/...../

<div className="App-intro">

            <Grid>

                <Row className="show-grid">

                    <Col lg={8}>

                        {paragraphs.map(paragraph => paragraph)}

                     </Col>

                    <Col lg={4}>

                        {kitties}

                    </Col>

                </Row>

            </Grid>

/...../

)

서버를 실행하고 테스트 페이지를 위 아래로 스크롤 해보면 고양이 사진이 점점 달라붙었다 떴어졌다를 하는 것을 확인할 수 있다.

Previous Page

Next Page