文档章节

react搭建教程(图文)

_长升
 _长升
发布于 2016/12/07 12:39
字数 804
阅读 1424
收藏 63

作者:_长升 原创于——开源中国

简介

React2016年还是比较火的,我学习react的是因为当时指导老师(王老师)的项目要用此技术。于是开始学习React,React其实内容还是比较少的,但是背后的技术栈(redux、router、webpack、es6等等)却很强大,要花一定时间的。在学习之前,当然是要搭建开发环境,中文的开发环境搭建教程还是比较少的(我学习的时候),有一些教程,讲的也详细但是搭建过后,发现运行不起来,并报一系列看不懂的错误。于是问哥(谷歌),无意间发现了一些国外网友搭建的教程,发现挺简单的,摸索了之后写下这篇中文搭建教程,帮助那些求学的小伙伴们。如果英文还可以的同学可以点击此链接视频教程。

首先安装node.js。

windows或mac系统的用户可以直接去官网下载安装包,linux(ubuntu)用户可以到官网下载源码进行配置。

安装好之后,打开shell(windows下win+r 输入cmd回车)。输入

node -v

node-v

结果如上图所示表示安装成功。

配置React环境(webstorm IDE)

1.新建空项目(file>new>project)

creatProjectOf test_react

2.打开终端(view>Tool Windows>Terminal)

open terminal

 

注意这里(webstorm)终端和windows下进入当前路径的shell是一样的

cmd

3.初始化React项目

3.1 react初始化(init)

npm init

 

3.2 回车进行默认配置。is this ok?(yes) y 回车

enter

 

3.3之后该项目根目录会出现项目的基本信息package.json文件

package.json

4.安装依赖文件

4.1 安装react、react-dom

npm install react react-dom --save

react、react-dom

4.2 安装 babel-core、babel-loader、babel-preset-es2015、babel-preset-react

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react 

core

4.3 安装 webpack-dev-server

npm install webpack-dev-server --save-dev

 

5.手动创建以下文件和目录

文件预览

5.1 webpack.config.js

module.exports = {
    entry:"./src/index.js",
    output:{
        path:"./dist/",
        filename:"bundle.js"
    },
    devServer:{
        inline:true,
        contentBase:'./dist',
        port:333
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'babel',
                query:{
                    presets:['es2015','react'],
                }
            }
        ]
    }
};

5.2 dist文件夹和index.html文件

5.2.1 dist文件夹

dist

5.2.2 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">loading</div>
    <script src="bundle.js"></script>
</body>
</html>

5.3 src文件夹和index.js

5.3.1 src文件夹

5.3.2 index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>hello world</div>,
    document.getElementById("app")
);

6.最后两步

6.1 将package.json中添加如下代码(把  "test":"..."删除)

"start":"webpack-dev-server"

6.2 运行项目(开始有点慢,喝杯咖啡舒展舒展~~~)

npm start

6.3 运行成功,打开浏览器访问  localhost:333

 

总算OK了,

 

---------------------------以下是npm start 出现错误的情况及解决办法-------------------

1.npm start运行出错(如下图)

2.解决办法

npm i -项目所在的磁盘符号 webpack

//我这里是G盘
npm i -G webpack

3.npm start(恢复正常)

 

 

--------------------npm install package( Error:UNABLE_TO_VERIFY_LEAF_SIGNATURE)--------------

1.用npm install 安装包时出现错误Error:UNABLE_TO_VERIFY_LEAF_SIGNATURE错误

原因是当前电脑使用了代理(翻墙软件等)

2 解决办法: npm config set strict-ssl false 。之后便可安装,npm config set strict-ssl true设置初始状态

npm config set strict-ssl false #设置后可安装

npm config set strict-ssl true  #恢复初始状态

 

注意:转载和引用请注明出处,谢谢合作!

© 著作权归作者所有

共有 人打赏支持
_长升
粉丝 2
博文 3
码字总数 2158
作品 0
镇江
程序员
私信 提问
加载中

评论(3)

Mythoiogy
Mythoiogy

引用来自“_长升”的评论

引用来自“天地紫恩”的评论

你这个搭建过程我在5.3.2 index.js这一步运行不过去?难道写法不对?

@天地紫恩 控制台报啥错呢?

未记录 改天再搭建一遍
_长升
_长升

引用来自“天地紫恩”的评论

你这个搭建过程我在5.3.2 index.js这一步运行不过去?难道写法不对?

@天地紫恩 控制台报啥错呢?
Mythoiogy
Mythoiogy
你这个搭建过程我在5.3.2 index.js这一步运行不过去?难道写法不对?
react环境搭建教程(图文)

首先安装node.js。 windows或mac系统的用户可以直接去官网下载安装包,linux(ubuntu)用户可以到官网下载源码进行配置。 安装好之后,打开shell(windows下win+r 输入cmd回车)。输入 结果如...

皇冠小丑
2016/12/28
38
0
推荐 10 个 ReactJS 入门资源

React 是发展非常迅速的 JavaScript 库,可以让开发者更快的构建用户界面。自从 React 发布以来,已经快速成为了大多数人寻求的框架类别之一。即使 React 已经非常简单易用,但是还有很多社区...

oschina
2015/06/04
31.9K
22
【jni 编程】—— NDK环境搭建

在《站在巨人的肩膀上,谈app的创新性》一文中 http://my.oschina.net/liusicong/blog/311971,我提到过构建app技术壁垒的必要性。在构建技术壁垒时,我们往往需要调用许多库函数,例如:图像...

刘小米
2014/09/10
0
0
前端相关大杂烩

前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单 原文地址:Learning React.js is easier than you think 原文作者:Samer Buna 译文出自:掘金翻译计划 本文...

掘金官方
01/12
0
0
React Native Mac环境搭建

这里只介绍Mac 上的环境搭建,其他环境搭建请参考: http://facebook.github.io/react-native/docs/getting-started.html 。 上面有所有环境搭建。 1、安装Homebrew 安装Homebrew是为安装Nod...

totogo2010
2016/06/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu16.04下安装docker

[TOC] 本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即Docker社区版,是开发人员和小型团队的理想选择。 1. 开始安装 1.1 由于...

豫华商
10分钟前
0
0
使用XShell工具密钥认证登录Linux系统

如果你是一名Linux运维,那么Linux服务器的系统安全问题,可能是你要考虑的,而系统登录方式有两种,密码和密钥。哪一种更加安全呢? 无疑是后者! 这里我为大家分享用Xshell利器使用密钥的方...

dragon_tech
22分钟前
0
0
day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
27分钟前
6
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 强迫症患者表示不能接受 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN......

taadis
31分钟前
1
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
306
6

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部