专栏首页达达前端(1)React的开发

(1)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语法:


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP全栈学习笔记10

    php常量,常量是不能被改变的,由英文字母,下划线,和数字组成,但是数字不能作为首字母出现。

    达达前端
  • 小程序左右标签滑块排行榜

    达达前端
  • 前端技术前沿1

    .js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,就相当于html中的css文件。

    达达前端
  • React基础(1)-create-react-app

    如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词

    itclanCoder
  • 早上看到几个实用的 React 工具包

    早上看到几个不错的 React 工具包, 看完之后觉得很实用,后面的一些开发任务可能我也用的上,也推荐给大家看看。

    用户6900878
  • React 学习项目搭建以及第一个demo组件

    爱明依
  • 漫谈计算机体系

    人类为什么要发明计算机?一直以来,人类都有爱偷懒的习惯,而正是由于这个原因,促使了人类发明了计算机,从而提高生产力,那么人类有了更多空闲时间去娱乐了~~

    木可大大
  • WordPress纯代码外链跳转效果的3款样式免费分享

    前面给大家讲了WordPress怎么利用纯代码实现WordPress的外链跳转效果,今天给大家分享几款跳转样式。

    于飞云计算
  • Hacking with iOS: SwiftUI Edition - Word Scramble 项目——使用UITextChecker校验单词

    现在我们的游戏已经设置好了,这个项目的最后一部分是确保用户不能输入无效的单词。我们将用四个小方法来实现这一点,每个方法都执行一个检查:单词是original(它...

    韦弦zhy
  • 使用SAP UI5 Web Components开发React应用

    (1) 命令行 npx create-react-app my-app --template @ui5/cra-template-webcomponents-r...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券