집 > 기사 > 웹 프론트엔드 > React 환경 설정에 대한 튜토리얼

React 환경 설정에 대한 튜토리얼

php中世界最好的语言원래의: 2018-04-16 09:46:261108검색

이번에는 React 환경 구축에 대한 튜토리얼을 가져오겠습니다. React 환경 구축 시 주의 사항은 무엇인가요?

프런트엔드 생태계는 최근 몇 년 동안 큰 발전을 이루었습니다. 이 생태계에서 새로운 것을 받아들이지 않고 새로운 기술을 배우는 것은 악마의 길에 빠지는 것과 같습니다.

이 기사에서는 전체 구축 프로세스에 대해 생각하기 시작하기 위해 프런트 엔드 개발 도구인 React와 프로젝트 구축에 관련된 기술 스택을 소개하려고 합니다.

어떤 것의 원리를 이해하려면 먼저 그 목적이 무엇인지 알아야 한다는 점을 지적할 필요가 있습니다.

1. Nodejs 및 NPM

nodejs를 언급하는 이유는 무엇입니까?

nodejs가 서버사이드 개발의 또 다른 가능성을 제공한다고 하기보다는 프론트엔드 개발 생태계 전체를 완전히 바꿔 놓았다고 말하는 것이 더 낫습니다. nodejs 플랫폼은 프런트엔드 워크플로와 개발 방법을 거의 재정의한 강력한 npm, grunt, express 등을 파생했습니다.

여기서는 NPM(노드 패키지 관리자) 패키지 관리자에 대해 이야기할 필요가 있습니다.

npm은 자바스크립트 패키지 관리자로, 휠을 직접 새로 만들 필요 없이 npm에서 수많은 개발자가 제공한 코드 패키지를 찾고, 공유하고, 사용할 수 있습니다.

npm을 사용하기 위해서는 node를 설치해야 합니다. nodejs의 새 버전이 npm과 통합되었습니다. nodejs를 설치한 후 다음 명령을 통해 설치된 버전을 확인하세요.

$ npm -v

프로젝트 디렉토리에서, 명령줄

$ npm install

에서 실행할 때 package.json이라는 파일을 식별하고 해당 파일에 구성된 종속 패키지를 설치하려고 시도합니다.

2. 반응

React의 조직적 사고는 코드의 재사용 가능성이 높고, 테스트하기 쉽고, 문제를 더 쉽게 분리할 수 있게 해줍니다.

React는 또한 Learn Once, Write Anywhere를 주장합니다. 클라이언트 브라우저에서 실행되고 서버에서 렌더링되는 동시에 React Native를 사용하면 React로 기본 앱을 개발할 수도 있습니다.

1단계: 새 package.json 파일을 생성하고 프로젝트에 필요한 종속성 패키지를 지정합니다.

rreee

프로젝트의 이름, 버전, 시작 명령, 프로덕션 환경 종속성(종속성) 및 개발 환경 종속성(devDependency)을 정의하는 npm 패키지 관리자에 필요한 파일입니다.

2단계: 새 index.html 파일을 만듭니다.

rreee

3단계: 간단한 React 코드를 작성합니다.

rreee

4단계: 실행.

그렇다면 브라우저에서 어떻게 실행하나요? 여기서는 강력한 webpack-dev-server를 사용하여 로컬 서버를 시작해야 합니다.

위의 package.json에는 webpack 및 webpack-dev-server 종속성 패키지가 포함되어 있는 것을 볼 수 있습니다. Webpack은 아래에서 소개하겠습니다.

물론 nodejs를 통해 로컬 서버를 구축할 수도 있지만 여기서 webpack-dev-server는 실제로 webpack-dev-middleware 미들웨어를 사용하여 webpack 패키지를 제공하는 작은 nodejs Express 서버입니다.

webpack.config.js 파일은 다음과 같이 구성됩니다.

{
 "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": ""
}

이런 식으로 명령줄에서 npm install을 통해 종속성 패키지를 설치한 후

<!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>
 <p id="yunmo"></p>
 <script src="bundle.js"></script>
 </body>
</html>

명령을 입력합니다. 서비스 실행 후 브라우저에 http://localhost:8080/

입력 간단한 React 프로젝트가 실행 중입니다.

3. 웹팩

Webpack은 최신 JavaScript 애플리케이션을 위한 모듈 로딩 및 패키징 도구입니다. JavaScript뿐만 아니라 스타일, 이미지 및 기타 리소스도 패키징할 수 있습니다.

일반적인 웹팩 구성을 살펴보겠습니다:

var React = require('react');
var ReactDOM = require('react-dom');
var element = React.createElement(
 'h1',
 {className: 'yunmo'},
 '云陌，欢迎来到react的世界！'
 );
ReactDOM.render (
 element,
 document.getElementById('yunmo')
);

위의 웹팩 구성에서 웹팩의 네 가지 개념을 반영하는 몇 가지 기본 구성 지점이 있음을 알 수 있습니다.

항목 - webpack은 애플리케이션의 종속성을 기반으로 관계 테이블을 생성합니다. 테이블의 시작점은 소위 진입점입니다. 진입점은 webpack이 시작할 위치를 알려주고, webpack은 테이블의 종속성을 패키징의 기초로 사용합니다.
출력 - 패키지된 파일 배치 경로를 구성하는 데 사용됩니다.
loader - webpack은 각 파일을 구성 요소(예: .css, .html, .scss, .jpg, .png 등)로 처리하지만 webpack은 JavaScript만 인식할 수 있습니다. 이때 로더는 이러한 파일을 구성 요소로 변환한 다음 종속성 테이블에 추가할 수 있습니다.
plugins——因为loaders作用方式是以单一文件为基础的，所以plugins更广泛的用来对打包组建形成的集合（compilations）进行自定义操作。

这样，一个完整的模块打包体系就建立起来了。

4、ES6

ES6，即ECMAScript 6.0，是 JavaScript的下一代标准。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 (
   <p className="skills">
    <p>{greetings}</p>
    <ol>
     {skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
    </ol>
   </p>
  )
 }
}
export default ReactStack  //模块导出

当然，并非所有浏览器都能兼容ES6全部特性，但看到这么优雅的书写方式，只能看怎么行呢？因此，这里又引出了一个神器，Babel！

5、Babel

Babel是一款JavaScript编译器。

Babel可以将ES6语法的代码转码成ES5代码，从而在浏览器环境中实现兼容。

Babel内置了对JSX的支持，所以我们才能向上面那样直接return一个JSX形式的代码片段。

具体用法不在本文过多讲述。

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;
   }
  }
 }
}

样式文件要在项目中起作用，还需要在package.json里面添加相应的loader依赖，如css-loader, sass-loader, style-loader等，别忘了package.json里还需要node-sass依赖，然后安装即可。

webpack.config.js中相应配置如下：

module: {
 loaders: [
  {
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader'
  },
  {
   test: /\.scss$/,
   loaders: ["style-loader", "css-loader", "sass-loader"]
  }
 ]
}

再将main.js中的内容作如下更改：

import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'
ReactDOM.render (
 <ReactStack />,
 document.getElementById('yunmo')
);

结语

至此，一个简单的React项目便搭建起来了。

在后续的文章中，我将对本文涉及到的React技术栈做专门的讲解，不仅限于硬性技能。当然更多的是实践做法上的总结，因为如果要掌握它们的理论，细看官方文档和源码是最好不过的做法。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

React 환경 설정에 대한 튜토리얼

관련 기사