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. C#代码常用技巧

    1.拼sql语句时,list中元素加单引号并以逗号分开:string.Join(",",list.Select(r=>"'"+r+"'" ...

  2. PowerShell命令批量添加、导出AD用户

    导入单个AD用户命令 New-ADUser -Name "周八" -Surname "周" -GivenName "八"-SamAccoun ...

  3. 利用PHPExcel快速导出excel

    <?php $objPHPExcel = new PHPExcel(); $objSheet = $objPHPExcel->getActiveSheet(); $array = arra ...

  4. Oracle - 实现MySQL的limit功能

    MySQL的limit功能是获取指定行数的数据,Oracle没有这个limit,但是有其它方法. oracle数据库不支持mysql中limit功能,但可以通过rownum来限制返回的结果集的行数,r ...

  5. Android著名开源库

    UI方面 1.绘制图表MPAndroidChart.hellocharts: https://github.com/PhilJay/MPAndroidChart https://github.com/ ...

  6. Android 常用开源库总结(持续更新)

    前言 收集了一些比较常见的开源库,特此记录(已收录350+).另外,本文将持续更新,大家有关于Android 优秀的开源库,也可以在下面留言. 一 .基本控件 TextView HTextView 一 ...

  7. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  8. js 数组的深度拷贝 的四种实现方法

    首先声明本人资质尚浅,本文只用于个人总结.如有错误,欢迎指正.共同提高. --------------------------------------------------------------- ...

  9. Win10 C盘 系统和保留 占用空间 非常大

    Win10 C盘 系统和保留 占用空间 非常大今天在写代码的时候,突然发现Redis起不来了,一看原因,是因为C盘空间不足.然后,我看了下C盘,发现...一个叫系统和保留的东西,居然占了110G的空间 ...

  10. jeecg的开发api接口之旅(http)

    一.接口测试工具 1.postman下载地址:https://download.csdn.net/download/qq_35792159/11898005 2.谷歌浏览器插件:https://www ...