DDR爱好者之家

快速搭建React的环境步骤详解
站长资源 2024/11/26 佚名
74 1538
DDR爱好者之家 Design By 杰米

前端生态这几年可谓迎来了大发展，在这个生态圈内，不接受新事物学习新技能，等于堕入魔道。

本文尝试对前端开发利器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 install

它会识别一个叫package.json的文件，并尝试安装该文件内配置的依赖包。

2、React

React的组建化思想使得代码重用性高，易于测试、更容易分离关注点（separation of concerns）。

React还宣称Learn Once, Write Anywhere。既可运行在客户端浏览器，又能在服务端渲染，同时React Native还使得React开发原生app成为可能。

下面我们来写一个简单的React程序，让其能够运行起来：

项目目录：

快速搭建React的环境步骤详解

第一步：新建一个package.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": ""
}

这是npm包管理器的必要文件，定义了该项目的名称、版本、启动命令、生产环境依赖包（dependencies）和开发环境依赖包（devDependencies）。

第二步：新建一个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="/UploadFiles/2021-04-02/bundle.js">


第三步：写一段简单的React代码。





var React = require('react');
var ReactDOM = require('react-dom');

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

ReactDOM.render (
 element,
 document.getElementById('yunmo')
);







第四步：运行。


那么如何在浏览器里运行呢？这里我们需要借助强大的webpack-dev-server来开启本地服务器。


我们可以看到上面的package.json里面有webpack和webpack-dev-server依赖包。下面会介绍webpack。


当然我们还可以通过nodejs来建立一个本地服务器，但这里其实webpack-dev-server是一个小型的nodejs Express服务器，它使用webpack-dev-middleware中间件来服务于webpack包。


webpack.config.js文件配置如下：





var webpack = require('webpack');

module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: __dirname + '/build',
  filename: 'bundle.js'
 },
 module: {
  loaders: []
 }
}







这样我们在命令行通过npm install安装好依赖包以后，敲打命令





$ npm start






运行服务后，在浏览器中输入http://localhost:8080/


快速搭建React的环境步骤详解


React在浏览器运行结果




一个简单的React项目便运行起来了。


3、Webpack


webpack是一款现代JavaScript应用的模块加载兼打包工具，它不仅仅可以打包JavaScript，还可以打包styles，images等资源。


来看一个典型的webpack配置：





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"htmlcode">



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  //模块导出







当然，并非所有浏览器都能兼容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项目便搭建起来了。


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米