<二>Hello React开发

方式一(快速入手)

1.创建文件夹hello_react
创建项目文件夹后将我们之前下载的react build的文件夹考入到hello_react目录中
2.项目导入
打开atom,点击file--->open--->选择创建的项目文件夹,再将browser.min.js复制到项目的build文件夹中:

图片.png

3.编写Hello React
创建hello.html编写react代码

4.运行
由于之前安装了插件,所以这里右键点击open in browser就会看到我们的入门程序

图片.png

方式二(npm方式)

创建一个空的文件夹hello

图片.png

进入的创建的文件夹目录

shizhengyangdeMacBook-Pro:~ panyuanyuan$ cd java/react-native/react_more/hello/
shizhengyangdeMacBook-Pro:hello panyuanyuan$ 

初始化项目:输入npm init,只需要在相应的标红的地方输入

图片.png

初始化完成之后项目结构---多了package.json这个是我们依赖挂历的配置

图片.png

打开react官网,点击docs http://reactjs.cn/react/docs/getting-started-zh-CN.html ,我们还需要安装react和react-dom

图片.png

进入项目路径,输入:这里需要加sudo,可能会出现权限问题

sudo npm install --save react react-dom babelify babel-preset-react

安装完成

图片.png

官方还提示了:

图片.png

安装es6转换成es5,输入:

shizhengyangdeMacBook-Pro:hello panyuanyuan$ sudo npm install babel-preset-es2015 --save

安装完成

图片.png

注意:--save是将安装的包配置到之前的package.json中
此时我们的package.json文件

图片.png

安装webpack
在项目目录中重新创建目录和index.js文件

图片.png

index.js文件内容:

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

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

在项目根目录下创建webpack.config.js(名字不能变),其内容:

var webpack = require('webpack');
var path = require('path');
module.exports = {
    context: __dirname + '/src',
    entry: './js/index.js',
    module: {
        loaders: [{
          test: /\.js?$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015']
          }
    }]
  },
  output: {
    path: __dirname + "/src/",
    filename: "bundle.js"
  }
};

安装webpack相关的包:
1.全局安装webpack:

sudo npm install -g webpack

2.全局安装webpack-dev-server

 sudo npm install -g webpack-dev-server

3.项目安装webpack,进入项目安装

sudo npm install webpack --save

4.项目安装webpack-dev-server

sudo npm install webpack-dev-server --save

5.安装babel-loader(一定要写sudo)

sudo npm install babel-loader --save 

都安装完成后输入webpack打包

shizhengyangdeMacBook-Pro:hello panyuanyuan$ webpack

看到如下界面证明成功:

图片.png

由上面知道,产生一个bundle.js的文件,接下来编写index.html

项目目录结构:

图片.png

运行测试:打开index.html

图片.png