从0开始学 react

2024-04-27 15:04:07

字体：大中小

来源：转载

供稿：网友

1 webpack

mkdir chong0kaishixuereactcd chong0kaishixuereactnpm initnpm install webpack --save-devnpm install -save-dev babel-core babel-loader babel-PReset-es2015 babel-preset-reactnpm install --save react react-domtouch index.htmltouch component/component1.jstouch main.js ```

cat webpack.config.js

var config = { entry: './main.js', output: { path:__dirname, filename: 'index.js', }, devServer: { inline: true, port: 3000 }, module: { loaders: [ { test: //.js?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] }}

cat main.js

import React from 'react';import ReactDOM from 'react-dom';import Component1 from './component/component1'; ReactDOM.render(<Component1 />, document.getElementById('index'))

cat index.html

<!DOCTYPE html><html> <head> <meta charset = "UTF-8"> <title>React App </title> </head> <body> <div id = "index"></div> </body></html> <script src = "index.js"></script>

cat component/component1.js

import React from 'react';export default class Component1 extends React.Component { render() { return ( <div> Hello <br /> component1 </div> ); }}

进入项目根目录

webpack 输出 index.js文件

然后运行 npm start

浏览器显示 “component1” 调用组件成功

问题1 调试发现，npm start能编译通过，但WEB空白，中间的错在终端看不出，

解决方法，在Chrome devtools 中查

问题2 为何直接 npm start 不能编译成 index.js? 但这个时候没有index.js , index.html 显示还是正常的

2 ES6

1 箭头函数

cat component/component1.js

import React from 'react';export default class Component1 extends React.Component { render() { //最简单的 function,一个参数 a var foo = a => a ; console.log(foo('hihi')); //没有参数的直接是空括号 var foo2 =() =>{ alert('haha'); } foo2(); //多个参数要用到小括号,参数间逗号间隔,例如两个数字相加 var add = (a,b) => a+b; console.log(add(1,2)); //返回对象时需要用小括号包起来，因为大括号被占用为代码块了 var getHash =() =>{ return( { name:'zhangsan', age:10 }); }; console.log(getHash()); //点击事件, document.addEventListener('click',event=>{console.log(event);}); return ( <div> <br /> component1 </div> ); }}

3 类class

vi employee.js

class Employee{ //构造 function constructor(id,name,job){ this.id = id; this.name = name; this.job = job; } //注意，上面无分号间隔 getMessage(){ return this.id + "=>" + this.name +"=>" +this.job; }} //export 是导出类,其他地方可以直接 import 这个类 //default 只能用一次，是只是当前页用一次，还是其他页也不能用了? export default Employee;

vi component/component1.js

常量const和 let 声明

vi component/component1.js

import React from 'react';import Employee from '../employee.js';export default class Component1 extends React.Component { render() { var e1 = new Employee('001','jack','cooker'); console.log(e1.getMessage()); // {// let a = 10;// var b = 11;// }// console.log(a);// console.log(b);for(let i =0;i<10;i++){}for(var k=0;k<10;k++){}//console.log(i);console.log(k); return ( <div> <br /> component1 </div> );}}

JSX

cat main.js

import React from 'react';import ReactDOM from 'react-dom';import Component1 from './component/component1';import Component2 from './component/component2'; // ReactDOM.render(<Component2 />, document.getElementById('index2')) //ReactDOM.render(<Component1 />, document.getElementById('index'))// ReactDOM.render(// <div>// <h1>{1+1}</h1>// </div>// ,// document.getElementById('index')// ); var arr =[ <h1> hi</h1>, <h2> react is awesome</h2> ]; ReactDOM.render( <div>{arr}</div>,document.getElementById('index'));

notice:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information. in h1 我网上查了下，知道是要用 key,但查的例子没办法参考，暂时略过,各位留意这里的优化和提高，我自己也要注意以后改正

props和省略号语法

vi component/component2.js

import React,{Component} from 'react';import ReactDOM from 'react-dom';// class Component2 extends React.Component {// render() {// // //最简单的 function,一个参数 a// // var foo = a => a ;// // console.log(foo('hihi'));// // //没有参数的直接是空括号// // var foo2 =() =>{// // alert('haha');// // }// // foo2();// // //多个参数要用到小括号,参数间逗号间隔,例如两个数字相加// // var add = (a,b) => a+b;// // console.log(add(1,2));// // //返回对象时需要用小括号包起来，因为大括号被占用为代码块了// // var getHash =() =>{// // return(// // {// // name:'zhangsan',// // age:10// // });// // };// // console.log(getHash());// // //点击事件,// // document.addEventListener('click',event=>{console.log(event);});// return (// <div>// Component2<br />// </div>// );// }// }//声明一个组件类，叫 MyTitleclass Component2 extends Component{ show(){ console.log(this.props.title); console.log(this.props.contents); console.log(this.props.name); } //渲染组件：一个按钮，并可以点击 //注意 bind(this)的写法，这是 JSX 语法要的 //如果怕麻烦也可以用箭头 function render(){ return(<button onClick={this.show.bind(this)}>click</button>); }}//要向组件传递的数据 var data ={ title:'this is a little', contents:'this is contents'};ReactDOM.render(<Component2 {...data} name ={'my name'} />,document.getElementById('index'));export default Component2;

这里写图片描述步骤是：1 声明组件： ES6的类声明 2 渲染组件： render用法渲染方法包括两个参数,一个是组件名称，一个是页面的 id，进一步得想，index.html可以有多个 id吗？不同的 component可以定位不同的 id,然后在 index.html上显示吗？还是main.js是一个大的组件，由很多小组件组合而成，这就不是 SPA了，多页面这里如何处理

this.props.children

cat component/NodeList.js

'use strict';import React,{Component} from 'react';import ReactDOM from 'react-dom';//声明一个组件类，叫 NodeListclass NodeList extends Component{ render(){ return( <ul> { //遍历 this.props.children 节点 React.Children.map(this.props.children,function(child){ return(<li>{child}</li>); }) } </ul> ); <NodeList><span> hello</span><span> world</span></NodeList>; }}export default NodeList;

cat main.js

import React,{Component} from 'react';import ReactDOM from 'react-dom'; import NodeList from './component/NodeList'; ReactDOM.render(<NodeList><span> hello</span><span> world</span></NodeList> ,document.getElementById('index'));i

state状态机和 refs

cat component/inputstate2.js

'use strict';import React,{Component} from 'react';import ReactDOM from 'react-dom';//声明一个组件类，叫 Searchclass Search extends Component{ checkSth(){ var inputValue = this.refs.myInput.value; alert(inputValue); } render(){ return(<div><input type = "text" ref="myInput" /><button onClick ={this.checkSth.bind(this)}>获取内容</button></div> ); }}// ReactDOM.render(// document.getElementById('index')// );export default Search;

cat main.js

import React,{Component} from 'react';import ReactDOM from 'react-dom';import Search from './component/inputstate2'; ReactDOM.render(<Search/> ,document.getElementById('index'));![这里写图片描述](http://img.blog.csdn.net/20170204145612982?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2lyZW5j/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)#综合案例cat component/box.js 'use strict';import React,{Component} from 'react';import ReactDOM from 'react-dom';//小部件，渲染为 UL 列表class Items extends Component{ render(){ var arrLi =[]; for(let i=0;i<this.props.info.length;i++){ //注意，这不是拼接字符串 arrLi.push(<li key={i}> {this.props.info[i]}</li>); } return(<ul>{arrLi}</ul>); }}//大部件class Box extends Component{ constructor(props){ super(props); this.state ={ list:this.props.sourceData } } checkSth(){ var arr=[]; //获取文本信息 var inputValue = this.refs.myInput.value; //获取 props 信息 var sourceData = this.props.sourceData; //选择数据 for(let i=0;i<sourceData.length;i++){ if(sourceData[i].indexOf(inputValue)!= -1){ arr.push(sourceData[i]); } } //更新状态机 this.setState({list:arr}); } render(){ return( <div><input type="text" ref="myInput" onKeyUp={this.checkSth.bind(this)} /><Items info={this.state.list} /></div> ); }};export default Box;

cat main.js

import React,{Component} from 'react';import ReactDOM from 'react-dom';import Box from './component/Box'; var data = ['jackson','milly','john smith','make','denny','emili','jenny']; ReactDOM.render(<Box sourceData={data}/> ,document.getElementById('index'));

这里写图片描述