ReactDom.render(<Login />, document.getElementById('root')); // render current component export defaultLogin; // always add this to the end of the file if it is not in the same folder as index.js
3. JSX with HTML
With JSX, we could return HTML element directly.
1 2 3 4 5
render() { return ( <p>example</p>//only one element ); }
It actually tranforms the following format.
React.createElement('p', {classname: 'Login'})
4. Emmet Settings
Emmet is an extension that can help us write HTML component fast. We can edit its settings in preferences->settings->Extensions-> Emmet.
Enable trigger on tab first. Then add javascript as a new key and javascriptreact as a value accordingly in the included languages. In this way, it would help us fill the html element we want to return once you press tab.
Also, shortcut for prettier is option + shift + f on Mac.
While for windows, it is alt + shift + f.
5. Return the element we want
We can only return one element each time with JSX. And we need to add a bracket when we use render() { return (<p>abc</p>); } like this.
If we want to return multiple elements, we can use React.Fragment.
1 2 3 4 5 6 7 8 9 10
render() { return ( const a = 'JS code here'; <React.Fragment> {a} {/* This would show 'JS code here' */} <p>abc</p> <p>ttt</p> </React.Fragment> ); }
In JSX, comment is like {/* comment */}and JS code should be like {js code}.
6. Use Bulma template to beautify our component
Bulma is light-weighted and 100%responsive.
We can copy the login template there. Docs->Forms->general
In some built-in functions like render() in React, we can use this to get the attributes we want directly. But in our self-defined functions, we need to bind this to get the object we want.
bind(this) with onClick
<a href="/login" className="button" onClick={this.handleClick.bind(this)}> click this </a>
Or use arrow function, 但是容易导致子组件重新渲染
with constructor
use arrow function to bind directly
pass parameters
14. Deal with form data
first create ref, and then bind in input, get value by current.value
We only need to update state to update the whle page.
constructor() should add super() in it. super(props) refers to the parent class constructor. Link text Here
Because constructors of all components extending React.Component will need super() to be initialized. We use this.propsto pass data among parent component and children components. props is a parameter that is used by parent component to pass data to children components.
16. Controlled Component and Uncontrolled Component
uncontrolled component: can only read the state
controlled component: can change the state of the component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
state = { email : '', password : '' };
handleChange = e => { console.log(e.target.value); // get the value console.log(e.target.name); // can deal with two names this.setState({ [e.target.name]: e.target.value.toUpperCase() }); };
<inputvalue={this.state.email}onChange={this.handleChange}name="email" />// the name of input should be the same as the state <inputvalue={this.state.password}onChange={this.handleChange}name="password" />// the name of input should be the same as the state
Through this, we can get the form data (email and password).
17. Component Layout
divide the page into two parts, toolbox and products.