Next의 기본 지식을 소개합니다.회사 명

33790 단어 reactnodenextjstutorial
다음js는 서버에react 응용 프로그램을 보여주는 프레임워크입니다.이것은 우리가 일반적인react 응용 프로그램 (예를 들어 create-react-app) 을 만들고 브라우저에 불러올 때 모든 내용이 클라이언트javascript에서 만들어진다는 것을 의미한다.따라서javascript가 없는 사용자나 장치는 응용 프로그램에 접근할 수 없습니다.
브라우저에서react 프로그램을 열고 페이지 원본 코드를 볼 수 있습니다.당신은 당신이 만든 내용을 볼 수 없을 것입니다!실제로 프로젝트가 create-react-app을 통해 생성된 경우 다음을 볼 수 있습니다.
<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
이것은 명백히 알 수 있다. 왜냐하면react에 대한 우리의 행동은 단지 내용을 #root에 부가하는 것뿐이기 때문이다.자바스크립트를 사용하지 않으면 내용이 사라집니다.
따라서 다음.js, 그것은 우리를 위해 이 문제를 해결했다.
다음 단계를 동시에 배우다.js는 인스타그램의 기본 기능을 갖춘 작은 프로그램을 만들고 있습니다. - 마음에 들면 미니 인스타그램 복제입니다.나는 우리가 오늘 쓸 코드가 신축할 수 없다는 것을 알고 있기 때문에react 응용 프로그램에 대한 공헌은 크지 않지만,next의 기본 내용을 포함할 것이다.회사 명

시작합시다.


우선, 우리는 document.getElementById('root')을 초기화하고next에 필요한 유일한 소프트웨어 패키지를 설치해야 한다.js 작업:
npm init
npm install --save next react react-dom
(npm을 사용하는 경우 어떻게 해야 하는지 알 수 있음)
생성된 yarn에 다음 스크립트를 추가해야 합니다.
  "scripts": {
    "start": "next"
  },
브라우저에서 이 프로그램을 실행하려면 package.json을 실행해야 합니다.
다음js는 우리가 페이지를 통해 노선을 조직할 수 있도록 허락합니다.이 강좌에서, 우리는 두 페이지를 만들어서 그들이 어떻게 상호작용을 하는지 이해할 것이다.먼저 색인 페이지를 만듭니다.그것은 npm start에 필요하다.다음 항목을 추가합니다.
export default () => (
    <div className="app">
        <header>
            <h1>gallery</h1><h2>Original art</h2>
        </header>
    </div>
)
이렇게./pages/index.js을 실행하면 색인 페이지가 표시됩니다.물론, 여기서 가장 중요한 것은 페이지 원본 코드를 보면, 위의 HTML이 다음 js에서 우리를 위해'하드 인코딩'하는 것을 볼 수 있다는 것이다.

스타일링


CSS 스타일은 npm start으로 바로 이동할 수 있습니다.각 섹션을 모듈화합니다.우리 제목을 예쁘게 합시다.

export default () => (
    <div className="app">
        <header>
          <h1><Link href={{ pathname: '/' }}><a>gallery</a></Link></h1>
        </header>
        <style jsx>{`
            @import url('https://fonts.googleapis.com/css?family=Oleo+Script');
            //... you can get the full code at github
            header h1{
                font-family: 'Oleo Script', cursive;
                font-size: 25rem;
                color: #AD0044;
                text-shadow: #7F0D23 0px 0 40px;
                letter-spacing: -20px;

                display: inline-block;
            }
            h2{
                font-size: 3.5rem;
                color: white;
                text-shadow: none;
                letter-spacing: normal;
                font-weight: normal;
                font-family: 'Dancing Script', cursive;
                position: absolute;
                top: 50%;
                left: 50%;
            }

        `}</style>
    </div>
)
문서에서 "우리는 독립적인 역할 영역 CSS에 대한 지원을 제공하기 위해 스타일화된 jsx를 묶었다."
이런 식으로 패턴을 넣는 게 해커 같아!나는 외부 스타일을 더 좋아하지만, 그것은 확실히 모든 고립을 유지하는 데 도움이 된다.나는 단지 습관이 필요할 뿐이다. 아마도.

구성 요소 추가

pages/index.js에 레이아웃 구성 요소를 추가한다고 혼란스럽지 않도록 이 코드를 한층 더 분할합시다
import Link from 'next/link'
import Head from 'next/head'

export default ({ children, title = 'gallery: original art' }) => (
    <div>
        <Head>
        <title>{ title }</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
        </Head>
        <div className="app">
            <header>
                <h1><Link href={{ pathname: '/' }}>gallery</Link></h1>
                <h2>Original art</h2> 
            </header>
            { children }
            <footer>
            Footer
            </footer>
        </div>
        <style global jsx>{`
            :root {
                --green:  #65C5D9; 
                --white: #F4F5F7;
                --light-gray: #EAEEEF;
            }
            ...
            body{...}
        `}</style>
        <style jsx>{`
            header{ ...}
            header h1 a{ ...}
            h2{....}
            footer { ...}

        `}</style>
    </div>
)
위에서 주의해야 할 몇 가지 중요한 사항:
  • 다음.js는 HTML ./components/Layout.js 태그의 내용을 조작할 수 있는 Head 구성 요소를 제공합니다.예를 들어, 더 많은 메타 정보가 필요할 수 있습니다.
  • 우리는 <head> 구성 요소를 사용하여 페이지를 조회해야 합니다.그것도 닻 라벨이 필요하다.나는 빈 닻 표시를 추가했지만, 그 다음에 그에 상응하는 닻을 채울 것이다.
  • 저는 두 가지 스타일 표시를 사용했는데 하나는 Link입니다.가장 좋은 예는 css 변수와 바디 표시입니다.각 페이지/구성 요소는 이 정보에 접근해야 하기 때문에 global.
    • global으로 돌아가서 우리는 계속 이렇게 한다.
    import Layout from '../components/Layout';
export default () => (
    <Layout>
       <p>this is the content </p>
    </Layout>
)

    약간의 데이터를 처리하다.

    ./pages/index.js 페이지 구성 요소를react 구성 요소로 변환하고react 구성 요소의 생명 주기에서 데이터를 얻거나 무상태 함수 방법을 계속 사용할 수 있습니다.이 강좌에서, 우리는react 구성 요소를 도입하지 않고 간단하게 유지할 것입니다. (다음 강좌에서 소개할 것입니다.)
    import Layout from '../components/Layout';
import getPhotos from '../data/data.js'
const Index = (props) => (
    <Layout>
       <p>{props.images[0].tagline}</p>
    </Layout>
)
Index.getInitialProps = async ({ }) => {
  // Would fetch data
  return {  images: getPhotos()  } // return { images: [ { }, { } ] }
}

export default Index
    Index 우리는 획득 조작을 실행하고 얻은 데이터를 getInitialProps 도구에 전달할 것입니다. 그러나 우리는 여기에서 그것을 하드코딩하는 것은 단지 편의를 위해서입니다.Index에 다음과 같은 하드 인코딩 데이터가 있습니다.
    export default () => {
    return [
        {
            id: 0,
            tagline: 'You\'re looking at me punk?', 
            image: '927756_283684128492129_838664181_n',
            likes: 2,
            comments: [
                {
                    user: 'rex2018',
                    body: 'Hey this is dope! xxx'
                }
            ]
        },
        ...
    ]
  }
    이 모든 데이터는 아이템을 통해 얻을 수 있습니다../data/data.js 구성 요소의 데이터를 어떻게 처리하는지는 기본적인react 내용입니다.일단 Index 구성 요소를 편집하도록 하겠습니다.
    import Layout from '../components/Layout';
import getPhotos from '../data/data.js'
import Photo from '../components/Photo';
const Index = (props) => (
    <Layout>
       {
        props.images.map((image, key) => <Photo id={key} id={key} data={image} />)
       }
    </Layout>
)
...
    우리는 각 이미지를 순환하고 Index 구성 요소를 렌더링합니다.Photo에서 이 구성 요소를 만들어야 합니다.
    import CommentsFunctionality from './InteractiveButtons'
import Link from 'next/link'

export default (props) => {
    return (
        <div className="photoComponent">
            <div style={{flex: '1 0 auto'}}>
                <Link href={{ pathname: '/photo', query: { id: props.id } }}>
                    <img src={`/static/art/${props.data.image}.jpg`} alt=""/>
                </Link>
                <div className="meta">
                    <p className="tagline">{props.data.tagline}</p>
                    <CommentsFunctionality likes={props.data.likes} />
                </div>
            </div>
            <style>{`
                .photoComponent {
                    ...
                }
            `}</style>
        </div>
    )
}
    요컨대, ./components/Photo.js에서 우리는 모든 그림을 순환해서 훑어보았다.각 이미지에 대해 위의 ./pages/Index.js 어셈블리를 렌더링합니다.그 중의 새로운 내용은 코드를 단독 Photo 구성 요소로 옮기기로 결정했다는 것이다.처음에 내가 이렇게 한 것은 순전히 InteractiveButtons 구성 요소의 CSS를 깨끗하게 유지하기 위해서였다.어쨌든 이것은 Photo의 코드이다
    import { MdModeComment, MdFavoriteBorder } from 'react-icons/md'
export default ({likes}) => (
    <div className="meta">
        <a href="/" className="heart"><MdFavoriteBorder />34</a>
        <a href="/"><MdModeComment />{likes}</a>
        <style>{`....`}</style>
    </div>
)
    나는 방금 InteractiveButtonsnpm 모듈을 찾았고, 동시에 아이콘을 추가하는 방법을 찾았으며, 어떠한 css 프레임워크도 다운로드하지 않았다. 나는 이것을 정말 좋아한다.그것은 사용하기 쉽다.here에서 제공하는 모든 아이콘을 볼 수 있습니다.이상 재료 설계 아이콘에 react-icons 및 MdModeComment을 요청합니다 (이에 따라 MdFavoriteBorder)

    정적 파일

    /md 구성 요소에서 ./components/Photo.js 디렉터리에서 이미지 파일에 접근하려고 합니다.우리가 해야 할 일은 이 디렉터리를 만들고 이미지 파일을 추가하는 것입니다.js는 나머지 부분을 책임진다.
    지금까지의 최종 결과:

    다른 페이지 만들기


    우리는 지금 위의 사진 중 하나를 클릭하고 그들에 대한 정보를 더 많이 볼 수 있어야 한다.static 구성 요소 중 다음 코드가 있습니다.
    <Link href={{ pathname: '/photo', query: { id: props.id } }}>
    <img src={`/static/art/${props.data.image}.jpg`} alt=""/>
</Link>
    클릭하시면 ./components/Photo.js으로 넘어갑니다.따라서, /photo?id=0 구성 요소는 하나의 검색을 받아들일 수 있으며, 우리는 그 안에 자신의 검색 문자열을 추가할 수 있습니다.이런 상황에서 우리는 도구에서 id를 가져와 전달하기만 하면 된다.
    그리고 Link페이지를 만들어야 합니다.
    import Layout from '../components/Layout';
import Photo from '../components/Photo';
import CommentsFunctionality from '../components/InteractiveButtons'
import getPhotos from '../data/data.js' 
const PhotoPage = (props) => (
    <Layout>
        <div className="container">
            <div className="display_image">
                <img src={`/static/art/${props.image.image}.jpg`} alt=''/>
                <CommentsFunctionality />
            </div>
            <div className="comments">
                <p className="tagline">{props.image.tagline}</p>
                {
                    props.image.comments.map((comment, key) => <p key={key}><strong>{comment.user}:</strong>{comment.body}</p>)
                }
                <form className="comment-form" >
                    <input type="text"placeholder="Author" />
                    <input type="text"  placeholder="comment..." />
                    <input type="submit" hidden />
                </form>
            </div>
        </div>
        <style>{` `}</style>
    </Layout>
)

PhotoPage.getInitialProps = async ({query}) => {
    // could fetch data here
    let {id} = {...query}
    let image = getPhotos().find(m => m.id == id)
    return { image } 
}

export default PhotoPage
    중요한 기능은 ./pages/photo.js 내부에 있습니다.다른 정보에서, getInitialProps은 검색 문자열에 접근할 수 있기 때문에, 우리는 asgetInitialProps을 전달하고, 그 중에서 우리는 색인 페이지에서 온 id를 얻는다.그리고 우리는 같은 id를 가진 {query} 대상을 찾아 구성 요소 도구로 전달할 수 있습니다.
    이것은 내가 다른 파일(image)에 데이터를 추가한 유일한 이유이다../data/data.js이 검색 문자열을 바탕으로 데이터를 얻는 가장 기본적인 방식을 보여 줍니다.url 가져오기 getInitialProps단일 사진 페이지 완성:

    결론


    이것은 데이터를 처리하는 가장 좋은 방법이 아니라는 것을 쉽게 알 수 있다.우리는 정말react 구성 요소를 추가하고react의 구성 요소의 생명 주기를 이용해야 합니다.비록 나는 Redux에 비하면 이 점도 부족하다고 생각한다.
    내가 말한 바와 같이 다음 강좌에서react 구성 요소를 사용하여 API에서 완전히 같은 데이터를 얻고 칭찬과 주석을 더욱 동적으로 얻을 것이다.
    또한 github (branch 'part1')에서 모든 코드를 얻을 수 있습니다

    Next 소개js- API에서 데이터 가져오기

    아레르 쿠투라・ 2018년 8월 24일・ 5분 읽기

    #nextjs #node #react #tutorial
    ssh 서버 이름 비밀번호 없이 원격 서버에 로그인
    Vue.JS로 간단한 다크 테마 전환

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage