First of all, before learning this framework, you need to have some understanding of the following knowledge:
1. Native JS basics
2. CSS basics
3.npm package management basics
4. Webpack build project basics
5.ES6 specifications
The above five knowledge points are also pre-tasks that must be understood in learning other front-end frameworks.
I won’t say much about JS and CSS. npm is the most advocated and dominant package management tool at present. You can consider it if you are still using bower or other tools. As a new generation of packaging tools, webpack has already dominated the front-end packaging tools and has a great advantage compared to Browserify. As for the ES6 specification, although mainstream browsers are not compatible now, they can be converted using converters such as babel.
Combining some other mainstream front-end frameworks, I personally believe that there are three basic things to build single-page applications: components, routing, and state management . Then I will introduce React based on these three, of course there will be some additional knowledge points interspersed there.
Components
React's component writing and calling mainly depends on ES6's modularity and JSX syntax. Here is an example:
// main.jsimport React from 'react'import { render } from 'react-dom'import MyComponent from './component.js'import './main.css'// main component class MyDemo extends React.Component { render() { return ( <div className="box"> <MyComponent /> </div> ) }}render(( <MyDemo />), document.getElementById('app'))// component.js// subcomponent import React from 'react'export default class MyComponent extends React.Component { render() { return ( <div> <p>This is a component!</p> </div> ) }}// main.css.box { width: 100%}Compared with the Vue.js framework, I personally think that the way React components is written is not as comfortable as Vue, and the component's css style is still separated from the outside of the component, so it is not very convenient to maintain.
From this example, we can see the features of React's virtual DOM and JSX. Compared with other frameworks, React's virtual DOM can not only improve the performance of the page, but also prevent XSS attacks, etc. The specific principles of virtual DOM are not introduced here
As for JSX syntax, it is a kind of syntax sugar of JS. We can easily implement some functions through this syntax sugar. Here, JSX converts the syntax of XML into pure JavaScript, and XML elements, attributes and child nodes are converted into parameters of React.createElement. Similar JS syntax sugars include TypeScript and other types.
routing
The front-end routing mechanism is one of the most important links in building single-page applications (SPAs). Through front-end routing, we can optimize the user experience without getting all data from the server every time, so as to quickly present the page to the user.
React routing depends on React Router . React Router keeps the UI and URL synced. It has simple APIs and powerful features such as code buffering loading, dynamic routing matching, and establishing the correct location transition.
Here is an example of React routing:
import React, { Component } from 'react'import { render } from 'react-dom'import { Router, Route, IndexRoute, Link, browserHistory } from 'react-router'const ACTIVE = { color: 'red' }class App extends Component { render() { return ( <div> <h1>My Router</h1> <ul> <li><Link to="/" activeStyle={ACTIVE}>Home</Link></li> <li><Link to="/users" activeStyle={ACTIVE}>User Page</Link></li> </ul> {this.props.children} </div> ) }}class Index extends React.Component { render() { return ( <div> <h2>Index!</h2> </div> ) }}class Users extends React.Component { render() { return ( <div> <h2>Users</h2> </div> ) }}reender(( <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="users" component={Users}></Route> </Route> </Router>), document.getElementById('app'))Only one routing method for React is listed here. Compared with other frameworks, the syntax of React routing is more easy to understand.
Status Management
State management is not a necessary one-page application. Using it can help us manage changes in each state in a unified manner, making the entire project process clear and maintainable. React implementation state management can use the officially recommended Redux.
Redux uses strict one-way data flow. The entire application state is stored in an object tree, and this object tree exists only in the only store.
Project Example
Here I wrote a single page website using React, and the page is as follows:
Fetch
Because I used Fetch for Ajax interaction in the above example, I will briefly introduce Fetch here.
We can use Fetch as the next generation of Ajax technology, which uses the current popular Promise method.
Using Fetch we can write Ajax to interact with data like this:
// Get data method fetchFn = () => { fetch('../../data.json') .then((res) => { console.log(res.status);return res.json() }) .then((data) => { this.setState({lists:data.listData}) }) .catch((e) => { console.log(e.message) }) }Summarize
The most important thing about learning a framework is not learning its technology, but learning the problem-solving ideas it brings. Through learning the framework of React, you can discover a new mindset from its unique new features. Only when the thinking level is expanded can you fly freely in the ocean at the front end. I hope this article will be helpful to everyone to learn React.