搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > Keep runing > 一起学习react.js

一起学习react.js

Keep runing 2020-06-13

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~ 只要功夫深铁杵磨成针!

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《一起学习react.js》的版权归原作者「Keep runing」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注Keep runing微信公众号

Keep runing微信公众号:gh_dcb3a9ff2ed3

Keep runing

手机扫描上方二维码即可关注Keep runing微信公众号

Keep runing最新文章

精品公众号随机推荐