Poppy_LYT的博客

React—用webpack一步一步搭建react项目1、npm init -y2、cnpm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server -D// 安装webpack 脚手架，插件， 配置服务器所需的东西3、新建src文件夹加存放源码新建app.js写jsx...

class LoggingButton extends React.Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick () { console.log('this is:', th...

import React from 'react';import ReactDom from 'react-dom';class UserGreeting extends React.Component { render () { return (<h1>欢迎回来！</h1>) }}class GuestGreeting exten...

<h2 style={{color: 'red'}}

import React from 'react';import ReactDom from 'react-dom';class Button extends React.Component { constructor(props) { super(props); this.state = {data: 0}; this.setNewN...

import React from 'react';import ReactDom from 'react-dom';import $ from 'jquery';class Hello extends React.Component { constructor(props) { super(props); this.state = { ...

import React from 'react';import ReactDom from 'react-dom';class HelloMessage extends React.Component { constructor () { super(); this.state = { msg: 'hello' ...

e.target.value

1、父组件render () { return ( <div> <ChildMessage msg={this.state.msg} handleChange={this.handleChange} ></ChildMessage&...

import React from 'react';import ReactDom from 'react-dom';class Select extends React.Component { constructor () { super(); this.state = { value: '' } ...

import React from 'react';import ReactDom from 'react-dom';class MyComponent extends React.Component { handleClick() { // 使用原生的 DOM API 获取焦点 this.refs.myInput.focus(); } ...

1、cnpm install react-router-dom --save2、新建component文件夹，以及三个js文件分别为first.js second.js third.js3、import React from 'react';import ReactDom from 'react-dom';import { BrowserRouter as Router, Route, ...

1、cnpm install prop-types --D2、import PropTypes from 'prop-types';3、组件传值检测与ReactDom.render同级Clock为组件，检测组件中的title值是否为字符串Clock.propTypes = {title: PropTypes.string};...

import React from 'react';import ReactDom from 'react-dom';let number = 0;class Clock extends React.Component { constructor (props) { super (props); this.state = { n...

React—webstorm新建react项目1、在webstorm中选择一个文件夹，输入指令：sudo npx create-react-app 文件名例如：sudo npx create-react-app aa(windows应该不需要加上sudo)// 下载速度很慢。。。完成之后是这样的：2、cd 文件名例如：cd aacd 文件名之后的效果是这样的：输入npm sta...

React—css样式1、新建文件夹src文件夹=》common文件夹=〉style.css：定义样式2、app.jsimport React from ‘react’;import ReactDom from ‘react-dom’;import ‘./common/style.css’;ReactDom.render(hello world2019,document.get...

React—行内样式<span style={{background: 'yellow'}}>内容</span>

React—jsx表达式React 使用 JSX 来替代常规的 JavaScript。let data1 = 'hello world';let data2 = '2019';let data3 = '0905';let html = <i>我是i标签</i>ReactDom.render( <div> {data1} ...

React—组件app.jsclass Nav extends React.Component{ render () { return ( <div className="nav"> <ul> <li>首页</li> ...

React—组件封装1、新建文件夹src=》component=〉nav文件夹=》nav.js2、nav.jsimport React, {Component} from 'react';export default class Nav extends Component { render () { return ( <div cla...

import Nav from '../nav/nav'; // 引一下即可export default class Pic extends Component { render () { return ( <div className="pic"> <img className="img" src...

React—引入图片1、新建文件夹src=》common=》images2、相对路径 Pic.js // 封装的一个组件class Pic extends React.Component{ render () { return ( <div className="pic"> <img cla...

1、app.jsReactDom.render( <div> <Nav></Nav> <Pic title="标题aaa" cont="内容bbb"></Pic> </div>, document.getElementById('root'))2、Pic.js /...

1、新建文件夹component文件夹=》navWrap文件夹=〉navWrap.js2、父组件的jsimport React, {Component} from 'react';import Pic from 'pic/pic';let list = [ { img: require('images/1.jpg'), title: '易烊千玺',...

1、app.jsimport React from 'react';import ReactDom from 'react-dom';import './common/style.css';import Nav from 'nav/nav';import NavWrap from 'navWrap/navWrap';let list = [ { img: re...

React—todolist父组件import React from 'react';import ReactDom from 'react-dom';import Header from './component/header'import List from './component/list'let arr = []; // 定义一个空数组用来储存每次输入的内容class To...