學react

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。
Post Reply
ejsoon
Site Admin
Posts: 3526
Joined: 2016 Jan 10, 22:15

學react

Post by ejsoon » 2018 May 03, 14:15

易懂的官方教程:
https://reactjs.org/docs/components-and-props.html

阮一鋒-react技術棧:
http://www.ruanyifeng.com/blog/2016/09/ ... stack.html

慕課網免費視頻教程:
https://www.imooc.com/learn/504

不得不喜歡的網站:
http://madewithreact.com/

這裡也有不少好教程:
https://tutorialzine.com/2015/04/first-webapp-react

後兩個用global.bing搜「using react to make a website」得

ejsoon
Site Admin
Posts: 3526
Joined: 2016 Jan 10, 22:15

慕課網老教程

Post by ejsoon » 2018 May 05, 12:29

慕課網的React.createClass已被以下替代
class TestClick extends React.Component{

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

			class TestInput extends React.Component{
				constructor(props) {
					super(props);
					this.nod = React.createRef();
				}
				hhClk(ddd) {
					var nood = this.nod.current;
					nood.innerHTML = ddd.target.value;
				}
				render(){
					return (
						<div><input onChange={this.hhClk.bind(this)} />
						<span ref={this.nod}>haha</span>
						</div>
					)
				}
			}
			class TestCooking extends React.Component{
				render(){
					return (
						<div>
							<TestClick></TestClick>
							<TestInput></TestInput>
						</div>
					)
				}
			}
			class TestClick extends React.Component{
				constructor(props) {
					super(props);
					this.nod = React.createRef();
				}
				hhClk() {
					var nood = this.nod.current;
					if (nood.style.display === 'none') {
						nood.style.display = 'inline';
					} else {
						nood.style.display = 'none';
					}
				}
				render(){
					return (
						<div><button onClick={this.hhClk.bind(this)}>顯示/隱藏
						<span ref={this.nod}>haha</span>
						</button></div>
					)
				}
			}
      ReactDOM.render(
        <TestCooking/>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

ejsoon
Site Admin
Posts: 3526
Joined: 2016 Jan 10, 22:15

react 官網教程筆記

Post by ejsoon » 2018 May 09, 16:35

變量要放在構造器中:
constructor(props) {
super(props);
this.state = {daaa: new Date()};
}
改變量要用:
this.setState({
daaa: new Date()
});
用變量去改變量要這樣:
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
以上三個來自《State and Lifecycle》

20180509讀到Handling Events

this放在bind的第一個,bind不用傳event,但在類的方法定義中要作爲最後一個參數:

Code: Select all

				nu(sss, e) {
					e.preventDefault();
					console.log(sss);
				}
				render() {
					return (
						<form action={'##'}>
							<input type={"submit"} onClick={this.nu.bind(this, 'iee')} />
						</form>
					);
				}
https://reactjs.org/docs/lists-and-keys.html

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
  </head>
  <body>
    <div id="raat"></div>
    <script type="text/babel">
			//raat
			class Clack extends React.Component{
				constructor(props) {
					super(props);
					this.state= {
						aLiii : props.wali,
						auLiii : null
					}

				}
				componentDidMount() {
					// this.setState()
					this.setState((prevState, props) => ({
						auLiii: props.wali.map((number, huhukey) =>
							<li key={huhukey}>
								{number}
							</li>
						)
					}));
				}
				/*
				*/
				render() {
					return (
						<div>
							{this.state.aLiii}
							<hr />
							{this.state.auLiii}
						</div>
					);
				}
			}

			const tstLi = [4231, 241332, 2134, 4231];

			ReactDOM.render(
				<Clack wali={tstLi} />,
				document.getElementById('raat')
			);
		</script>
  </body>
</html>


ejsoon
Site Admin
Posts: 3526
Joined: 2016 Jan 10, 22:15

Re: 學react

Post by ejsoon » 2018 May 11, 10:14

Hello World
Introducing JSX
Rendering Elements
Components and Props
State and Lifecycle
Handling Events
Conditional Rendering
Lists and Keys
Forms
Lifting State Up
Composition vs Inheritance
Thinking In React

ejsoon
Site Admin
Posts: 3526
Joined: 2016 Jan 10, 22:15

webpack

Post by ejsoon » 2018 May 14, 15:06

這裡解釋如何使用yeoman和webpack搭建一個react項目。

ejsoon
Site Admin
Posts: 3526
Joined: 2016 Jan 10, 22:15

由function轉class這樣弄

Post by ejsoon » 2018 May 16, 15:15

function Cluck(props) {
if (props.celsius >= 100) {
return <p>{props.celsius}The water would boil.</p>;
}
return <p>{props.celsius}The water would not boil.</p>;
}

//由function轉class這樣弄
class Clack extends React.Component{
render() {
const celsius = this.props.celsius;
if (celsius >= 100) {
return <p>{celsius}The water would boil.</p>;
}
return <p>{celsius}The water would not boil.</p>;
}
}

ejsoon
Site Admin
Posts: 3526
Joined: 2016 Jan 10, 22:15

複製一個數組用slice()

Post by ejsoon » 2018 May 18, 17:16

We call .slice() to copy the squares array instead of mutating the existing array.

或者:

var newPlayer = Object.assign({}, player, {score: 2});

Post Reply