1、React项目架构搭建

2、JSX语法

3、React组件化开发

4、React组件间通信

5、React中的事件

6、React代码优化

7、React中组件的样式修饰

React简介及基础语法

https://reactjs.org/

create react app

npx create-react-app my-app

cd my-app

npm start
npx create-react-app todolist

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。

无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。

简单组件

React 组件使用一个名为 render() 的方法,接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。

可以通过npm手动升级到最新版解决

npm i -g npx

npx create-react-app todolist

npm start

C:\Users\Jack\AppData\Roaming\npm\node_modules

点击next 具体安装方法和之前第一次安装一样

npm报错npm ERR! A complete log of this run can be found in: npm ERR!

全局更新 npm

npm i npm -g 就ok了

create-react-app创建项目的时候报错 npm install --save --save-exact --loglevel error react react-dom react-scr

解决方法
npm config set registry https://registry.npm.taobao.org
//检验是否成功
npm config get registry
1
2
3
//然后再重新执行create-react-app
create-react-app my-app
E:\react>npx create-react-app my-react

Creating a new React app in E:\react\my-react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts... npm ERR! Unexpected end of JSON input while parsing near '...,"dist":{"integrity":' npm ERR! A complete log of this run can be found in:
npm ERR! D:\path\nodejs\node_cach Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts has failed. Deleting generated file... package.json
Deleting my-react/ from E:\react
Done.
npm config set registry http://registry.cnpmjs.org
然后重新 create 项目 create-react-app my-app
...
Happy hacking!
//完成了...
之前用的淘宝代理 npm config set registry https://registry.npm.taobao.org

npm config set registry http://registry.cnpmjs.org

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

function App() {
return (
<div className="App">
hello world
</div>
);
} export default App;

什么是组件:

JSX语法:


请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

(1)React的开发的更多相关文章

  1. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  2. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  3. React阶段开发总结

    这次独立编写了React页面主要是数据切换.点击不同的按钮,Ajax请求不同的后台数据.数据驱动表格内容的显示.使用React组件开发. 开发中获得下面的心得: 1.后台给的地址早一点添加路由(写好数 ...

  4. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

  5. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  6. DECO 一个REACT NAtive 开发IDE工具

    DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...

  7. React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

    Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...

  8. React Native 开发笔记

    ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...

  9. [转载]Sublime Text 3 搭建 React.js 开发环境

    [转载]Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...

  10. Webpack+React配合开发

    前面两篇关于webpack的基础和进阶,请先务必阅读之前的文章. Webpack教程一 Webpack教程二 什么是React React是一个由Facebook开发的library,它的口号是“A ...

随机推荐

  1. Helm命令帮助参数

    # helm help The Kubernetes package manager To begin working with Helm, run the 'helm init' command: ...

  2. RequestBody只能读取一次的问题

    一.为什么只能读一次 原因很简单:因为是流.想想看,java中的流也是只能读一次,因为读完之后,position就到末尾了. 二.解决办法 思路:第一次读的时候,把流数据暂存起来.后面需要的时候,直接 ...

  3. Ubuntu 18.04 上使用xrdp远程桌面连接(Windows远程桌面连接)

    Ubuntu18.04设置#安装xrdpsudo apt-get install xrdp #安装vnc4serversudo apt-get install vnc4server tightvncs ...

  4. String 字符串的==和eqauls区别

    1.对于基本类型来说,==比较的是数据的值,equals方法也是数据的值: 对于引用类型来说,==比较的是引用的地址,equals方法比较的是对象的内容. 2.String是引用类型,用“=”创建字符 ...

  5. Microsoft Visual Studio常用快捷键

    快速补全关键字 1)tab; 删除整行代码 1)Ctrl + L; 回到上一个光标位置/前进到下一个光标位置 1)回到上一个光标位置:使用组合键“Ctrl + -”; 2)前进到下一个光标位置:“Ct ...

  6. flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...

  7. element-ui日期筛选:选择日期即触发查询

    需求:日期范围选择器,当选择好一个日期范围时,立即触发查询功能 <el-date-picker v-model="dateVal" type="daterange& ...

  8. Nginx的proxy buffer参数总结

    1. proxy_buffering 语法:proxy_buffering on|off 默认值:proxy_buffering on 上下文:http,server,location 作用:该指令开 ...

  9. .NET CORE 技术债

    技术债:OCELOT 网关/熔断/降级/限流CONSUL 服务注册/发现CAP 分布式事件总线SKYWALKING 微服务监控

  10. react-router-dom下的BrowserRouter和HashRouter

    奇思妙想的