Initialization

Basic Router in React

  • BrowserRouter: uses the HTML5 History API to keep your UI in sync with the URL
  • Route: renders some UI if the current location matches the route’s path
  • Link: navigate between pages. It’s comparable to the HTML anchor element. However, using anchor links would result in a full page refresh, which we don’t want. So instead, we can use to navigate to a particular URL and have the view re-rendered without a refresh.
  1. import { BrowserRouter as Router, Route } from 'react-router-dom';
  3. const App = () => (
  4.     <Router>
  5.               #using exact prop to make the path exact match
  6.         <Route path='/' exact component={Join} />
  7.         <Route path='/room' component={Room} />
  8.         <Route path='/chat' component={Chat} />
  9.     </Router>
  10. );

How the React JSX is Compiled?

Although JSX looks like HTML, we are actually dealing with a way to write JavaScript. Under the hood, JSX returned by React components is compiled into JavaScript.

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  4. const App = () => {
  5.   const now = new Date()
  6.   const a = 10
  7.   const b = 20
  8.   return React.createElement(
  9.     'div',
  10.     null,
  11.     React.createElement(
  12.       'p', null, 'Hello world, it is ', now.toString()
  13.     ),
  14.     React.createElement(
  15.       'p', null, a, ' plus ', b, ' is ', a + b
  16.     )
  17.   )
  18. }
  20. ReactDOM.render(
  21.   React.createElement(App, null), document.getElementById('root'))

React Map

  • Creates a new array populated with the results of calling a provided function on every element in the calling array.
    • Mapping an array of numbers to an array of square roots, e.g., Square Root Value
    • Using map to reformat objects in an array
    • Mapping an array of numbers using a function containing an argument ```javascript const array1 = [1, 4, 9, 16];

// pass a function to map const map1 = array1.map(x => x * 2);

console.log(map1); // expected output: Array [2, 8, 18, 32]

  1. <a name="WXYj3"></a>
  2. ## React Reduce
  4. - **Sum all values of an array**
  5. - **Sum of values in an object array**
  6. - **Flatten an array of arrays**
  7. ```javascript
  8. let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  9.   return accumulator + currentValue
  10. }, 10)
  11. // sum = 10 + 0 + 1 + 2 + 3;

Important Points

  1. 注意⚠️：npm中的React包可能存在相互依赖的情况，容易导致invalid hook call