我的React开发之路1:React的环境搭建

aisuhua 发布于2019-08-19 18:21 / 3275人阅读

摘要：是大脸书出的一个前端开发框架。与其说是一个框架，我更加认为更是一种模式，从年月份开始接触，我就认为这个框架以后一定会火。是一个单向数据流的框架，不同于和的双向数据绑定的单向数据流可以数据模式更加单一，更利于前端的维护。

React是大脸书出的一个前端开发框架。与其说是一个框架，我更加认为React更是一种模式，从2015年10月份开始接触React，我就认为这个框架以后一定会火。React是一个单向数据流的框架，不同于Vue和Angular的双向数据绑定 React的单向数据流可以数据模式更加单一，更利于前端的维护。好了，废话不多说如果想具体学习React，可以参考我以后的教程或者参考网上大量的资料还有万能的github
React环境的搭建
首先得明白React的开发是基于JSX去开发的，所以我们第一步做的就是编译JSX 因为普通的浏览器并不懂的JSX 当然你也可以这样:

个人十份不建议用以上的方式因为非常不利于代码的维护和开发而且也有各种的兼容性问题当然你想测试jsx就可以是用编译JSX的方式非常多：webpack browserify+gulp+babelify 或者使用TypeScript用微软的编译器去编译
首先本人比较习惯第二种方式也是介绍第二种方式
第一步
安装必要的工具 node.js gulp
安装node.js 去官网安装node的最新版下载根据提示安装即可
安装gulp 在node安装完之后你需要用npm的命令去安装gulp :

npm install gulp -g

安装好gulp之后，就开始构建项目，可以新建一个目录名字，命令行指向该目录，也就是cd到此目录
输入以下的命令：

npm init

根据提示做完以下的工作之后，在目录中就会有一个名字叫做package.json的文件，然后就需要一些安装一些开发插件了
1、我们需要将gulp安装到项目目录里来；

npm install gulp --save//
//或者
npm install --save gulp

2、安装browserify ，browserify-shim，babelify vinyl-source-stream babel-preset-es2015 babel-preset-react

npm install browserify browserify-shim babelify vinyl-source-stream babel-preset-es2015 babel-preset-react --save-dev

这一步主要是安装一些编译器和一些必要的插件具体怎么用后面会详细的说
3、安装react 和react-dom

npm install react react-dom --save

既然是react的开发就必须要有react
4、写好babel的配置：
创建一个叫做.babelrc的文件在里面输入以下的代码

{
  "presets": ["react","es2015"]
}

这个是babel编译器需要的插件用来编译es6和react的jsx的语法
5、创建一个叫做gulpfile.js的文件这个是gulp的执行文件以下代码是一个简单的构建react项目的gulpfile.js的代码

//gulp需要的模块
var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var babel = require("babelify");

//gulp 任务 用于创建本地服务器 
gulp.task("connect",function(){
    connect.server({
        root:"./",
        port:"3000",
        livereload:true,
        host:"localhost"
    })
});
//编译任务 
gulp.task("browserify",function(){
     //entris:入口文件的js  
    return browserify({entries: "./domsrc/app/Main.js", extensions: [".jsx"]})
         //用babel转换
        .transform(babel)
        //需要browserify-shim转换
        .transform(require("browserify-shim"))
        //bundle合并
        .bundle()
        .pipe(source("bundle.js"))
        //编译文件目标目录
        .pipe(gulp.dest("./bin-debug"));
});

6、package.json的配置文件修改:

  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }

将这段代码加入到package.json里面就可以了现在环境基本已经搭建完成

测试
我们在工程目录下创建一个名为domsrc的目录在这个目录下在创建一个app目录里面创建一个Main.js的文件，
文件里的代码参考如下

var React = require("react");
var ReactDOM = require("react-dom");
class Main {
    constructor(){
        ReactDOM.render(Hello World,document.getElementById("content"));
    }
}
new Main();

然后在该目录下执行以下命令行

gulp browserify

可以看到在bin-debug生成了bundle.js的文件

专线服务 idc机房托管我的编程之路 java开发环境的搭建 php开发环境的搭建 java 开发环境的搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79499.html

最小白的webpack+react环境搭建

摘要：接下来安装和，执行命令安装很顺利，没有遇到任何问题。再总结一下我们遇到的坑初始化时的项目名称要合规，特别是不能出现中划线下划线。另外再增加，这样刷新的速度会大大加快最终的文件目录结构为各文件的最终内容本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。最近在玩webpack+rea...

番茄西红柿 2019-04-23 13:28 评论0 收藏0
手挽手带你学React：一档 React环境搭建，语法规则，基础使用

摘要：当属性是一个回调函数时，函数接收底层元素或类实例取决于元素的类型作为参数。手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React，所以这次也使用ES6的模式进行教学，如果大家对ES6不熟悉的话,先去看看class相关内容吧，这里我也慢慢带大家一步一步学会React。视频教程视频教程可移步我的个人博客：h...

BicycleWarrior 2019-08-23 15:11 评论0 收藏0
拒绝Redux文档“毒害” 一个项目告诉你Redux最新真正哲学

摘要：之前分享过几篇关于技术栈的原创文章解析前端架构学习复杂场景数据设计干货总结打造单页应用一个项目理解最前沿技术栈真谛一个工程实例今天进一步剖析一个实际案例移动网页版。目前面临的问题在于提高产品的各方面性能体验。之前分享过几篇关于React技术栈的原创文章：解析Twitter前端架构学习复杂场景数据设计 React Conf 2017 干货总结1: React + ES next ...

YuboonaZhang 2019-08-22 11:04 评论0 收藏0
Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

摘要：在这篇文章中我们开始利用我们之前所学搭建一个简易的开发环境，用以巩固我们之前学习的知识。文章首发于我的github及个人博客，github请看https://github.com/huruji/blo...，转载请注明出处。在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果：1、...

cucumber 2019-08-22 11:06 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研...

罗志环 2019-08-23 17:08 评论0 收藏0