React学习笔记1：环境搭建

Sourcelink 发布于2019-08-19 17:26 / 915人阅读

摘要：新搭建的个人博客，本文地址学习笔记环境搭建本文的书写环境为，之后会补充下的差异创建学习目录初始化项目根据相关提示完善信息，入口文件安装相关包，并且使用也就是支持，需要包，因为我之前做个一些相关项目，所以部分包已经全局安装，比如等等，大家

新搭建的个人博客，本文地址：React学习笔记1：环境搭建

本文的书写环境为mac，之后会补充windows下的差异

1、创建学习目录

mkdir learn
cd learn

2、npm初始化项目

npm init //根据相关提示完善信息，入口js文件：src/index.js

3、安装相关react npm包，并且使用es2015（也就是es6支持，需要babel-preset-es2015包），因为我之前做个一些js相关项目，所以部分npm包已经全局安装，比如webpack等等，大家根据提示补足自己的npm包即可

npm install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader

4、创建相关文件目录结构

mkdir src   //存放源文件
mkdir build //存放编译后的js文件

5、创建webpack配置文件（webpack好强大，之后再做详细的学习）

touch webpack.config.js

var path = require("path");
module.exports = {
  entry:[
    "./src/index.js"
  ],
  output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    },
    module: {
        loaders: [{
          test: /.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: "babel-loader", // "babel-loader" is also a legal name to reference
          query: {
            presets: ["es2015","react"]
          }
        }]
    },
    devServer:{
        contentBase:"./build"
    }
};

6、创建index.js源文件，书写经典的Hello World！

touch src/index.js

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

ReactDOM.render(
  Hello, world!,
  document.getElementById("example")
);

7、利用webpack编译源文件，根目录下直接运行webpack，运行完成后会在build目录生成bundle.js文件

$ webpack
Hash: 32a8e736b4323f7ec350
Version: webpack 1.12.9
Time: 1318ms
    Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 159 hidden modules

8、创建index.html承载体文件，引入bundle.js，方便在浏览器中运行

touch build/index.html



  
    
    React环境搭建

9、浏览器直接打开index.html，出现Hello world！
10、每次修改完成，运行webpack还是很麻烦的，利用webpack-dev-server可以完成自动自动编译，自动刷新浏览器

$ webpack-dev-server
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from ./build
Hash: 67262048da84a36a0a5c
Version: webpack 1.12.9
Time: 1325ms
    Asset    Size  Chunks             Chunk Names
bundle.js  676 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 643 kB [rendered]

浏览器进入http://localhost:8080/webpack...输出Hello world！
webpack的配置指定了webpack-dev-server的根目录

    devServer:{
        contentBase:"./build"
    }

尝试修改src/index.js的内容，页面有自动刷新了

OK，到此完成环境的基本搭建！

GPU云服务器云服务器学习笔记搭建云笔记学习笔记一基础学习笔记

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

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

前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0
在Windows下搭建React Native Android开发环境，android开发mvp模式

摘要：在这个过程中可能会出现一些问题，导致失败你没有配置需要再系统变量中加入这个，指到目录。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。本文已被开源项目学习笔记总结移动架构视频大厂面试真题项目实战源码收录在这个过程中可能会出现一些问题，导致build失败： 1. 你没有配置ANDROID_HOME,...

番茄西红柿 2021-11-29 10:50 评论0 收藏2637
好程序员React精品项目全集：商城管理后台（视频+源码+笔记）

摘要：今天给大家带来了好程序员实战项目商城管理后台。配合项目学习会让你更快掌握它的使用方法下面就来看看好程序员这套实战项目课程介绍好程序员项目本项目是一个使用开发的商城系统的管理后台，里面登录判断，接口调用，数据展示和编辑，文件上传等后台功能。众所周知，项目经验对于一个程序员变得越来越重要。在面...

李世赞 2021-11-11 16:55 评论0 收藏0
单页面博客从前端到后端

摘要：说到底，当自己独自开发从搭建开发环境，到前端的每一个组件，到动作交互，再到和后端的数据交互，难免遇到不少问题。单页面博客从前端到后端基于和的权限验证与的设计引入来实现富文本编辑器是开源的用于构建富文本编辑器的框架。不会后端的前端，不会写单页面应用... 单页面应用的概念已经被提出很长时间了，无论是基于 vue, angular 还是 react，相信大家或是耳濡目染，或是设身处地都有...

whinc 2019-08-20 17:20 评论0 收藏0