一起学习react.js

Posted 2021-03-30 Keep runing

react 环境搭建：(直接上脚手架)

第一种方式：

 安装：npm install  -g create-react-app  全局安装

 安装项目：create-react-app 项目名称  （注意不要用大写）my-react-app

第二种方式：

    安装：npx create-react-app my-react-app    npx 是node自带包 会默认安装需要依赖

完成项目初始化；在目录下多了一个mu-react-app 文件；

运行项目 npm run start   (npm run xx ， 是执行的packjson.script,这里不做过多赘述)；

我们可以看到 react启动服务 默认启动了 localhost:3000  

到这里 一个简单的react demo  就配置完成了；

如果想修改配置文件 可以对react 进行打散：npm run eject  ；运行完之后就可以看到多了一些配置文件 ；webpack的配置文件也就被打到config内；

我们可以在根目录下新建一个  .env.*.*  配置我们想要的变量 比如port:8080;

---

Welcome to React

我们的项目文件是在 src下面；配置好开发环境之后 就开始进行hello world;

首先 你需要了解的React  ReactDom

React--> 负责逻辑控制；数据->vDom

ReactDom--> 渲染实际Dom VDom->真是Dom

jsx 是react描述UI的方式；

入口文件

module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic: resolveApp('public'), apphtml: resolveApp('public/index.html'), appIndexJs: resolveModule(resolveApp, 'src/index'),//这里就是webpack.config.js的entry  appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), appJsConfig: resolveApp('jsconfig.json'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), publicUrlOrPath,};

基本使用：

// 变量值cosnt data = "hello world"const jsx = (<div>{ data }</div>)  // 这就是jsx语法
// 函数const data={a:"hello",b:"world"};function concatData(data){return data.a + " " + data.b}const jsx = (<div>{concat(data)}</div>) //条件表达式也一样 
// 数组const arr = [1,2,3].map((item,index)=>{  return <li key={index}>{item}</li>});const jsx = (<ul> {arr} </ul>)
//属性的使用const jsx = (<img src={url} className="原生class" style={{height:100,width:100}} />)

了解了这个之后 我们试一下；

import React from 'react';import ReactDOM from 'react-dom';const data = "hello world"const jsx = (<div>{ data }</div>)ReactDOM.render(jsx, document.getElementById('root'))

React 组件  class组件和函数组件

class 组件拥有状态state和生命周期；继承自Component ;实现render方法；

来个实例：

 // index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';
ReactDOM.render(<App />,document.getElementById('root')) // App.jsimport React, { Component } from 'react'
export default class App extends Component { constructor(props) { super(props) this.state={ data:"hello world~snail" } }  render(){ return ( <div> {this.state.data} </div> ) }}

函数组件  

// 修改App.jsimport React from 'react'
const App = (props) => { return ( <div> hello world ~ snail </div> )}export default App;// 你没看错 就是这么简单

后续更新状态管理、传值通信、组件生命周期、16.8新增Hook;

让我们一点一点深入学习react~ 只要功夫深铁杵磨成针！