react

1 react准备工作(安装node环境) http://nodejs.cn/download/ 可以按照如下链接进行安装与配置 https://www.runoob.com/nodejs/nodejs-install-setup.html 2 新建react项目 3 启动自己的react文件 (cd 自己所创建的文件名,进入自己所创建的文件 npm run start启动该react文件) 4 启动后的页面为 5 react的基本了解(3个核心库) react.min.js - React 的核心库 react-dom.min.js - 提供与 DOM 相关的功能 babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。 6 react项目的基本组成 public 中index.html是项目启动以后的唯一单页面(不可在里面添加其他的html文件) 开发的内容 在src目录中 也就是我们经常需要写代码的地方 有.css文件 .js文件(组件) .scss 等等,但不能有.html文件 7 删除掉src中所有内容 新建一个index

react组件传参详情了解一下～（内包含16.6版本react生命周期的使用） 组件传参父传子： 父组件 import React, { Component } from 'react'; import Three from '../three'; export default class Two extends Component { constructor(props) { super(props); this.state = { n: 1 }; } incrime = () => { this.setState({ n: this.state.n + 1 }); // 要保证自身先+1再赋值，所以不可以用++，不过++可以放在前面 }; render() { let { n } = this.state; return ( <div className="two"> <Three n={n} /> <div>来自父组件的{n}</div> <button onClick={this.incrime}>+</button> </div> ); } } 子组件： import React , { Component } from 'react' ; export default class Three extends Component { constructor ( props

1、讲jsx内容放进数组里,然后{}解析,会自动去掉[ ]和",",展现数组内容 2、利用arr.map(function(item,index){return xxx}) 代码示例: import React from 'react' ; import ReactDOM from 'react-dom' ; import './index.css' ; import App from './App' ; import * as serviceWorker from './serviceWorker' ; let arr = [ 1 , 2 , 3 ] let arr2 = [ < h1 > 1 < / h1 > , < h1 > 2 < / h1 > , < h1 > 3 < / h1 > ] class A extends React . Component { constructor ( props ) { //将props传递给父类构造器 super ( props ) ; this . state = { arr3 : [ { name : 'jeff' , age : 18 } , { name : 'mike' , age : 19 } , { name : 'tom' , age : 20 } ] } } render ( ) { return ( < div >

前言 　 　　下面是我们使用到技术栈: 　　　　webpack + react + redux + react-router + react-thunk + ES6 + .... 　　注意事项： 　　　　建议使用npm5.X 或者 yarn 包管理工具(最好不要使用cnpm,虽然安装包速度上很快,但是在文件关联上会有坑,之前用的时候被坑过) 一、新建项目目录 config : webpack 配置文件 dist： 打包后代码 src： 源码目录 二、基础配置 安装基础的包 // 生成默认package.josn 文件 npm init // 安装 webpack 和 webpack-dev-server npm install webpack webpack-dev-server --save-dev // 安装 react react-dom npm install react react-dom --save // 安装 babel-core 、babel-loader、babel-preset-env、babel-preset-react npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev // html-webpack-plugin 生成html文件 npm

这是本人用React+Express+mongodb搭建的一个简易博客系统，包括前端展示和后台管理界面。查看源码欢迎访问 我的github 以下是参考我的源码后的操作 技术架构 前端 基础：HTML+CSS+JS+JQuery（使用的ajax交互，后期会考虑用fetch） 框架：React+React-Router 语法：ES6 构建工具：Webpack 后台 Node+Express搭建 数据库 MongoDB数据库 项目运行 安装 安装好node环境 安装好mongodb 可安装一个mongodb可视化工具（Robo 3T） 把仓库克隆到本地 git clone git@github.com:wlfsmile/myBlog.git 安装配置环境 cd myBlog npm i或者(cnpm,下同) 全局安装webpack npm i -g webpack 安装nodemon，让node自动重启 npm install -g nodemon 使用 操作mongodb 新建一个database，命名为blog （可选）新建两个collection，为articles和comments，可自己先录入数据，也可以直接到后台管理界面去输入存入数据 运行mongodb mongod --dbpath d:/mongodb/data(这是你mongodb的安装路径，我是装在d盘根目录下

Day0 准备学习React 来源： https://www.cnblogs.com/allenem/p/11098178.html

生命周期的理解 class App extends Component{ constructor(){//1 console.log("constructor") //初始化属于组件的属性 super(); this.state = { num:1 } } changehandler(e){ this.state.num = e.target.value this.setState({ num:e.target.value }); } componentWillMount(){//2 //不推荐在此处渲染数据，可能会阻塞 console.log("componentWillMount") } componentDidMount(){//4 console.log("componentDidMount") } shouldComponentUpdate(){//1 问该不该更新return true；则就是1 console.log("shouldComponentUpdate") } componentWillUpdate(){//2 问shouldComponentUpdate该不该更新return true；则就是2(更新之前) console.log("componentWillUpdate") } componentDidUpdate(){/

import React,{Component} from 'react';import Child from './Child.js' class App extends Component{ constructor(){ //初始化属于组件的属性 super(); this.state = { age:12, name:'234' } } render(){ //结构赋值 let {age,name} = this.state; return( <div> {/* 组件的使用必须大写 */} <Child age={age} name={name}> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </Child> </div> ) } } export default App; 父组件App.js age={age} name={name}传递给Child.js 1 //使用jsx必须引入React 2 import React,{Component} from 'react'; 3 class Child extends Component{ 4 constructor(props){ 5 //初始化属于组件的属性 6 super(props); 7 8 } 9 render(){ 10 console.log(this.props)

props是组件固有的属性集合，其数据由外部传入，一般在整个组件的生命周期中都是只读的，React的API顶层设计也决定了这一点。属性初值通常由React.createElement函数或者JSX中标签的属性值进行传递，并合并到组件实例对象的this.props中。事实上，组件接受静态信息的主要渠道就是props属性。 比如： var HelloBox = React.createClass({ 　　　　　　render() { 　　　　　　return <div>{'Hello'+this.props.myattr }</div>; 　　　　　　} 　　　　}) 　　　　React.render(<HelloBox myattr = "world" />,mountNode); 　　或者 　　 React.render（ 　　　　React.createElement（ 　　　　　　HelloBox， 　　　　　　{myattr：‘world’} 　　　　）， 　　　　mountNode 　　　）； 　　　　props中也会包含一些由React自动填充的数据，this.props.children数组中会包含本组件实例的所有子组件，由React自动填充。另外，还能通过配置实现this.props.context跨级包含上级组件的数据等。 此外，props与state的区别体现在

在react中，事件处理的写法和处理方式可能会和vue以及传统html有些不同。 一、事件名和默认行为阻止 事件名采用驼峰写法，并且方法名用大括号引入，而不是双引号： <button onClick={activateLasers}> Activate Lasers </button> 对于类似a标签的默认跳转事件： handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> ); 二、绑定事件 由于作用域的问题，tick函数得卸载外面，这样一来，也就不能操作App这个类下面的所有属性以及事件了。so，那就放里面？ 哈哈，undefined，对此解决方法有三种： ①手动绑定this ②采用属性初始化器语法 ③性能问题的第三种 onClick={(e) => this.handleClick(e)} 使用这个语法有个问题就是每次组件渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。 来源： https://www