（1）React的开发

1、React项目架构搭建
2、JSX语法
3、React组件化开发
4、React组件间通信
5、React中的事件
6、React代码优化
7、React中组件的样式修饰

React简介及基础语法

image.png image.png image.png

https://reactjs.org/

image.png image.png

create react app

npx create-react-app my-app

cd my-app

npm start

npx create-react-app todolist

image.png

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

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

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

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

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

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

image.png

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

npm i -g npx

npx create-react-app todolist

npm start

image.png

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

image.png image.png

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

image.png image.png

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

image.png

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

image.png image.png image.png

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();

image.png

import React from 'react';

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

export default App;

image.png

什么是组件：

image.png

JSX语法：

image.png

---

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

官方微信公众号

吹逼交流群：711613774

吹逼交流群