<二>Hello React开发

作者: 者薄 | 来源:发表于2017-04-29 18:47 被阅读0次

<二>Hello React开发
初识React之组件
React Native 学习手记（一）
[React-Native]入门(Hello World)
腾讯地图开发
React？
React相关内容
Hello - RN
React-Native组件用法详解之ListView
React网址

方式一(快速入手)

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 导入react.js是react的核心库 -->
    <script src="./build/react.js" charset="utf-8"></script>
    <!-- 导入react-dom.js -->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!-- 导入browser.min.js 将JSX语法装换为js语法-->
    <script src="./build/browser.min.js" charset="utf-8"></script>
  </head>
  <body>
    <!-- react渲染的模板会插入到这个节点中 -->
    <div id="examp">
    </div>
  </body>

  <!-- 在使用jsx的时候要使用babel,babel是一个编译转换器,将es6转换为浏览器可运行的东西 -->
  <script type="text/babel">

  /*
    ReactDOM.render()
    react最基本的方法,将模板转换成html语言,渲染dom并插入到指定的dom中
    三个参数:
    参数一:模板的渲染内容html形式
    参数二:这段模板需要插入的dom节点
    参数三:渲染后的回调,一般不用
  */
  ReactDOM.render(
    <h1>Hello, react!</h1>,
    document.getElementById('examp')
  );
  </script>
</html>

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(
  <h1>Hello React</h1>,
  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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="example">

    </div>
    <script src="./src/bundle.js" charset="utf-8"></script>
  </body>
</html>

项目目录结构: