前言

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. oracle表的简单操作

    版权声明:本文为博主原创文章,转载时请注明原文链接. 1.创建表 ) ) not null,primary key(num)); 创建了一个两个字段的表,num和name,都设置为非空,num设为主键 ...

  2. 如何解决wamp中数据库读取数据是???的情况？

    数据库中数据正常,但是从数据库读取出的数据在网页中显示时是???,该怎么办呢? 左键点击托盘区的WampServer图标,选择Mysql--my.ini,就会打开配置文件 1.在[client]段落增 ...

  3. 不再迷惑，无值和NULL值的转换

    在关系型数据库的世界中,无值和NULL值的区别是什么?一直被这个问题困扰着,甚至在写TSQL脚本时,心有戚戚焉,害怕因为自己的一知半解,挖了坑,贻害后来人,于是,本着上下求索,不达通幽不罢休的决心(开 ...

  4. thinkphp3.2.3 版本使用redis缓存添加认证

    我在使用thinkphp3.2.3的时候 发现如果是使用redis缓存 设置了认证的redis能连接成功 却无法 set 操作 ,检查发现是没有认证导致的  $redis->auth这一步没有, ...

  5. react native－调用react－native－fs插件时，如果数据的接口是需要验证信息的，在android上运行报错

    调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...

  6. centos7下创建数据库和用户

    首先需要在centos系统下安装好mysql,这个我已经安装好了,这里就不把过程贴出来了. 第一步:使用root用户登录到mysql数据库: 第二步:创建一个mysql数据库.当第一步登录成功后,便会 ...

  7. head first python helloword

    如何使用python 打出hello word 在python shell 键入print 'hello word'( python 2) or  print ("hello word&qu ...

  8. PHPCMS V9里加入JS时生成首页出错

    有次在首页中加入JS,确认JS没有问题,但是在后台生成首页的时候一直出错. 查了半天才发现原来是JS里的“{}”问题,V9里调用内容也是用的大括号,冲突了. 解决方法是在“{”前面和后面分别加一个空格 ...

  9. php Base64编码文件二进制流主要使用

    <?php header( "Content-type: image/jpeg"); //$filename='1.jpg'; //$content=file_get_con ...

  10. Java程序设计---io流读取文件内容并将其逆值输出到控制台

    import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileR ...