React和ES6入门 [英] Getting Started with React and ES6
问题描述
我可以找到足够的资源，使用ES5开始使用React。我如何在ES6中开始使用React？
我想：
- 热模块重新加载
- 对响应网络的媒体查询
<强> 1。下载Node.js
获取最新的稳定版本的 Node.js
2。安装必要的软件包
2.1。 package.json
复制并粘贴以下代码：
{
name：NewComponent，//更改我
version：1.0.0，
author：Me，//更改我
license：ISC，
repository：{
type：git，
url：https://github.com/ //更改我
}，
readme：链接到ReadMe Markdown文件，//更改我
description：这是魔法发生的地方，//更改我
main：主模块的导出对象，//更改我
依赖：{
反应：^ 0.14.3，
反应-dom：^ 0.14.3，
反应敏感：^ 1.0.1
}，
devDependencies：{
babel ：^ 6.3.26，
babel-cli：^ 6.3.17，
babel-core：^ 6.3.21，
babel-eslint ：^ 4.1.4，
babel-polyfill：^ 6.1.19，
babel-runtime：^ 6.1.18，
babel-插头in-transform-runtime：^ 6.1.18，
babel-preset-es2015：^ 6.1.18，
babel-preset-react：^ 6.1.18 ，
babel-preset-stage-0：^ 6.1.18，
babel-preset-stage-1：^ 6.1.18，
babel -preset-stage-2：^ 6.1.18，
babel-preset-stage-3：^ 6.1.18，
babel-loader：^ 6.2。 0，
file-loader：^ 0.8.4，
json-loader：^ 0.5.2，
express：^ 4.13.3
path：^ 0.12.7，
webpack：^ 1.12.1，
webpack-dev-server：^ 1.14.1
}，
脚本：{
dev-server：webpack-dev-server --progress --colors --inline --config .//webpack.config。 js，
author：Me，//更改我
license：ISC
}
}
编辑读取的行，更改我并删除更改我的评论。如果你现在想跳过这个，至少删除改变我的评论。导航到一个新的项目文件夹，并将此文件另存为 package.json 在您的项目目录中
2.2。运行安装脚本
导航到终端中的新项目文件夹，并运行： npm install / p>
节点包管理器然后将您的 package.json 文件中的所有包安装到您的项目目录
3。设置基本应用程序
3.1。 index.html
将以下内容另存为 index.html ：
<！DOCTYPE html>
< html>
< head>
< title>< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script>
< style>
html，body {
height：100％;
margin：0;
padding：0;
}
#container {
display：block;
height：100％;
width：100％;
}
< / style>
< / head>
< body>
< div id =container>< / div>
< script src =https://fb.me/react-0.13.3.js>< / script>
< script src =https://fb.me/JSXTransformer-0.13.3.js>< / script>
< script src =./ bundle.jscharset =utf-8>< / script>
< / body>
< / html>
记下容器div。 React需要一个元素来渲染它的组件。
3.2。 webpack.config.js
将以下内容另存为 webpack.config.js ：
var path = require（'path'）;
var webpack = require（'webpack'）;
module.exports = {
条目：['babel-polyfill'，path.resolve（__ dirname，Application.js）]，
输出：{
路径：path.resolve（__ dirname，'./'），
文件名：'bundle.js'
}，
模块：{
加载器：[
{
test：/\.jsx?$/，
exclude：/ node_modules /，
loader：'babel-loader'，
query：{
plugins ：['transform-runtime']，
预设：['es2015'，'stage-0'，'stage-1'，'stage-2'，'stage-3'，'react']，
}
}，
{
test：/\.json$/，
loader：json-loader
}
]
}
};
此文件是 Webpack ，我的模块绑定器选择
3.3。 Application.js
将以下内容保存为 Application.js ：
import反应的反应;
从react-dom导入ReactDOM;
从'./ComponentNameComponent.js'导入ComponentNameComponent;
class Application extends React.Component {
constructor（props）{
super（props）;
}
render（）{
return（
< ComponentNameComponent />
）;
}
}
ReactDOM.render（< Application />，document.getElementById（'container'））;
使用文本编辑器的替换功能将ComponentName替换为您想要调用的组件。三次应该看到[ComponentName] Component.js
3.4。 [ComponentName] Component.js
将以下内容作为组件的名称加上结尾的Component单词：
import来自'react'的反应;
从react-dom导入ReactDOM;
从反应敏感导入MediaQuery;
从'./ComponentName.js'导入ComponentName;
class ComponentNameComponent extends React.Component {
constructor（props）{
super（props）;
}
render（）{
return（
< div>
< MediaQuery minWidth = {960}>
< ; ComponentName display =desktop/>
< / MediaQuery>
< MediaQuery maxWidth = {959}>
< MediaQuery minWidth = {1}>
< ComponentName display =mobile/>
< / MediaQuery>
< MediaQuery maxWidth = {0}>
< div>< / div>
< / MediaQuery>
< / MediaQuery>
< / div>
）;
}
}
导出默认ComponentNameComponent;
使用文本编辑器的替换功能将ComponentName替换为您想要调用的组件。在render（）函数中，有一个媒体查询，根据屏幕大小，组件被传递一个名为display的参数，其中有两个值之一：desktop或mobile
3.5。 [ComponentName] .js
将以下内容保存为组件的名称：
import反应的反应;
从react-dom导入ReactDOM;
class ComponentName extends React.Component {
constructor（props）{
super（props）;
}
render（）{
// CSS Here
var spanStyle = {
fontSize：'24px'，
fontFamily：'日内瓦，roboto，sans-serif'
};
if（this.props.display =='desktop'）{
//如果桌面特定的
返回（
< div>
） {/ *反应组件和HTML这里用于桌面显示* /}
< span style = {spanStyle}>欢迎使用React。将浏览器窗口调整为较小的宽度。< / span>
< / div>
）;
}
else {
//如果移动特定的
返回（
< div>
{/ *反应组件和HTML这里是移动显示* /}
< span style = {spanStyle}&您好，我是移动视图。欢迎使用React。调整回我的大小< / span>
< / div> ;
）;
}
}
componentDidMount（）{
//只有可接受的地方才能使用窗口和文档对象
}
}
导出默认ComponentName;
要从这里开始编辑您的应用程序，请勿编辑应用程序。 js 或 ComponentNameComponent.js 类。相反，请考虑 ComponentName.js 类新的顶级类。
应用程序.js 仅用于开发。如果您想在其他应用程序中重新使用您的组件，您应该导入 ComponentNameComponent.js 类（请参阅下面的制作应用快速链接以获取有关您想要的原因的信息容器类）。向 ComponentNameComponent.js 类添加额外的代码可能会导致媒体查询中的意外影响。
3.6 。运行您的应用程序
转到终端中的项目，然后运行以下脚本：
npm运行dev-server
4。思考反应
React.JS Conference 2015 - 使应用程序快速
这只是一个开始。我希望这有帮助。写作的最初原因是维基文章为我的工作。我想改进，所以请评论你喜欢什么或你发现混乱。
I can find enough resources about getting started with React using ES5. How do I get started with React in ES6?
I would like:
- Hot module reloading
- A media query for responsive-web
1. Download Node.js
Get the latest stable version of Node.js
2. Install Necessary Packages
2.1. package.json
Copy and paste the following code:
{
"name": "NewComponent", // Change me
"version": "1.0.0",
"author": "Me", // Change me
"license": "ISC",
"repository": {
"type" : "git",
"url" : "https://github.com/" // Change me
},
"readme": "Link To ReadMe Markdown File", // Change me
"description": "This is where the magic happens", // Change me
"main": "Main Module's Export Object", // Change me
"dependencies": {
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-responsive": "^1.0.1"
},
"devDependencies": {
"babel": "^6.3.26",
"babel-cli": "^6.3.17",
"babel-core": "^6.3.21",
"babel-eslint": "^4.1.4",
"babel-polyfill": "^6.1.19",
"babel-runtime": "^6.1.18",
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.1.18",
"babel-preset-stage-1": "^6.1.18",
"babel-preset-stage-2": "^6.1.18",
"babel-preset-stage-3": "^6.1.18",
"babel-loader": "^6.2.0",
"file-loader": "^0.8.4",
"json-loader": "^0.5.2",
"express": "^4.13.3",
"path": "^0.12.7",
"webpack": "^1.12.1",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"dev-server": "webpack-dev-server --progress --colors --inline --config .//webpack.config.js",
"author": "Me", // Change me
"license": "ISC"
}
}
Edit the lines that read, "Change me" and delete the "Change me" comments. If you wish to skip this for now, at the very least, delete the "Change me" comments. Navigate to a new project folder, and save this file as package.json in your project directory
2.2. Run Install Script
Navigate to your new project folder in the terminal and run: npm install
Node Package Manager will then install all of the packages in your package.json file to your project directory
3. Setup a Basic App
3.1. index.html
Save the following as index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: block;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="./bundle.js" charset="utf-8"></script>
</body>
</html>
Take note of the container div. React needs an element to render it's components in.
3.2. webpack.config.js
Save the following as webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: ['babel-polyfill', path.resolve(__dirname, "Application.js")],
output: {
path: path.resolve(__dirname, './'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'stage-1', 'stage-2', 'stage-3', 'react'],
}
},
{
test: /\.json$/,
loader: "json-loader"
}
]
}
};
This file is the configuration of Webpack, my module bundler of choice
3.3. Application.js
Save the following as Application.js:
import React from 'react';
import ReactDOM from 'react-dom';
import ComponentNameComponent from './ComponentNameComponent.js';
class Application extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<ComponentNameComponent />
);
}
}
ReactDOM.render(<Application />, document.getElementById('container'));
Use the replace feature of your text editor to replace "ComponentName" with what you want to call your component. Three times it should read [ComponentName]Component.js
3.4. [ComponentName]Component.js
Save the following as the name of your component plus the word "Component" at the end:
import React from 'react';
import ReactDOM from 'react-dom';
import MediaQuery from 'react-responsive';
import ComponentName from './ComponentName.js';
class ComponentNameComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<MediaQuery minWidth={960}>
<ComponentName display="desktop" />
</MediaQuery>
<MediaQuery maxWidth={959}>
<MediaQuery minWidth={1}>
<ComponentName display="mobile" />
</MediaQuery>
<MediaQuery maxWidth={0}>
<div></div>
</MediaQuery>
</MediaQuery>
</div>
);
}
}
export default ComponentNameComponent;
Use the replace feature of your text editor to replace "ComponentName" with what you want to call your component. In the render() function, there is a media query and depending on the screen size, the component is passed a parameter called display with one of two values: "desktop" or "mobile"
3.5. [ComponentName].js
Save the following as your component's name:
import React from 'react';
import ReactDOM from 'react-dom';
class ComponentName extends React.Component {
constructor(props) {
super(props);
}
render() {
// CSS Here
var spanStyle = {
fontSize: '24px',
fontFamily: 'geneva, roboto, sans-serif'
};
if (this.props.display == 'desktop') {
// CSS can also go here if desktop specific
return (
<div>
{/* React Components and HTML Here for desktop display */}
<span style={spanStyle}>Welcome to React. Resize the browser window to a small width.</span>
</div>
);
}
else {
// CSS can also go here if mobile specific
return (
<div>
{/* React Components and HTML Here for mobile display */}
<span style={spanStyle}>Hi, I am the mobile view. Welcome to React. Resize me back!</span>
</div>
);
}
}
componentDidMount() {
// Only acceptable place to use window and document objects
}
}
export default ComponentName;
To edit your app from here on out, do not edit the Application.js or ComponentNameComponent.js classes. Instead consider the ComponentName.js class your new top-level class.
The Application.js is only used for development. If you want to re-use your component in another application, you should import the ComponentNameComponent.js class (see the "Making Apps Fast" link below for information on why you want container classes). Adding extra code to the ComponentNameComponent.js class might cause unintended effects in the media query.
3.6. Run Your App
Go to your project in your terminal and run the following script:
npm run dev-server
4. Think in React
React.JS Conference 2015 - Making Apps Fast
This is just a start. I hope this helped. The original reason for writing was a Wiki article for my job. I would like to refine this so please comment on what you liked or what you found confusing.
这篇关于React和ES6入门的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
