React
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
React 开发环境的搭建
首先安装nodejs , 这在之前使用vue 的时候已经安装了,所以就略过。进入React 官网,docs 页面。如下。右面有一个 “create a new react app”然后呢,可以看到这个,如下。这是react 的脚手架工具。按照官方指示。先在终端进入一个目录,比如桌面吧。然后,执行命令 npx create-react-app todolist当出现下...原创 2018-12-22 12:04:20 · 112 阅读 · 0 评论 -
react 项目代码
打开我们刚刚新建的react 项目 todolist, 下面是它的目录结构。src 下的index.js 是整个项目的入口文件。可以看到index.js 中引入了serviceWorker 它是一个PWA,离线页面的内容。我们暂且可以先不用它。删掉那两行。然后,这个文件引入了index.css 也可以删掉。然后呢,src 下,有一个文件App.test.js 这个是,我们使用j...原创 2018-12-22 12:37:09 · 687 阅读 · 0 评论 -
简单的JSX 语法
在 React 中,直接使用各种标签的代码语法,叫做JSX 语法。比如下面class App extends Component { render() { return ( <div> hello world </div> ); }}比如下面ReactDOM.render(<App ...原创 2018-12-22 20:01:38 · 174 阅读 · 1 评论 -
初级案例 todolist
新手上路,用React 做一个 todolist 功能。之前我们已经新建了一个react 项目,名叫todolist 。我们先把入口文件,修改一下,把App 改成 todolist ,如下。import React from 'react';import ReactDOM from 'react-dom';import TodoList from './TodoList';R...原创 2018-12-23 09:17:58 · 487 阅读 · 0 评论 -
将todolist 进行组件拆分
我们将list 拆分为一个子组件。在src 下新建一个文件 TodoItem.js 。初始化一下,如下。import React, { Component} from 'react'class TodoItem extends Component { render() { return ( <div>todo item</div>...原创 2018-12-23 14:26:01 · 318 阅读 · 0 评论 -
todolist 代码优化
在之前我们todolist 的代码中,我们使用了很多xxx.bind(this) 这种绑定this 的代码那么,我们可以做一个优化。将bing 放置到class 的constructor 中来。比如TodoList.js,如下。import React, { Component} from 'react';import TodoItem from './TodoItem'...原创 2018-12-23 14:56:22 · 343 阅读 · 0 评论 -
React 项目中使用CSS样式 以及 React.Fragment
jsx 中给元素CSS样式。首先,介绍一种优先级最高的行内样式。如下。<button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>style 最外层括号表示是js 表达式,内层括号表示是一个对象。 然后呢,是class 形式的样...原创 2018-12-23 15:33:13 · 1338 阅读 · 0 评论