React 를 신속하게 구축 하 는 환경 절차 에 대한 상세 한 설명
본 고 는 전단 개발 이기 React 와 프로젝트 구축 과정 에서 관련 된 기술 스 택 을 소개 하여 전체 구축 절차 에 대한 사 고 를 시작 하려 고 한다.
한 가지 일의 원 리 를 알 아 내 려 면 그 목적 이 무엇 인지 먼저 알 아야 한 다 는 점 을 지적 할 필요 가 있다.
1、Nodejs & NPM
왜 nodejs 얘 기 를 해요?
nodejs 는 서버 개발 의 또 다른 가능성 을 제공 하기 보 다 는 전체 전단 개발 의 생태 를 철저하게 바 꾸 었 다.nodejs 플랫폼 에서 강력 한 npm,grunt,express 등 이 파생 되 어 전단 의 작업 절차 와 개발 방식 을 거의 새롭게 정의 했다.
NPM(node package manager)이라는 패키지 관리 자 를 말씀 드릴 필요 가 있 습 니 다.
npm 는 javascript 패키지 관리자 입 니 다.우 리 는 npm 에서 수많은 개발 자 들 이 기여 한 코드 패 키 지 를 찾 고 공유 하 며 사용 할 수 있 습 니 다.스스로 바퀴 를 만 들 필요 가 없습니다.
npm 를 사용 하려 면 node 를 설치 해 야 합 니 다.새로운 버 전의 nodejs 는 npm 를 통합 하여 nodejs 를 설치 하고 다음 명령 을 통 해 설 치 된 버 전 을 봅 니 다.
$ npm -v
$ npm install2、React
React 의 구성 화 사상 으로 인해 코드 의 중용 성 이 높 고 테스트 하기 쉬 우 며 관심 사(separation of concerns)를 분리 하기 쉽다.
리 액 트 는 또 Learn Once,Write Anywhere 를 선언 했다.클 라 이언 트 브 라 우 저 에서 실행 할 수 있 고 서버 에서 렌 더 링 할 수 있 으 며 React Native 는 React 개발 원생 app 을 가능 하 게 합 니 다.
다음 에 실행 할 수 있 도록 간단 한 React 프로그램 을 쓰 겠 습 니 다.
프로젝트 디 렉 터 리:
첫 번 째 단계:패키지.json 파일 을 새로 만 들 고 프로젝트 에 필요 한 의존 패 키 지 를 지정 합 니 다.
{
"name": "react-tutorials",
"version": "1.0.0",
"description": "",
"author": "yunmo",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
"build": "webpack --progress --colors --minimize"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
},
"license": ""
}
두 번 째 단계:index.html 파일 을 새로 만 듭 니 다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>yunmo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
</head>
<body>
<div id="yunmo"></div>
<script src="bundle.js"></script>
</body>
</html>
var React = require('react');
var ReactDOM = require('react-dom');
var element = React.createElement(
'h1',
{className: 'yunmo'},
' ， react ！'
);
ReactDOM.render (
element,
document.getElementById('yunmo')
);
그렇다면 브 라 우 저 에서 어떻게 실행 합 니까?강력 한 웹 팩-dev-server 를 통 해 로 컬 서버 를 열 어야 합 니 다.
위 에 있 는 package.json 에는 웹 팩 과 웹 팩-dev-server 의존 패키지 가 있 습 니 다.다음은 웹 팩 을 소개 하 겠 습 니 다.
물론 nodejs 를 통 해 로 컬 서버 를 만 들 수 있 지만,웹 팩-dev-server 는 작은 nodejs Express 서버 로 웹 팩-dev-middleware 미들웨어 미들웨어 를 사용 하여 웹 팩 패키지 에 서 비 스 를 제공 합 니 다.
webpack.config.js 파일 설정 은 다음 과 같 습 니 다.
var webpack = require('webpack');
module.exports = {
entry: ['./app/main.js'],
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
loaders: []
}
}
$ npm start
React 브 라 우 저 실행 결과
간단 한 React 프로젝트 가 실행 되 기 시작 했다.
3、Webpack
웹 팩 은 현대 자바 스 크 립 트 응용 모듈 로 딩 및 포장 도구 입 니 다.자바 스 크 립 트 뿐만 아니 라 styles,images 등 자원 도 포장 할 수 있 습 니 다.
전형 적 인 웹 팩 설정 보기:
var webpack = require('webpack');
var path = require('path')
module.exports = {
entry: ['./app/main.js'],
output: {
path: path.resolve(__dirname, '/build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
4.567917.entry―webpack 은 응용 의존 관계 에 따라 관계 표를 만 듭 니 다.이 표 의 시작 점 은 이른바 entry point(입구 점)이다.entry point 는 웹 팩 이 어디서 시작 하 는 지 알려 줍 니 다.웹 팩 은 이 표 의 의존 관 계 를 포장 근거 로 합 니 다
4、ES6
ES6,즉 ECMAScript 6.0 은 자 바스 크 립 트 의 차세 대 표준 이다.ES6 에는 복잡 한 응용 프로그램 을 더욱 우아 하고 자 연 스 럽 게 만 드 는 문법 적 특성 이 많이 추가 되 었 다.
ES6 에 let 와 const,화살표 함수,할당 해제,문자열 모드,Module,Class,Promise 등 특성 을 도입 하여 앞 뒤 프로 그래 밍 언어 가 문법 형식 에서 의 차이 가 점점 작 아 집 니 다.
우리 한번 봅 시다.
import React from 'react' //
import '../styles/reactStack.scss'
class ReactStack extends React.Component { //class
render() {
const learner = {name: ' ', age: 18} //const
const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]
const extraSkills = ['Git', 'Postman']
const skillSet = [...mainSkills, ...extraSkills]
const { name } = learner //
let greetings = null //let
if (name) {
greetings = `${name}, ${mainSkills[0]} ！` //
}
//
return (
<div className="skills">
<div>{greetings}</div>
<ol>
{skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
</ol>
</div>
)
}
}
export default ReactStack //
5、Babel
바벨 은 자 바스 크 립 트 컴 파일 러 다.
Babel 은 ES6 문법 코드 를 ES5 코드 로 변환 하여 브 라 우 저 환경 에서 호 환 할 수 있 습 니 다.
Babel 은 JSX 에 대한 지원 이 내장 되 어 있 기 때문에 우 리 는 위 에서 처럼 JSX 형식의 코드 세 션 을 직접 return 할 수 있 습 니 다.
구체 적 인 용법 은 본문 에서 지나치게 서술 하지 않 는 다.
6.Styles 도입
위의 코드 에는 다음 과 같은 스타일 도입 방식 이 있 습 니 다.
import '../styles/reactStack.scss'
body {
background: #f1f1f1;
}
.skills {
h3 {
color: darkblue;
}
ol {
margin-left: -20px;
li {
font-size: 20px;
color: rgba(0, 0, 0, .7);
&:first-child {
color: #4b8bf5;
}
}
}
}
webpack.config.js 에 해당 하 는 설정 은 다음 과 같 습 니 다.
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'
ReactDOM.render (
<ReactStack />,
document.getElementById('yunmo')
);
결어
이로써 간단 한 React 프로젝트 가 세 워 졌 다.
후속 적 인 글 에서 저 는 본 고 에서 언급 한 React 기술 창고 에 대해 전문 적 인 설명 을 할 것 입 니 다.딱딱 한 기능 에 만 국한 되 는 것 이 아 닙 니 다.물론 더 많은 것 은 실천 방법 에 대한 정리 이다.그들의 이론 을 파악 하려 면 공식 문서 와 소스 코드 를 자세히 보 는 것 이 가장 좋 은 방법 이기 때문이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
