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:{
width: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添加到数组的最前面
}
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
