[React实战]使用create-react-app创建单页面应用

1. npm i -g create-react-app

全局安装create-react-app

2. create-react-app my-project

在任意目录下执行命令创建my-project应用

3. 常用命令

npm start

Starts the development server.

npm run build

Bundles the app into static files for production.

npm test

Starts the test runner.

npm run eject

Removes the tool and copies build dependencies, configuration files and scripts inot the app directory. if you do this, you can't go back!!

 

npm start启动应用，打开localhost:3000

入口页面是index.html，入口文件是index.js

index.html这个入口文件里面只包含一个根DOM节点

index.js很简单，就是将App这样一个React元素渲染到root这个根DOM元素节点上

ReactDOM.render(<App>, document.getElementById("root"));

 

App.js是一个React组件

class App extends Component {
    render () {
        return (
            <div class="App-header">
                <img src={logo}>
                <h2>Welcome to React</h2>
            </div>
        )
    }
}

 

JSX是什么？

JSX是一种标签语法，在标签语法中嵌入JS表达式需要使用花括号

JSX指定属性, 对字符串值使用引号，对表达式使用花括号

HTML原始属性在JSX中需要更换名字，class ==> className  tabindex ==> tabIndex

JSX 可以用React.createElement()代替

Each child in an array or iterator should have a unique "key" prop.

 

渲染元素

React元素是React应用程序中最小的构建块，ReactDOM负责更新DOM

React元素是不可变的(immutable)

Only Update What's Necessary.

 

组件和特性Components and Props

组件就是将UI拆分成独立的可重复使用的那部分

有一类组件称为功能

 

 

Redux基本使用

1. 需要用createStore方法创建一个store，用来存储应用的所有状态。可以理解为一个仓库。

2. store具有一系列操作，比如 dispatch分配一个同步任务(action)或者理解为执行某种行为

3. reducer 处理所有任务或行为的操作，一般用来处理应用store中的所有状态state，目的就是要改变状态，重新渲染react组件

4. store.subscribe方法是用来监听应用状态变化的，也就是订阅状态变化的事件。一旦state发生变化就会被监听器捕获到，从而重新渲染react组件

redux-thunk是用来处理异步action的，通过redux的中间件机制从而使得store能够分配一个异步任务

react-redux是用来连接react与redux的中间件