前言

React学习前先搭好环境，官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。

源码：https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1

1. 环境搭建

涉及以下几个技术。但从hello world的角度说，目前先不用知道是干嘛的，先用来学习react，后面再去研究各个组件的功能。

  1. Webpack - A module bundler
  2. Babel - A Javascript compiler
  3. ES6 - A relatively new Javasript standard
  4. Yarn - A package manager
  5. React - As expected

1.1 安装一些东西

去官网下载NodeJS，安装。

去官网下载yarn，然后安装。

1.2 开始搭建

最终搭建的文件结构如下：

.

|____.babelrc

|____node_modules

|____app

| |____components

| | |____App.jsx

| |____index.html

| |____index.js

|____dist

| |____index.html

| |____index_bundle.js

|____package.json

|____readme.md

|____structure.txt

|____webpack.config.js

|____yarn.lock

1.2.1 初始化

mkdir hello-react-js

cd hello-react-js

yarn init

添加webpack

yarn add webpack webpack-dev-server path

这时，项目根目录下会多出一个yarn.lock，不用理会。

1.2.2 在根目录下创建webpack.config.js

var path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({

    template: './app/index.html',

    filename: 'index.html',

    inject: 'body'

});

module.exports = {

    entry: './app/index.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'index_bundle.js'

    },

    module: {

        loaders: [

            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },

            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }

        ]

    },

    plugins: [HtmlWebpackPluginConfig]

};
  • entry： 指向入口js文件
  • output: 指向打包后的文件目录
    • filename: js打包后的文件名
    • path: 打包后的文件目录
  • loaders: 转换工具。这里简单加载es6的转换工具babel-loader，将以.js或者.jsx结尾的文件转换为es5.
  • plugins: 一些插件。这里用到HtmlWebpackPlugin，将打包后的js文件插入到指定的html模板里。好处是我们不用手动将js插入html中，这在修改js文件名的时候很有用，否则我们还要手动修改js引入的名称。

1.2.3 添加babel

刚才提到了babel-loader，除了配置之外还需要加载依赖：

yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

然后，在根目录创建.babelrc:

{

  "presets":[

    "es2015", "react"

  ]

}

1.2.4 添加react

yarn add react react-dom

创建app/index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>React App</title>

</head>

<body>

<div id="root">

</div>

</body>

</html>

创建app/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

创建app/components/App.jsx

import React from 'react';

export default class App extends React.Component {

    render() {

        return (

            <div style={{textAlign: 'center'}}>

                <h1>Hello World! Hi ReactJS</h1>

            </div>);

    }

}

1.2.5 添加html-webpack-plugin

前面配置了html-webpack-plugin，这里还需要加载依赖文件:

yarn add html-webpack-plugin

在前面的配置文件制定了html模板文件，输出文件名，以及js打包文件插入的位置。

1.3 基本搞定，运行一下

打开package.json。在script下添加

...

"scripts": {

    "start": "webpack-dev-server"

 },

 ...

运行

yarn start

这时候页面显示如下。大功告成。

可以在package.json里配置不同的webpack运行环境。这里只是搭建学习react官方文档之前先要准备好的环境。最终，package.json:

{

  "name": "hello-react",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack",

    "start": "webpack-dev-server",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "Ryan Miao",

  "license": "MIT",

  "devDependencies": {

    "babel-core": "^6.25.0",

    "babel-loader": "^7.1.1",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "clean-webpack-plugin": "^0.1.16",

    "css-loader": "^0.28.4",

    "html-webpack-plugin": "^2.29.0",

    "less-loader": "^4.0.5",

    "react": "^15.6.1",

    "style-loader": "^0.18.2",

    "url-loader": "^0.5.9",

    "webpack": "^3.4.1",

    "webpack-dev-server": "^2.6.1"

  },

  "dependencies": {

    "path": "^0.12.7",

    "react-dom": "^15.6.1"

  }

}

1.3 小结

开始的时候照葫芦画瓢，先把环境搭建起来。然后开始学习，开始做事。在需要的时候去研究对应的问题。不然，知识何其多也。下面就可以照着react官网的教程，把react组件过一遍。然后再去看redux。

参考

Hello ReactJS的更多相关文章

  1. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  2. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  3. reactjs 接入数据模型以及markdown语法的支持

    页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:  

  4. 初探ReactJS.NET 开发

    ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...

  5. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  6. redux的中间层 --reactjs学习

    React只负责UI层,也就是我们通常在MVC框架中 所说的View层,所以在使用React开发中 我们得引入Redux 负责Model 一开始学习Redux的中间层 有点 摸不到头, 其实只要你注意 ...

  7. 初识ReactJs（一）

    React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...

  8. D2.Reactjs 操作事件、状态改变、路由

    下面内容代码使用ES6语法 一.组件的操作事件: 1.先要在组件类定义内定义操作事件的方法,如同event handler.若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法 ...

  9. D1.1.利用npm（webpack）构建基本reactJS项目

    前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...

  10. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

随机推荐

  1. 我的第一个Java程序

    我的第一个Java程序: class Test{    public static void main(String[] args)    {    System.out.println(" ...

  2. 在Windows上远程运行Linux程序

    1.在Windows主机上安装X Server软件,如Cygwin带的XWin Server 2.在Windows主机上启动X服务器,并将Linux主机设为允许访问该Windows主机上的X服务器. ...

  3. PHP面试题详解

    自己从网上找了几份常考到的PHP面试题进行了整理,然后才有了这份PHP面试题,并且我把所有的题目进行了详细分析和代码分析,希望可以对大家有帮助,谢谢大家. 这份试题我也上传到了百度云,有需要的可以直接 ...

  4. mac中使用 sourcetree 的快速配置和git服务器登录

    问题: 1.mac中下载sourcetree配置仓库地址,一直在提示输入密码,无法登录成功,更无法获取源码. 2.找不到配置仓库时的账号密码,只看到地址. 场景: git服务器:自己的GIT服务器,非 ...

  5. R语言重要数据集分析研究——需要整理分析阐明理念

    1.R语言重要数据集分析研究需要整理分析阐明理念? 上一节讲了R语言作图,本节来讲讲当你拿到一个数据集的时候如何下手分析,数据分析的第一步,探索性数据分析. 统计量,即统计学里面关注的数据集的几个指标 ...

  6. 如何离线安装Visual Studio 2017

    1. 官方下载在线安装文件 vs_community.exe https://www.visualstudio.com/zh-hans/thank-you-downloading-visual-stu ...

  7. --css 控制文字多使用省略号

    --css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...

  8. Android studio出现Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 400 Bad Reques的解决办法

    最近更新了一下Android Studio,在导入新项目之后出现Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 4 ...

  9. Vijos 1007 绕钉子的长绳子

    背景 平面上有N个圆柱形的大钉子,半径都为R,所有钉子组成一个凸多边形. 现在你要用一条绳子把这些钉子围起来,绳子直径忽略不计. 描述 求出绳子的长度 格式 输入格式 第1行两个数:整数N(1< ...

  10. h5 新增特性用法---持续更新

    1.dataset <div class="box" data-title1="自定义属性" data-age="18" data-m ...