前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(1)React的开发

(1)React的开发

作者头像
达达前端
发布2019-07-09 18:39:20
6600
发布2019-07-09 18:39:20
举报
文章被收录于专栏:达达前端达达前端

React简介及基础语法

https://reactjs.org/

create react app

代码语言:javascript
复制
npx create-react-app my-app

cd my-app

npm start
代码语言:javascript
复制
npx create-react-app todolist

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

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

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

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

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

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

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

代码语言:javascript
复制
npm i -g npx

npx create-react-app todolist

npm start
代码语言:javascript
复制
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

代码语言:javascript
复制
解决方法
    npm config set registry https://registry.npm.taobao.org
    //检验是否成功
    npm config get registry
1
2
3
    //然后再重新执行create-react-app
    create-react-app my-app
代码语言:javascript
复制
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.
代码语言:javascript
复制
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
代码语言:javascript
复制
npm config set registry http://registry.cnpmjs.org
代码语言:javascript
复制
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();
代码语言:javascript
复制
import React from 'react';

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

export default App;

什么是组件:

JSX语法:


本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.07.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档