React 환경 설정에 대한 튜토리얼
이번에는 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 파일을 만듭니다.
rreee3단계: 간단한 React 코드를 작성합니다.
rreee4단계: 실행.
그렇다면 브라우저에서 어떻게 실행하나요? 여기서는 강력한 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 환경 설정에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
여름에는 꼭 무지개를 찍어보세요
Jul 21, 2024 pm 05:16 PM
여름에 비가 내린 후에는 아름답고 마법 같은 특별한 날씨 장면인 무지개를 자주 볼 수 있습니다. 이 역시 사진에서 볼 수 있는 보기 드문 장면으로, 매우 포토제닉하다. 무지개가 나타나는 데에는 몇 가지 조건이 있습니다. 첫째, 공기 중에 충분한 물방울이 있고, 둘째, 태양이 낮은 각도로 빛납니다. 따라서 비가 그친 후 오후에 무지개를 보는 것이 가장 쉽습니다. 그러나 무지개의 형성은 날씨, 빛, 기타 조건의 영향을 크게 받기 때문에 일반적으로 짧은 시간 동안만 지속되며, 가장 잘 볼 수 있고 촬영할 수 있는 시간은 더욱 짧습니다. 그러면 무지개를 만났을 때 어떻게 제대로 기록하고 고품질로 사진을 찍을 수 있습니까? 1. 무지개를 찾아보세요. 위에서 언급한 조건 외에도 무지개는 대개 햇빛 방향으로 나타납니다. 즉, 태양이 서쪽에서 동쪽으로 빛날 경우 무지개가 동쪽에서 나타날 확률이 높습니다.
잘못된 가상 화폐 체인을 검색하는 방법은 무엇입니까? 잘못된 가상 화폐 이체 체인 검색에 대한 튜토리얼
Jul 16, 2024 pm 09:02 PM
가상시장의 확대는 가상화폐 유통과 불가분의 관계이며, 당연히 가상화폐 이체 문제와도 불가분의 관계에 있습니다. 일반적인 전송 오류는 주소 복사 오류이고, 또 다른 오류는 체인 선택 오류입니다. 가상 화폐를 잘못된 체인으로 이체하는 것은 여전히 까다로운 문제이지만, 이체 작업 경험이 부족하여 초보자가 잘못된 체인을 이체하는 경우가 많습니다. 잘못된 링크는 제3자 플랫폼을 통해 검색할 수 있지만 성공하지 못할 수도 있습니다. 다음으로, 가상자산을 더 잘 관리할 수 있도록 에디터가 자세히 알려드립니다. 잘못된 가상 화폐 체인을 검색하는 방법은 무엇입니까? 잘못된 체인으로 전송된 가상 화폐를 검색하는 과정은 복잡하고 어려울 수 있지만 전송 세부 정보를 확인하고 거래소 또는 지갑 제공업체에 문의하고 개인 키를 호환되는 지갑으로 가져오고 크로스 체인 브리지 도구를 사용하여
사진을 배우기 위해 히스토그램을 알아야 하는 이유는 무엇입니까?
Jul 20, 2024 pm 09:20 PM
일상 촬영에서 많은 사람들이 이런 상황에 직면합니다. 카메라에 있는 사진은 정상적으로 노출되는 것처럼 보이지만 사진을 내보낸 후에는 사진의 실제 형태가 카메라의 렌더링과 거리가 멀고 노출 문제가 있다는 것을 알게 됩니다. 환경 조명, 화면 밝기 및 기타 요인의 영향을 받는 이러한 상황은 상대적으로 정상이지만 또한 우리에게 계시를 제공합니다. 사진을 보고 사진을 분석할 때 히스토그램을 읽는 방법을 배워야 합니다. 그렇다면 히스토그램이란 무엇일까요? 간단히 이해하면, 히스토그램은 사진 픽셀의 밝기 분포를 표시하는 형태입니다. 가로로 히스토그램은 대략 세 부분으로 나눌 수 있으며, 왼쪽은 그림자 영역, 가운데는 중간 영역, 오른쪽은 음영 영역입니다. 하이라이트 영역 왼쪽은 그림자의 검은색 영역이고 맨 오른쪽은 하이라이트의 유출된 영역입니다. 세로축은 픽셀의 구체적인 분포를 나타냅니다.
vue.js vs. React : 프로젝트 별 고려 사항
Apr 09, 2025 am 12:01 AM
vue.js는 중소형 프로젝트 및 빠른 반복에 적합한 반면 React는 크고 복잡한 응용 프로그램에 적합합니다. 1) vue.js는 사용하기 쉽고 팀이 불충분하거나 프로젝트 규모가 작는 상황에 적합합니다. 2) React는 더 풍부한 생태계를 가지고 있으며 고성능 및 복잡한 기능적 요구가있는 프로젝트에 적합합니다.
HTML에서 React의 역할 : 사용자 경험 향상
Apr 09, 2025 am 12:11 AM
React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.
Java 프레임워크에 권장되는 문서와 튜토리얼은 무엇입니까?
Jun 02, 2024 pm 09:30 PM
Java 프레임워크를 효과적으로 사용하려면 올바른 문서와 튜토리얼을 손쉽게 확보하는 것이 중요합니다. 권장 리소스는 다음과 같습니다. SpringFramework: 공식 문서 및 튜토리얼 SpringBoot: 공식 가이드 Hibernate: 공식 문서, 튜토리얼 및 실무 사례 ServletAPI: 공식 문서, 튜토리얼 및 실무 사례 JUnit: 공식 문서 및 튜토리얼 Mockito: 공식 문서 및 튜토리얼
React vs. Vue : Netflix는 어떤 프레임 워크를 사용합니까?
Apr 14, 2025 am 12:19 AM
NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)
고급 부트 스트랩 튜토리얼 : 마스터 링 사용자 정의 및 구성 요소
Apr 04, 2025 am 12:04 AM
부트 스트랩 사용자 정의 및 구성 요소 사용법을 마스터하는 방법 : 1. 스타일 사용자 정의에 CSS 변수 및 SASS 전 처리기 사용; 2. 구성 요소 구조와 동작을 깊이 이해하고 수정하십시오. 이러한 방법을 통해 웹 사이트의 응답 성과 사용자 경험을 향상시키기 위해 고유 한 사용자 인터페이스를 만들 수 있습니다.
