前言

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. 用css控制字数，多余的用省略号代替

    选择器 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100px; } white-space 属性 ...

  2. WPF中实现类智能感知

    首先要做的事情就是定义一个popup来显示我们需要展示的东西 <Popup x:Name=" StaysOpen="False" Placement="B ...

  3. 基于FPGA的IIR滤波器

    基于FPGA的IIR滤波器                                                         by方阳 版权声明:本文为博主原创文章,转载请指明转载地址 ...

  4. 【VC6.0】getline需要输入2次回车才会结束的BUG修复方法

    原始日期:2013-09-30 23:22 今天看C++Primer的时候发现一个问题,getline需要输入2次回车才会显示结果,上网找了一下,发现是VC6.0的原因,修复原因如下: (1)建立一个 ...

  5. svn客户端的使用

    1 SVN概述 SVN客户端应用集成在右键菜单中: svn服务器有2种运行方式:独立服务器和借助apache运行.两种方式各有利弊,用户可以自行选择: SVN是Subversion的简称,是一个开放源 ...

  6. 使用 FLASH DATABASE 恢复误删除的用户

    场景描述 误 drop 了生产库中的用户 U1 U1 用户下面有 3 张表(T1-T3),表中数据如下所示: SQL> conn u1/u1 Connected. SQL> select ...

  7. form表单上传文件使用multipart请求处理

    在开发Web应用程序时比较常见的功能之一,就是允许用户利用multipart请求将本地文件上传到服务器,而这正是Grails的坚固基石——spring MVC其中的一个优势.Spring通过对Serv ...

  8. MVC过滤器之添加LoginAttribute，浏览器bug：重定向次数太多

    以前在写登录Action过滤时,都在每个Controller前写上CheckLoginAttribute:这次决定偷懒试一下能否将所有Action和Controller统一过滤: 出bug的代码是这样 ...

  9. 9天C#转Java学习过程，自己记录一下

    其实没有完整的9天,就是连续每天花点时间,过程so frustrated,踩坑无数...下面是学习过程的记录 第1天 开始正式学习JavaEE,已完成: 1. Tomcat安装: 2. Tomcat配 ...

  10. DOM 和 BOM 的 对象 和方法

    DOM   对象 有 documet  event element  attlibute 方法  getElementById   getElementsBytagname  getElementsB ...