React & Redux

react_redux.md

Source: 1.Freecodecamp https://learn.freecodecamp.org/front-end-libraries/react 2.Scrimba https://scrimba.com/g/glearnreact 3.

Intro REACT

• open-source JavaScript library for building user interfaces (UI)

• create components, handle state and props, utilize event listeners and certain life cycle methods to update data as it changes.

• React combines HTML with JavaScript functionality to create its own markup language, JSX

• Virtual DOM
  ReactDOM.render(JSX, document.getElementById('root')).
  This function call is what places your JSX into React's own lightweight representation of the DOM.
  React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.

1. JSX JAVASCRIP EXTENSION

-allows you to write HTML directly within JavaScript

• there are a few key differences from html markup
• JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process.

1. return must be in single element -> have to wrap in
   jsx
2. instance of jsx & comment in jsx

const JSX = (

/* this is a comment in JSX */
  <div>
    <h1>This is a block of JSX</h1>
    <p>Here's a subtitle</p>
  </div>
);

class in HTML > className in JSX (class is a reserved words in JS)
JSX use camelCase.
Any JSX element can be written with a self-closing tag, and every element must be closed.

3. Render HTML Elements to the DOM

4. Create components
   There are two ways to create a React component.

• javascript function. Defining a component in this way creates a stateless functional component. Function name must be Cappital letter

const MyComponent = function() {
return (<div>
<p>string of text</p>
</div>)
}

• The other way to define a React component is with the ES6 class syntax.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
 
    return(
      <div>
       <h1>Hello React!</h1>
      </div>);

  }
};

4. Nesting components

can use to nest inside

5. Pass Props to a Stateless Functional Component

<App>
  <Welcome user='Mark' />
</App>

lúc này các properties của component này sẽ được lưu trong 1 object có tên props
=> props = {user: 'Mark}

sử dụng props trong JSX , treated as JS cod=> eg.

my name is {props.user}

Tạo default prop
ComponentName.defaultProps = { property : 'value'}

React project
recipe box

1. thiết lập môi trường với
   npx create-react-app recipe box

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
https://reactjs.org/docs/create-a-new-react-app.html

SCRIMBA

class syntax to create a component

import React from "react"

// function App(props) {
//     return (
//         <div>
//             <h1>{props.whatever}</h1>
//         </div>
//     )
// }

class App extends React.Component {
    
    yourMethodHere() {
        
    }
    
    render() {
        return (
            <div>
                <h1>{this.props.whatever}</h1>
            </div>
        )
    }
}

export default App
```