React JS Tutorials for Beginners - 1 - Getting Started https://www.youtube.com/watch?v=-AbaV3nrw6E&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA Downloads: https://facebook.github.io/react/downloads.html Sample code:https://github.com/buckyroberts/React-Boilerplate browser.min.js: Convert jsx into javascript, jsx转换网站https://babeljs.io/repl/ React JS Tutorials for Beginners - 2 - Simple Demo https://www.youtube.com/watch?v=2NLgQMs2hOw&index=2&list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA Sample Demo: <div id="example"></div> <script type="text/babel"> //注意是txt/babel ReactDOM.render(<h1>Hello World</h1>,document.getElementById('example')); //将Html代码填充到指定的div中 </script> 3. Components: <div id="example"></div> <script type="text/babel"> var Bacon=React.createClass({ //createClass创建component render: function(){ return (<div> //只能返回一个父元素 <h2>This is a simple component!</h2> <p>This is a simple component!</p> </div> ); } }); ReactDOM.render(<Bacon />,document.getElementById('example')); //ReactDOM.render(<div><Bacon /><Bacon /><Bacon /></div>,document.getElementById('example')); //呈现多个Component </script> 4. Props (Property) <div id="app"></div> <script type="text/babel"> var Movie=React.createClass({ //createClass创建component render: function(){ return (<div> <h1>{this.props.title}</h1> <h2>{this.props.genre}</h2> </div> ); } }); //ReactDOM.render(<Movie />,document.getElementById('app')); ReactDOM.render(<div> <Movie title="Avatar" genre="action" /> <Movie title="The Notebook" genre="romance" /> <Movie title="Captain America" genre="action" /> </div>,document.getElementById('app')); //呈现多个Component </script> 5. Event Handling <div id="container"></div> <script type="text/babel"> var Comment=React.createClass({ //createClass创建component edit: function(){ alert("edit"); }, remove: function(){ alert("remove"); }, render: function(){ return (<div className="commentContainer"> //注意是className <div className="commentText">{this.props.children}</div> //this.props.children显示下面<Comment></Comment>之间的内容 <button onClick={this.edit} className="button-primary">Edit</button> //事件处理onClick={this.edit} <button onClick={this.remove} className="button-danger">Remove</button> </div> ); } }); ReactDOM.render(<div className="board"> <Comment>Hey my name is Steve</Comment> <Comment>Jack</Comment> <Comment>Amy</Comment> </div>,document.getElementById('container')); </script> 6. State <div id="container"></div> <script type="text/babel"> var Checkbox=React.createClass({ //createClass创建component getInitialState: function(){ //getInitialState设置初始状态 return {checked:ture} }, handleChecked: function(){ this.setState({checked: !this.state.checked}); //setState设置状态 }, render:function(){ var msg; if(this.state.checked){ msg="checked" }else{ msg="unchecked" } return (<div> <input type='checkbox' onChange={this.handleChecked} defaultChecked={this.state.checked} /> ////defaultChecked绑定初始状态 <h2>Checkbox is {msg}</h2> </div>); } }); ReactDOM.render(<Checkbox />,document.getElementById('container')); </script> 7. Adding State to Components <div id="container"></div> <script type="text/babel"> var Comment=React.createClass({ //createClass创建component getInitialState: function(){ return {editing:false} //编辑状态为false }, edit: function(){ this.setState({editing:true}); //设置编辑状态为true }, remove: function(){ alert("remove"); }, save: function(){ var val=this.refs.newText.value; //用ref来获取输入框中的值 this.setState({editing:false}); }, renderNormal: function(){ return (<div className="commentContainer"> <div className="commentText">{this.props.children}</div> <button onClick={this.edit} className="button-primary">Edit</button> <button onClick={this.remove} className="button-danger">Remove</button> </div> ); }, renderForm: function(){ return (<div className="commentContainer"> <textare ref="newText" defaultValue={this.props.children}></textare> //注意defaultValue, 如果给id会导致很多重名,用ref来获取输入框中的值 <button onClick={this.save} className="button-success">Save</button> </div> ); }, render: function(){ if(this.state.editing){ return this.renderForm(); }else{ return this.renderNormal(); } } }); ReactDOM.render(<div className="board"> <Comment>Hey my name is Steve</Comment> <Comment>Jack</Comment> <Comment>Amy</Comment> </div>,document.getElementById('container')); </script> 8. Multiple Child Components (在一个容器内排序多个Components) <div id="container"></div> <script type="text/babel"> var Comment=React.createClass({ getInitialState: function(){ return {editing:false} //编辑状态为false }, edit: function(){ this.setState({editing:true}); //设置编辑状态为true }, remove:function(){ this.props.deleteFromBoard(this.props.index); //调用外层属性deleteFromBoard } save: function(){ var val=this.refs.newText.value; //用ref来获取输入框中的值 this.props.updateCommentText(val,this.props.index); //调用外层属性updateCommentText this.setState({editing:false}); }, renderNormal: function(){ return (<div className="commentContainer"> <div className="commentText">{this.props.children}</div> <button onClick={this.edit} className="button-primary">Edit</button> <button onClick={this.remove} className="button-danger">Remove</button> </div> ); }, renderForm: function(){ return (<div className="commentContainer"> <textare ref="newText" defaultValue={this.props.children}></textare> //注意defaultValue, 如果给id会导致很多重名,用ref来获取输入框中的值 <button onClick={this.save} className="button-success">Save</button> </div> ); }, render: function(){ if(this.state.editing){ return this.renderForm(); }else{ return this.renderNormal(); } } }); var Board=React.createClass({ //Comment是组件,组件可以有很多个.Board是组件外面的容器用于管理里面的多个组件. getInitialState:function(){ return{ comments:[ 'aaaaaa', 'bbbbbb', 'cccccc' ] } }, add:function(text){ var arr=this.state.comments; arr.push(text); //push,把元素加入数组 this.setState({comments:arr}); }, removeComment: function(i){ var arr=this.state.comments; arr.splice(i,1); //从第i个开始,去掉1个元素.返回新的数组. this.setState({comments:arr}); }, updateCommand:function(newText,i){ var arr=this.state.comments; arr[i]=newText; //将新值赋值给数组中指定的元素 this.setState({comments:arr}); //更新数组,将新数组arr更新到comments中 } eachComment:function(text,i){ return ( <Comment key={i} index={i} updateCommentText={this.updateComment} deleteFromBoard={this.removeComment}> //注意关键字 key和index, 以及自定义属性updateCommentText,deleteFromBoard {text} </Comment> ); }, render:function(){ return( <div> <button onClick={this.add.bind{null,'some default text'}} className="button-info Create">Add New</button> //注意写法onClick={this.add.bind{null,'some default text'}} <div className="board"> { this.state.comments.map(this.eachComment) //map相当于for循环 } </div> </div> ); }; }); ReactDOM.render(<Board />,document.getElementById('container')); </script> --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- constructor(){ super(); this.state={name: "Will"}; } this.setState({name:"Bob"}); changeTitle={this.changeTitle.bind(this)} //changeTitle方法在当前js文件中需要用.bind(this) REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS https://www.youtube.com/watch?v=1iAG6h9ff5s&index=6&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b Bootstrap模版: startbootstrap.com 安装react router的命令: npm install -S react-router Store类似于Angularjs中的Service. componentWillMount(){//Component的构造函数 TodoStore.on("change",this.getTodos); } componentWillUnmount(){ //必须卸载这个方法,不然会导致内存泄露. TodoStore.removeListener("change",this.getTodos); } npm install -S flux Actions -> Dispatcher -> Stores -> Components -> Actions. import * as TodoAcions from "../action/TodoAcions"; //表示TodoActions中的所有方法. Ajax: axios("http://someurl.com/somedataendpoint").then((data)=>{ console.log("got the data!",data); }); Redux核心概念有三个：actions,store,reducers. Immutable JS - Redux Tutorial #2 - React.js Tutorial https://www.youtube.com/watch?v=9M-r8p9ey8U&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b&index=16 var a={name:"Will", things:[0,1,2]} var b=Object.assign({},a,{name:"Fred"}) b.things=a.things.concat(3) state={...state,age:action.payload} Redux Middleware Tutorial - Redux Tutorial #5 https://www.youtube.com/watch?v=DJ8fR0mZM44&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b&index=19 中间件: import {applyMiddleware,createStore} from "redux"; const logger=(store)=>(next)=>(action)=>{ console.log("action fired",action); next(action); } const store=createStore(reducer,1,middleware) Connecting React & Redux - Redux Tutorial #7 https://www.youtube.com/watch?v=nrg7zhgJd4w&index=21&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b import {connect} from "react-redux" @connect((store)=>{ return{ user:store.user.user, userFetched:store.user.fetched, tweets:store.tweets.tweets, }; }) ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ReactJS / Redux Tutorial - #1 Introduction https://www.youtube.com/watch?v=qrsle5quS7A&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ npm install redux -save //安装redux js中的对象: const initialState = { result:1, lastValues:[] } state = { ...state, //ES6语法,包括state对象的所有属性 result: state.result + action.payload, lastValues: [...state.lastValues,action.payload] } ReactJS / Redux Tutorial - #5 Multiple Reducers https://www.youtube.com/watch?v=BVvBa18o8Es&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=5 import {createStore, combineReducers} from "redux" const store = createStore(combineReducers({mathReducer,userReducer})); ReactJS / Redux Tutorial - #6 Redux Middleware https://www.youtube.com/watch?v=AgO7YcJeBh4&index=6&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ import {createStore, combineReducers, applyMiddleware} from "redux" const myLogger = (store) => (next) => (action) => { console.log("Logged Action",action); next(action); } const store = createStore(combineReducers({mathReducer,userReducer}), {}, applyMiddleware(myLogger)); npm install redux-logger --save import logger from "redux-logger"; const store = createStore(combineReducers({mathReducer,userReducer}), {}, applyMiddleware(logger())); ReactJS / Redux Tutorial - #7 Connect ReactJS and Redux https://www.youtube.com/watch?v=tfuZ7uZmVyg&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=7 npm install react-redux --save import {connect} from "react-redux"; import {Provider} from "react-redux"; <Provider store={store}> <App/> </Provider> const mapStateToProps = (state) => { return { user: state.userReducer, math: state.mathReducer } } const mapDispatchToProps = (dispatch) => { return { setName:(name)=>{ dispatch({ type:"SET_NAME", payload: name }); } } } export default connect(mapStateToProps,mapDispatchToProps)(app); <Main changeUsername={()=>this.props.setName("Anna")} /> <User username={this.props.user.name} /> ReactJS / Redux Tutorial - #8 Containers & Components (Smart & Dumb Components) https://www.youtube.com/watch?v=m2q3Dyr6To4&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=8 Dumb Components 只是方法不是类, 只需要return html不需要render. Smart Components放在containers文件夹下, Dumb Components放在components下. ReactJS / Redux Tutorial - #9 A better Project Structure https://www.youtube.com/watch?v=YmGm-qwbJdc&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=9 app actions, components, containers(app.js), reducers index.js store.js ReactJS / Redux Tutorial - #10 Async Actions https://www.youtube.com/watch?v=h892pHdLQtM&index=10&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ npm install redux-thunk --save import thunk from "redux-thunk"; applyMiddleware(logger(),thunk) npm install redux-promise-middleware --save import promise from "redux-promise-middleware"; applyMiddleware(logger(),thunk,promise()) return { type:"SET_NAME", payload:new Promise((resolve, reject) => { setTimeout(()=>{ resolve(name); },2000); }) } Reducer.js中 case "SET_NAME_FULFILLED" //因为这个promise中间件,需要加上_FULFILLED ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Learning React.js [1] - An Overview https://www.youtube.com/watch?v=vYldnghykaU&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO when a state is changed, the component is re-rendered and markup will be updated. This makes React very dynamic. Lifecycle Methods: render - Renders a component. The only one that is required. getInitialState - You can set default values for your states. getDefaultProps - Set defaults for properties. componentWillMount - Invoked once on client & server before render. componentDidMount - Invoked after the first render. React Addons: Collection of modules that aid in developing React.js applications Animation Addons 2 Way Data Binding Addons - React Link Testing Addons Learning React.js [2] - Your First Component https://www.youtube.com/watch?v=mDz4HXZHo9g&index=3&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO React网址: https://facebook.github.io/react/docs/getting-started.html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://fb.me/react-0.14.7.js"></script> <script src="https://fb.me/react-dom-0.14.7.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script> <script type="text/babel"> ... </script> Learning React.js [3] - Adding Properties https://www.youtube.com/watch?v=euSbXxCf88I&index=2&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO propTypes:{ title:React.PropTypes.string.isRequired }, getDefaultProps: function(){ return { title: "111", text: "222", link:"333" } } Learning React.js [4] - Events https://www.youtube.com/watch?v=CVigtRUxj2I&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO&index=4 <a onClick={this.OnClick.bind(this, 'Hello','Goodbye')}> //带参数的function onClick: function(msg,msg2){ alert(msg2); //弹出Goodbye } Learning React.js [5] - State and Nesting Components https://www.youtube.com/watch?v=_o9NTYfbkR0&index=6&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO getInitialState: function(){ return { text: 'Hello World' } } <h1>{this.state.text}</h1> <input type="text" onChange={this.changeText} value={this.state.text} /> changeText: function(e){ this.setState({text: e.target.value}); //setState, e.target.value } Learning React.js [6] - Mapping Data https://www.youtube.com/watch?v=499IaPWLHKU&index=5&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO React中的循环: <ul className="list-group"> { this.props.todos.map(todo => { return <li className="list-group-item" todo={todo} key={todo.id}>{todo.name}</li> }) } <ul> Learning React.js [7] - Adding State Data Through a Form https://www.youtube.com/watch?v=yOu_PUAOtP0&index=7&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO App component: <TodoForm onTodoAdd={this.handleTodoAdd} /> handleTodoAdd: function(text){ var newTodo={ id: this.state.todos.length + 1, text: text } this.setState({todos: this.state.todos.concat(newTodo)}); //concat向数组里面添加对象 } TodoForm component: <form onSubmit={this.onSubmit}> <input type="text" ref="text" onChange={this.onChange} className="form-control" /> //ref="text" </form> onSubmit:function(e){ //e参数, refs e.preventDefault(); var text = this.refs.text.value.trim(); if(!text){ alert('Please enter a todo'); return; } this.props.onTodoAdd(text); //调用传过来的props方法onTodoAdd() this.refs.text.value=''; } Learning React.js [8] - Deleting State Data https://www.youtube.com/watch?v=AUso8hw2-JQ&index=8&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO <TodoList todos={this.state.todos} deleteTodo={this.handleTodoDelete} /> //这里的handleTodoDelete不用指定参数 handleTodoDelete: function(todo){ var todos = this.state.todos; for(var i=0;i<todos.length;i++){ if(todos[i].id==todo.id){ todos.splice(i,1); } } this.setState({todos: todos}); } <a onClick={this.onDelete.bind(this,todo)} > onDelete(todo){ this.props.deleteTodo(todo); } Learning React.js [9] - Updating State Data https://www.youtube.com/watch?v=WI8Z1RKzhMM&index=9&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO <TodoForm {...this.state} onTodoAdd={this.handleTodoAdd} /> //{...this.state}会把整个state传到控件TodoForm中,TodoForm控件中用{this.props.text}来获得state中的值. <TodoList //todos={this.state.todos} {...this.state} //{...this.state}会把整个state传到该控件中 editTodo={this.handleTodoEdit} /> handleTodoEdit: function(todo){ this.setState({text:todo.text, isEdit: todo.id}); } <span onClick={this.editTodo.bind(this,todo)}> editTodo: function(todo){ this.props.editTodo(todo); } <TodoForm {...this.state} changeText={this.handleChangeText} onTodoUpdate={this.handleTodoUpdate} /> handleChangeText: function(text){ this.setState({text: text}); } handleTodoUpdate: function(todo){ var todos = this.state.todos; for(var i=0;i<todos.length;i++){ if(todos[i].id==todo.id){ todos.splice(i,1); } } todos.push(todo); this.setState({todos: todos}); } TodoForm 组件中: <input type="text" onChange={this.onChange}> onChange: function(e){ this.props.changeText(e.target.value); //input没有onChange方法, 没有this.props.changeText的话input中的值输入会没有变化 } onSubmit方法中: if(this.props.isEdit){ var updateTodo = { id: this.props.isEdit, text:text } this.props.onTodoUpdate(updatedTodo); }else{ this.props.onTodoAdd(text); } Learning React.js [10] Persisting Data To Firebase https://www.youtube.com/watch?v=QY7Ibl37_08&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO&index=10 页面代码中添加: <script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script> componentWillMount: function(){ this.firebaseRef = new Firebase('https://todolistdev1.firebaseio.com/todos'); var that = this; this.firebaseRef.once("value", function(snapshot){ //Get todo list from database var todos = []; snapshot.forEach(function(data){ var todo = { id: data.val().id, text: data.val().text } todos.push(todo); that.setState({todos: todos}); }); }); } Add: this.firebaseRef.push(newTodo); ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- React & Express Starter Pack For Full Stack Development https://www.youtube.com/watch?v=v0t42xBIYIs 项目模版的使用: git clone https://... npm install npm run client-install npm run dev //会同时启动客户端和服务端,因为使用了模块concurrently. localhost:3000打开客户端, localhost:5000/api/customers打开服务端. 创建项目: mkdir reactexpress cd reactexpress npm init npm i express concurrently npm i nodemon --save-dev package.json文件修改: "scripts":{ "start":"node server.js", "server":"nodemon server.js" } touch server.js //创建文件 code server.js //用vs code打开文件 npm run server //启动服务端 打开另外一个命令窗口: npm i -g create-react-app //安装react的cli create-react-app client //创建react项目放在client下 打开client>package.json文件添加节点"proxy":"http://localhost:5000"指定服务端地址. npm start //启动react客户端 npm run dev同时启动客户端和服务端, 修改server端下面的package.json文件: "scripts":{ "client-install":"cd client && npm install", "start":"node server.js", "server":"nodemon server.js", "client":"npm start --prefix client", "dev":"concurrently "npm run server" "npm run client"" } -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- React JS Crash Course https://www.youtube.com/watch?v=A71aqufiNtQ 官网: https://facebook.github.io/rect npm install -g create-react-app create-react-app projectmanager //创建项目命令 npm start React使用的语法叫JSX. 生成GUID的插件: npm install --save uuid npm start import uuid from 'uuid'; uuid.v4(); //生成GUID 安装jquery: npm install jquery --save npm start import $ from 'jquery'; react里面不用name用ref? <input type="text" ref="title"> if(this.refs.title.value === '') child component: this.props.addProject(this.state.newProject); father component: <AddProject addProject={this.handleAddProject.bind(this)} /> handleAddProject(project){ console.log(project); } handleDeleteProject(id){ let projects=this.state.projects; let index=projects.findIndex(x=>x.id===id); //findIndex找到要删除元素的序列号 projects.splice(index,1); this.setState({projects:projects}); } 类型验证: Projects.propTypes={ projects:React.PropTypes.array, onDelete:React.PropTypes.func } setState有返回函数: this.setState({todos:data},function(){ console.log(this.state); }); state在构造函数中初始化, 在componentWillMount中赋值. -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The 2017 React Development Starter Guide https://www.youtube.com/watch?v=7ojad6QYuqI Add Todo: this.state={ todoTitle:'' } this.handleInputChange=this.handleInputChange.bind(this); //放在构造函数里面? handleInputChange(event){ const target = event.target; const target = event.target; const target = event.target; this.setState({ [name]:value }) } handleSubmit(event){ event.preventDefault(); this.props.onAddTodo(this.state); this.setState({ todoTitle:'' }); } <form onSubmit={this.handleSubmit.bind(this)}> <input type="text" id="inputTodoTitle" name="todoTitle" //可以有name value={this.state.todoTitle} //绑定上面的todoTitle onChange={this.handleInputChange} //没有这个方法输入不了 /> 父Component中: handleAddTodo(todo){ this.setState({todos:[...this.state.todos, todo]}) } -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Learn Redux - Introduction To State Management With React https://www.youtube.com/watch?v=SGOFxK-28ns&index=1&list=PL2dKqfImstaSl8Hi6UrovwraEHvK2MNPt Component > Action > Store <> Reducer npm add redux //在react项目中添加redux package 创建src>actions>index.js One Action Example: export const voteReact = () =>{ return { type: 'VOTE_REACT' } } src>reducers>index.js reducer example: const initialState = { angular:0, react:0, vuejs:0 } export default (state = initialState, action) => { switch(action.type){ case 'VOTE_REACT': return Object.assign({},state,{ react:state.react + 1 }) default: return state } } 模版样式:https://bootswatch.com 选择Yeti, 加入public > Index.html 页面样式中. App.js: constructor(props){ super(props); this.store = this.props.store; //props是不是可以理解为parent?表示父控件中有属性store } handleVoteReact = ()=>{ this.store.dispatch(voteReact()); //dispatch reducer } <div style={{'textAlign':'center'}}> //内联样式用双引号 index.js: let store = createStore(myApp); function render(){ ReactDOM.render( <App store={store} />, document.getElementById('root') ); } store.subscribe(render); render(); {this.voteAngularInPercent().toFixed(2) + '%'} //这里的this.voteAngularInPercent()是function -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Using Chart.js With React https://www.youtube.com/watch?v=Ly-9VTXJlnA 使用react-chartjs-2: https://github.com/gor181/react-chartjs-2 npm install -g create-react-app //安装 create-react-app my-app //创建项目 cd my-app npm start npm install react-chartjs-2 chart.js --save 默认属性: static defaultProps={ displayTitle:true, dsiplayLegend:true } 使用: this.props.displayTitle <Chart displayTitle=false /> //这里的属性值会覆盖默认定义的属性值 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Full Stack React & LoopBack [1] - Intro & LoopBack Server https://www.youtube.com/watch?v=Mx-cywTNy8s&list=PLillGF-RfqbZjJBAu0sx_0SCuFdzdx4iY&pbjreload=10 service mongod start //启动mongodb服务 LoopBack - The Node.js API Framework: https://loopback.io/ npm install -g loopback-cli lb //创建项目 node . //启动服务运行app npm install --save loopback-connector-mongodb lb datasource mongoDS --connector mongoDB //会自动创建文件生成代码 lb model 按Enter键然后输入model name Full Stack React & LoopBack [2] - React, Routing and UI https://www.youtube.com/watch?v=idvCKXXFGs4&index=2&list=PLillGF-RfqbZjJBAu0sx_0SCuFdzdx4iY 创建文件夹client_src用于存放React项目, 编译后的文件存放于根目录下的clinet文件夹. 用vs code打开client_src文件夹. create-react-app . //react项目创建于当前目录下 使用指定端口, 修改package.json文件: "start":"set PORT=3001 && react-scripts start" //添加了set PORT=3001 && google搜索react router v4,打开https://reacttraining.com/react-router/, 要使用左侧的<Switch>,<BrowserRouter> npm install --save react-router react-router-dom 创建router: src > components > Main.js, 把Main放在App component中:<Main /> 样式: materializecss.com/ Full Stack React & LoopBack [3] - Fetching & Displaying Meetups https://www.youtube.com/watch?v=R3wiX05SJps&index=3&list=PLillGF-RfqbZjJBAu0sx_0SCuFdzdx4iY npm install axios --save //用于http通信 this.setState({meetups: response.data}, ()=>{ //setState有回调函数 console.log(this.state); }); <Link to={`/meetups/${this.state.item.id}`}> Home </Link> //``符号内的变量${},EX6语法 获取页面地址栏传过来的参数: let meetupId = this.props.match.params.id; Full Stack React & LoopBack [4] - Add, Edit & Delete Meetups https://www.youtube.com/watch?v=yN5qKqLDlpM&list=PLillGF-RfqbZjJBAu0sx_0SCuFdzdx4iY&index=4 <input type="text" name="name" ref="name" /> console.log(this.refs.name.value); this.handleInputChange = this.handleInputChange.bind(this); //放在构造函数里面 handleInputChange(e){ const target = e.target; const value = e.target.value; const name = e.target.name; this.setState({ [name]:value }); } Edit页面: <input type="text" name="name" ref="name" value={this.state.name} onChange={this.handleInputChange}/> //没有onChange的方法就不能修改 Full Stack React & LoopBack [5] - Front & Back End Integration https://www.youtube.com/watch?v=M_PaFaIf6d8&index=5&list=PLillGF-RfqbZjJBAu0sx_0SCuFdzdx4iY 修改react的package.json文件: "build":"react-scripts build && cp -r build/* ../client/" //执行npm run build将编译后的文件放到server端的client文件夹 vs code打开根项目文件夹,修改server > boot > root.js: router.get('/',server.loopback.status()); 改为router.get('/'); middleware.json: "files":{ "loopback#static":{ "params":"$!../client" } } node . //启动项目 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Build & Deploy A React JS Text Generator App https://www.youtube.com/watch?v=yU5DYccb77A 返回text的API: hipsterjesus.com npm install axios --save //axios网址 https://github.com/mzabriskie/axios import axios from 'axios' onChange(e){ this.setState({value: e.target.value}, function(){ //e.target.value this.props.onChange(this.state.value); }) } <br /> //jsx语法中必须要有/,不能是<br> npm run build //编译项目到build文件夹, 里面有个static文件夹 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ReactJS Basics - #2 Setup Workspace with Webpack https://www.youtube.com/watch?v=uextYhQGP6k&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=2 npm init npm install react react-dom --save npm install webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev //webpack-dev-server会自动刷新页面 根目录下创建webpack.config.js git init .gitignore: /node_modules /dist /npm-debug.log git add . git commit -m "initial commit, setup finished" git checkout -b 01-setup //创建分支? react propTypes 说明文档: https://facebook.github.io/react/docs/reusable-components.html Component内部属性: <Home> <p>This is a paragraph!</p> </Home> {this.props.children} Home.propTypes = { children: React.PropTypes.element.isRequired } <button onClick={() => this.onMakeOlder()} > //事件的这种写法不需要绑定this ReactJS Basics - #10 Stateless Components https://www.youtube.com/watch?v=SEkfzqIgvTo&index=11&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS export const Header = (props) => { return ( <p>{props.homeLink}</p> ) } console.log("123",nextProps,nextState) //console.log跟Python里面的Print方法类似 ReactJS Basics - #15 React Router - Route Setup https://www.youtube.com/watch?v=eofpZPRUnP8&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=16 npm install --save react-router import {Router,Route,browserHistory,IndexRoute} from "react-router"; render(){ return ( <Router history={browserHistory}> <Route path={"/"} component={Root}> <IndexRoute component={Home} /> <Route path={"user/:id"} component={User} /> <Route path={"home"} component={Home} /> </Route> <Route path={"home-single"} component={Home} /> </Router> ); } package.json: "build"最后追加 --history-api-fallback ReactJS Basics - #16 React Router - Navigation & Parameters https://www.youtube.com/watch?v=5pt_igBTCsI&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=17 方法一: import {Link} from "react-router"; <Link to={"/home"} activeStyle={{color:"red"}}>Home</Link> <Link to={"/user/10"} activeClassName={"active"}>User</Link> 方法二: import {browserHistory} from "react-router"; onNavigateHome(){ browserHistory.push("/home"); } <button onClick={this.onNavigateHome}>Go Home</button> 带参数: {this.props.params.id} React Router文档: https://github.com/reactjs/react-router-tutorial/tree/master/lessons -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ReactJS / Redux Tutorial - #3 Using Redux https://www.youtube.com/watch?v=ZKCYqJu4n3s&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=3 Start the Webpack Dev Server with npm run build and then visit http://localhost:8080 npm install redux --save import {createStore} from "redux"; const reducer = (state,action) => { switch(action.type){ case "ADD": state = state + action.payload; break; case "SUBTRACT": break; } return state; }; const store = createStore(reducer,1); //第二个参数1是初始的state store.subscribe(()=>{ console.log("Store updated!", store.getState()); }); store.dispatch({ type: "ADD", payload: 10 }); ReactJS / Redux Tutorial - #4 Working with State and Immutability https://www.youtube.com/watch?v=7bMTJxvEJiE&index=4&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ const initialState = { result:1, lastValues:[] } const reducer = (state = initialState,action) => { switch(action.type){ case "ADD": //state.result += action.payload; state={ ...state, //获得old state result: state.result + action.payload, //覆盖原result lastValues: [...state.lastValues, action.payload] //数组里面用... } break; case "SUBTRACT": break; } return state; }; ReactJS / Redux Tutorial - #5 Multiple Reducers https://www.youtube.com/watch?v=BVvBa18o8Es&index=5&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ import {createStore, combineReducers} from "redux"; const store = createStore(combineReducers({mathReducer, userReducer})); //createStore不能直接传递多个reducer参数,所以使用combineReducers ReactJS / Redux Tutorial - #6 Redux Middleware https://www.youtube.com/watch?v=AgO7YcJeBh4&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_&index=6 import {createStore, combineReducers, applyMiddleware} from "redux"; //applyMiddleware const myLogger = (store) => (next) => (action) => { console.log("Logged Action: ", action); next(action); } const store = createStore(combineReducers({mathReducer, userReducer}),{}, applyMiddleware(myLogger)); 实用的Middleware: npm install redux-logger --save import logger from "redux-logger"; const store = createStore(combineReducers({mathReducer, userReducer}),{}, applyMiddleware(logger())); ReactJS / Redux Tutorial - #7 Connect ReactJS and Redux https://www.youtube.com/watch?v=tfuZ7uZmVyg&index=7&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ npm install react-redux --save import {Provider} from "react-redux"; index.js: import App from "./components/App"; //如果是default component这不需要{}, 例如这里是App而不是{App} render( <Provider store={store} <App/> </Provider>, window.document.getElementById('app'); ); App.js: import {connect} from "react-redux"; <Main changeUsername={()=>this.props.setName("Anna")}/> <User username={this.props.user.name} /> const mapStateToProps = (state) => { return { user: state.user, //key是属性, 这里的user是属性 math: state.math } } const mapDispatchToProps = (dispatch) => { return { setName:(name)=>{ dispatch({ type:"SET_NAME", payload:name }); } } } export default connect(mapStateToProps, mapDispatchToProps)(App); //connect this component to store ReactJS / Redux Tutorial - #8 Containers & Components (Smart & Dumb Components) https://www.youtube.com/watch?v=m2q3Dyr6To4&index=8&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ Smart Component: know state. 放在Containers文件夹下 Dumb Component: unknow state. 放在Components文件夹下. 使用export const Main = (props) =>{} ReactJS / Redux Tutorial - #9 A better Project Structure https://www.youtube.com/watch?v=YmGm-qwbJdc&index=9&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ app文件夹下创建reducers,actions文件夹,创建store.js文件. ReactJS / Redux Tutorial - #10 Async Actions https://www.youtube.com/watch?v=h892pHdLQtM&index=10&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_ npm install redux-thunk --save //解决错误Actions must be plain objects. Use custom middleware for async actions. store.js: import thunk from "redux-thunk"; applyMiddleware(thunk) userActions.js: return { type:"SET_NAME", payload: new Promise((resolve, reject) => { setTimeout(()=>{ resolve(name); },2000); }); } npm install redux-promise-middleware --save store.js: import promise from "redux-promise-middleware"; applyMiddleware(promise()) userReducer修改action name to SET_NAME_FULFILLED //添加后缀_FULFILLED, 使用promise()的时候需要添加. React | Redux 使用文档: redux.js.org/docs/basics/UsageWithReact.html -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ReactJS从入门到实战 11 11 表单元素 https://www.youtube.com/watch?v=hJxRcG1APbQ&t=653s&index=5&list=WL var styles={ //styles是对象,定义在组件外面 inputText:{ 100, fontSize:24 //这里是fontSize而不是font-size } } getInitialState:function(){ return{ input:'default' } }, handleTextChange: function(evt){ this.setState({'input': evt.target.value}); } <input type='text' style={styles.inputText} value={this.state.input} onChange={this.handleTextChange} defaultValue={this.state.input}/> <textarea style={styles.inputText} onChange={this.handleTextChange} defaultValue={this.state.input} /> ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- Redux Crash Course With React https://www.youtube.com/watch?v=93p3LxR9xfM VS Code插件： ES7 React/Redux/GraphQL/React-Native snippets npm start //启动react dev server,打开localhost:3000 react component code snippet: 'rcc'. 'rfc' code snippet for function. 页面上有多个输入框： <input type="text" name="title" onChange={this.onChange} value={this.state.title}/> constructor中： this.onChange = this.onChange.bind(this); constructor外render外： onChange(e){ this.setState({[e.target.name]: e.target.value}); } Add Post: //新增 <form onSubmit={this.OnSubmit.bind(this)}> OnSubmit(e){ e.preventDefault(); const post={ title:this.state.title, body:this.state.body } fetch('https://jsonplaceholder.typicode.com/posts',{ method:'POST', headers:{ 'content-type':'application/json' }, body:JSON.stringify(post) }) .then(res=>res.json()) .then(data=>console.log(data)); } 安装Redux相关插件: npm i redux react-redux redux-thunk App.js导入Provider 和 store: import {Provider} from 'react-redux'; import store from './store'; //创建单独的store.js文件 内容包裹在<Provider>里面: render(){ return( <Provider store={store}> ... </Provider> ); } 错误'react-scripts' is not recognized as an internal or external command. 解决方案:npm install redux官方文档地址: https://github.com/reactjs/redux/tree/master/docs/api store.js: import {createStore,applyMiddleware} from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; ... 创建rootReducer, reducers/index.js: import {combineReducers} from 'redux'; import postReducer from './postReducer'; export default combineReducers({ posts: postReducer }); export function fetchPosts(){ return function(dispatch){ ... } } 简化后的写法是: export const fetchPosts=()=>dispatch=>{...} 组件Posts.js中: import {connect} from 'react-redux'; //connect the store to the component componentWillMount(){ this.props.fetchPosts(); //props下的action } const mapStateToProps = state => ({ posts: state.posts.items //使用的时候用this.props.posts }); export default connect(mapStateToProps,{fetchPosts})(Posts); //如果没有mapStateToProps,则为null import PropTypes from 'prop-types'; Posts.propTypes={ fetchPosts:PropTypes.func.isRequired, posts:PropTypes.array.isRequired } 谷歌Redux插件: Google搜索chrome extension redux 点击 Redux DevTools - Chrome Web Store 要使用以上插件,修改store.js: import {createStore, applyMiddleware, compose} from 'redux'; const store = createStore( rootReducer, initialState, compose( applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__() ) ); Redux里面的state是application级别的,不是某个Component的state. dispatch里面包括type和payload(要传递的值). componentWillReceiveProps(nextProps){ //when it receives property from state if(nextProps.newPost){ this.props.posts.unshift(nextProps.newPost); //push会添加到数组的最后一位,unshift添加到数组的最前面 } } ----------------------------------------------------------------------------------------------------------------------------------------------------------------------