2018-11-22 12:45:34 strive_for_myself 阅读数 965
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40572 人正在学习 去看看 易荟云

根据自己最近学习react 视频,下面谈谈如何去创建一个react项目
准备工作:
ES6语法、html5、css3、JSX语法
node.js

这里我们根据react官网中给出的安装react项目步骤来创建一个react项目。
打开react官网,可以是中文文档,当然,如果你的英文水平支持的话,可以去查看react英文的官方文档,英文的官方文档的内容相比较于中文文档会更加准确些。

在这里插入图片描述

这里我们打开的是react的中文文档官网,我们点击左上角的文档。出现下面的页面:
在这里插入图片描述

这是react官网提供的学习文档,想要学习react相关概念内容的,可以通过这个文档去学习react相关内容。

之后,我们需要点击右侧菜单栏中的安装按钮。
在这里插入图片描述
点击第二项,使用React开发新项目。
在这里插入图片描述
进入上述页面后,我们下拉左侧内容部分,可以看到下图(Create React App):
在这里插入图片描述
上面描述的是如果创建一个react-app的方式,可以看到,这里是需要用到的是create-react-app脚手架。因此,我们需要先通过npm去下载create-react-app脚手架,它可以帮助我们快速的去搭建react项目。

  1. 通过npm下载 create-react-app

由于我们需要去使用create-react-app,因此我们可以通过npm下载create-react-app。

这里我直接给出如何通过npm安装全局create-react-app脚手架的方式。当然你也可以通过网上搜索如何去下载它。

npm install -g create-react-app

2.根据官网给出的安装内容,我们现在在已经安装好了create-react-app的情况下,开始正式通过create-react-app去安装我们的react项目。

查看上面我标记有Create-React-App的图中,我们接下来的操作是:打开你的命令行(windows系统下,无论是GitCMD、cmd、还是node.js都可以)

通过命令行命令或直接右击桌面,将命令行路径定位到桌面上(Desktop)上

之后输入命令(npx create-react-app 项目名称):

在这里插入图片描述

上图中项目名称为官方给出demo的my-app,当然你也可以自己起项目名称。

输入后回车。等待它创建好你的项目。

3.启动你的react项目
在这里插入图片描述
分开输入上面两行命令即可。

他的意思是:你需要先进入到你新创建的项目路径下,通过npm start命令创建服务,在你本地创建了一个3000端口后的服务。

在你运行完上面两行命令之后,他会自动帮你打开页面地址为http://localhost:3000的页面了。如下图:
在这里插入图片描述
这时,你可以打开桌面或你自己创建项目路径上的react项目文件夹。可以观察他的文件结构:
在这里插入图片描述

这样,你就成功创建了一个最简单的react项目了。
d=====( ̄▽ ̄*)b!!!

2019-06-29 18:26:01 huangjianfeng21 阅读数 990
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40572 人正在学习 去看看 易荟云

react脚手架

用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果

react提供了一个专门用于创建react项目的脚手架库: create-react-app

项目的整体技术架构为: react + webpack + es6  + babel + eslint

使用脚手架开发的项目的特点: 模块化(js是一个一个模块编写的), 组件化(界面是由多个组件组合编写实现的), 工程化(实现了自动构建/运行/打包的项目)

 

 

使用react脚手架创建项目并启动

下载脚手架:npm install -g create-react-app

创建项目:create-react-app react-app

进入项目目录:cd react-app

启动项目:npm start

 

 

react脚手架创建项目目录结构

node_modules-------第三方依赖模块文件夹

public

  | -- index.html------------------------主页面

src:

.gitignore-------git版本管制忽略的配置

package.josn-------应用包配置文件

README.md-------应用描述说明的readme文件

 

 

 

基于脚手架项目编写应用案例

实现如下的效果

使用脚手架创建项目

拆分组件

  • 应用组件: App------state: comments/array
  • 添加评论组件: comment-add-------state: username/string, content/string        props: add/func
  • 评论列表组件: comment-list-------- props: comment/object, delete/func, index/number
  • 评论项组件: comment-item-------- props: comments/array, delete/func

上面是拆分的每个组件,并且将页面组件在App.js中引入

实现静态组件并且实现动态组件(组件动态化,也就是添加数据交互)

App.js中引入comment组件

import React, { Component } from 'react';
import './App.css';

import Comment from './views/comment/comment'
class App extends Component {
  render() {
    return (
      <div className="App">
        <Comment/>
      </div>
    );
  }
}

export default App;

comment组件

组件中引入comment-add和comment-list组件

import React, { Component } from 'react';
import './comment.css';

import CommentAdd from './comment-add/comment-add'
import CommentList from './comment-list/comment-list'
class Comment extends Component {
  // 给组建对象指定state属性,可以不用constructor
  state = {
    comments: [
      {username: 'Tom', content: '一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)'},
      {username: 'Jack', content: '虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应'},
      {username: 'Jack', content: '用JS对象树表示DOM树的结构;然后用这个树构建一个真正的DOM树插到文档当中'},
      {username: 'Jack', content: '这里render不断在执行更新date数据,但是input是不会更新的'},
      {username: 'Jack', content: '拆分组件: 拆分界面,抽取组件,实现静态组件: 使用组件实现静态页面效果'},
      {username: 'Jack', content: '数据保存在哪个组件,如果是这个数据只是某个组件需要用到,那么就放在该组件,如果有两个组件需要用到'},
      {username: 'Jack', content: '子组件改变父组件的状态(状态在哪个组件,更新状态的行为就应该定义在哪个组件,父组件定义函数,传给子组件调用)'}
    ]
  }

  // 给comment-add组件调用的添加评论的方法
  addComment = (comment) => {
    const {comments} = this.state
    comments.unshift(comment)
    this.setState({comments}) // 更新状态
  }

  // 给comment-item组件调用的删除评论的方法(这里先把这个方法传个comment-list组件,再由comment-list传给comment-item)
  deleteComment = (index) => {
    const {comments} = this.state
    comments.splice(index, 1)
    this.setState({comments}) // 更新状态
  }

  render() {
    const {comments} = this.state
    return (
      <div className="comment">
        <h1 className='comment-title'>请发表对React的评论</h1>
        <div className='comment-main'>
          <div className='comment-content-left'>
            <CommentAdd addComment={this.addComment}/>
          </div>
          <div className='comment-content-right'>
            {/*<CommentList comments={comments}/>*/}
            <CommentList comments={comments} deleteComment={this.deleteComment}/>
          </div>
        </div>
      </div>
    );
  }
}

export default Comment;
.comment-list-title{
  font-size: 30px;
  height: 59px;
  border-bottom: 1px solid #cccccc;
}
.comment-list-content{
  min-height: 20px;
  max-height: 419px;
  overflow-y: auto;
  padding: 10px 0;
  box-sizing: border-box;
}
.no-comment-list{
  color: #FF4A16;
}

comment-add组件

import React, { Component } from 'react';
import './comment-add.css';
import propTypes from 'prop-types'

class CommentAdd extends Component {
  static propTypes = {
    addComment: propTypes.func.isRequired
  }
  state = {
    username: '',
    content: ''
  }

  // 一个事件需要使用bind绑定this,太麻烦,而已使用箭头函数(里面没有this,使用外围的this)
  handleSubmit = () => {
    // 收集表单数据
    const comment = this.state
    // 更新状态
    this.props.addComment(comment)

    // 清除输入框的数据
    this.setState({
      username: '',
      content: ''
    })
  }

  handleNameChange = (event) => {
    const username = event.target.value
    this.setState({username: username})
  }

  handleContentChange = (event) => {
    const content = event.target.value
    this.setState({content: content})
  }

  render() {
    const {username, content} = this.state
    return (
      <div className="comment-add">
        <div className='user-name-content'>
          <h5 className='user-name-title'>用户名</h5>
          <input className='user-name-input' type='text' value={username} onChange={this.handleNameChange}/>
        </div>
        <div className='comment-content'>
          <h5 className='comment-content-title'>评论内容</h5>
          <textarea className='comment-content-input' type='text' value={content} onChange={this.handleContentChange}/>
        </div>
        <div className='submit-btn' onClick={this.handleSubmit}>提交</div>
      </div>
    );
  }
}

export default CommentAdd;
.comment-add{
  width: 100%;
}
.user-name-content,.comment-content{
  width: 100%;
  margin-bottom: 20px;
}
.user-name-title,.comment-content-title{
  margin-bottom: 5px;
  font-size: 20px;
  color: #000000;
}
.user-name-input{
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 4px;
  outline: none;
  border: 1px solid #cccccc;
}
.comment-content-input{
  width: 100%;
  height: 240px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 4px;
  outline: none;
  border: 1px solid #cccccc;
}
.submit-btn{
  width: 70px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  color: black;
  border: 1px solid #cccccc;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 auto;
}

comment-list组件

组件中引入comment-item组件

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './comment-list.css';

import CommentItem from '../comment-item/comment-item'
class CommentList extends Component {
  // 子组件类指定接收数据的属性
  static propTypes = {
    comments: PropTypes.array.isRequired,
    deleteComment: PropTypes.func.isRequired
  }

  render() {
    const {comments, deleteComment} = this.props
    const display = comments.length === 0? 'block' : 'none'

    return (
      <div className="comment-list">
        <h2 className='comment-list-title'>评论回复</h2>
        <div className='comment-list-content'>
          {comments.map((comment, index) => <CommentItem comment={comment} index={index} key={index} deleteComment={deleteComment} />)}
        </div>
        <div className='no-comment-list' style={{display}}>暂无评论,在左侧添加您对React的评价!!!</div>
      </div>
    );
  }
}

export default CommentList;
.comment-list-title{
  font-size: 30px;
  height: 59px;
  border-bottom: 1px solid #cccccc;
}
.comment-list-content{
  min-height: 20px;
  max-height: 419px;
  overflow-y: auto;
  padding: 10px 0;
  box-sizing: border-box;
}
.no-comment-list{
  color: #FF4A16;
}

comment-item组件

import React, { Component } from 'react';
import './comment-item.css';
import PropTypes from "prop-types";

class CommentItem extends Component {
  // 子组件类指定接收数据的属性
  static propTypes = {
    comment: PropTypes.object.isRequired,
    index: PropTypes.number.isRequired,
    deleteComment: PropTypes.func.isRequired
  }

  handleDelete = () => {
    const {comment, index, deleteComment} = this.props
    // 提示
    if (window.confirm(`确定删除${comment.username}的评论吗`)) { // confirm方法不是全局的,需要用window来调用
      // 确定后删除
      deleteComment(index)
    }
  }

  render() {
    const {comment} = this.props

    return (
      <div className="comment-item">
        <div className='comment-item-top'>
          <h3 className='comment-item-user'>{comment.username}说:</h3>
          <div className='comment-item-delete'><p onClick={this.handleDelete}>删除</p></div>
        </div>
        <div className='comment-item-content'>{comment.content}</div>
      </div>
    );
  }
}

export default CommentItem;
.comment-item{
  width: 100%;
  border: 1px solid #cccccc;
  border-radius: 4px;
  min-height: 20px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.comment-item-top{
  height: 40px;
  width: 100%;
  display: flex;
}
.comment-item-user{
  flex: 1;
  height: 40px;
  line-height: 40px;
}
.comment-item-delete{
  width: 80px;
  height: 40px;
}
.comment-item-delete p{
  width: 50px;
  height: 20px;
  border: 1px solid #cccccc;
  text-align: center;
  line-height: 20px;
  border-radius: 4px;
  cursor: pointer;
  margin: 10px auto 0;
  font-size: 12px;
  color: #0a25ff;
}
.comment-item-content{
  width: 100%;
  min-height: 20px;
  padding: 10px 0;
  box-sizing: border-box;
}

 

2017-09-15 10:05:57 u010977147 阅读数 853
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40572 人正在学习 去看看 易荟云

React Without ES6

ES6语法创建组件

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

如果不用ES6语法,就需要用create-react-class模块创建

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

声明默认props

ES6 class中把defaultProps定义为组件的一个属性

class Greeting extends React.Component {
  // ...
}
Greeting.defaultProps = {
  name: 'Mary'
};

createReactClass()中则要定义getDefaultProps()

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  render: function() {
        return <h1>Hello, {this.props.name}</h1>;
      }
  },
});

设置state初始值

ES6中在constructor中直接设置this.state

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

createReactClass()中则要定义getInitialState()

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

自动绑定

ES6中不会主动给实例绑定this,所以要显示绑定

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // 这行很重要
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // Because `this.handleClick` is bound, we can use it as an event handler.
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

createReactClass()就不需要主动绑定了

var SayHello = createReactClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },

  handleClick: function() {
    alert(this.state.message);
  },

  render: function() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
});

虽说ES6的方法更麻烦点,但是实际效果更好。可以通过ES6箭头函数的特性去写(箭头函数体内的this对象就是定义所在的对象,而不是使用时所在的对象,且不可改变)

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
  }
  // WARNING: 这个语法还在测试阶段!
  handleClick = () => {
    alert(this.state.message);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

以上方法还属于测试阶段,为了安全使用,可以遵照以下几条建议:

  • 在constructor里绑定this
  • 箭头函数调用时onClick={(e) => this.handleClick(e)}
  • 还是使用createReactClass
2016-04-21 20:16:38 jsdchenye 阅读数 7035
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40572 人正在学习 去看看 易荟云

         当我们打算使用Webpack构建工具,React和ES6来开发项目的时候,构建这么一套自动化的项目的流程见下:

 

第一步:webpack是一个基于node的项目,我们使用命令行对webpack进行全局的安装

npm install webpack –g。可以通过webpack  –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack,我们需要将webpack安装到当前的项目依赖中,在新建的文件夹下输入:npm init(安装webpack依赖,会在对应文件夹下生成package.json),然后使用npm install webpack –save-dev将webpack的模块添加到本地项目中。此时会生成一个本地的模块目录node_modules。如下图所示:


第二步:在新建的文件下目录下创建你的工程目录结构。为了演示react和es6,我这里需要展示一个背景色为橙色,只显示一段文字:hello!的工程。首先创建一个index.html,入口文件app.js,被引用的UI模块文件hello.js以及对应的样式文件style.css。目录结构如下所示:

 

第三步:这里定义的入口js文件app.js中可以使用es6中的import引用hello.js中的UI组件。同时也可以使用require来引入定义的style.css文件用来改变元素的样式属性。对应的在hello.js中可以使用react创建对应的功能模块的组件,并通过export导出接口给其他文件使用。



第四步:创建并使用webpack最重要的配置文件webpack.config.js。这个文件主要定义webpack构建工具识别的入口文件entry,出口文件output(这里的出口文件主要是用来被index.html中的script标签进行引用)以及webpack为了打包对应css,img,es6所需要的加载器loader。这里的webpack.config.js是webpack默认运行时加载的配置文件。


TIPS:这里为了加载使用各个loader,比如说css-loader,babel-loader,style-loader等等加载器,需要我们在开发项目之前进行安装。有两个安装方式:

A.     可以直接在命令行输入对应安装命令:npm install style-loader –save-dev之类

B. 直接在package.json中的devDependencies定义所需要使用的loader加载器名字,然后在命令行直接输入npm install进行对应loader的安装。


这里为了可以使用webpack的更具文件的改动直接自动刷新浏览器的功能,安装并使用了webpack-dev-server;注意在使用webpack-devserver的时候一定要在后面加上参数—hot和—inline才能达到自动刷新浏览器的目的。

 

2019-09-03 20:56:26 qq_41805715 阅读数 934
  • React Native初级入门到项目实战

    ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序,“Learn once,write anywhere”。使用ReactNative开发,既拥有Native的良好人机交互体验,又保留了React框架的开发效率,集Native应用和Web应用优点于一身。

    40572 人正在学习 去看看 易荟云

1.React项目创建

npm install -g create-react-app

create-react-app  myProjectName

创建基于Webpack与ES6的简单项目模板

cd  myProjectName

进入创建项目目录

npm start

启动项目

 

2.React项目打包部署到服务器

npm run build

代码会被编译到build目录中

后台使用的是Django框架

 

在后台项目中创建一个static文件夹和templates文件夹

 

在static文件夹中建立四个文件夹分别为css、imgs、js、json

将build目录下的所有文件分别按照后缀名放入对应的文件夹中

 

将build目录下的index.html文件放入

用编辑器打开index.html,调整格式,在head中加一行{% load static %}

然后将所有的js、css、json、图片文件用{% static ' ' %}包起来,'  '这里面的路径要是js/、css/、json/、imgs/下的什么什么

 

打开cmd,进入后台项目文件夹中,然后输入python manage.py runserver 

启动Django

在浏览器中输入在package.json中配置的代理地址,即可以显示项目界面

 

 

 

 

 

 

 

 

 

React项目部署

阅读数 3486

webpack创建react项目

阅读数 246

没有更多推荐了,返回首页