react-基础操作（1）使用cra

https://reactjs.org react官网

react不是一个框架，而是一个库！【详细可以看我之前的文章】

版本16后架构由diff变为fiber

特点：虚拟DOM、组件化、jsx

使用cra

在新的文件夹下直接

npx create-react-app react-tuts

npm run eject可以查看库

（推荐使用vscode，可以安装ES7 React插件，写起来会更加方便）

因为是初学建议把src下的删除，自己一点一点新建文件学习。

新建index.js

• 方法一

  import React from 'react'
  import ReactDOM from 'react-dom'
  
  //const app=<h1>Welcome React</h1>
  
  // const createApp = (props) => {
  //     return (
  //     <div>
  //         {/* 只要在jsx里插入js的代码，就加一层花括号即可，注释也是js，所以这里的注释加了一层花括号 */}
  //         <h1>welcome {props.title}</h1>
  //         <p>优秀的{props.title}</p>
  //     </div>
  //     )
  // }
  
  // const app = createApp({
  //     title: 'React 16.8'
  // })
  
  //创建组建的第一种方式，使用箭头函数，但是这个名字要大写。下面render里面直接写app,就行
  
  
  const App = (props) => {
      return (
      <div>
          {/* 只要在jsx里插入js的代码，就加一层花括号即可，注释也是js，所以这里的注释加了一层花括号 */}
          <h1>welcome {props.title}</h1>
          <p>优秀的{props.title}</p>
      </div>
      )
  }
  ReactDOM.render(
      <App title="2020" />,
      document.querySelector('#root')
  )

• 方法二

  import React from 'react'
  import { render } from 'react-dom'
  
  //定义组建的第二种方式，使用类继承React.Component
  
  class App extends React.Component{
      render () {
          console.log(this.props)
          return (
              <div>
                  <h1>类组件继承</h1>
                  <p>{this.props.desc}</p>
              </div>
          )
      }
  }
  
  
  //类组件渲染的原理
  // const app = new App({
  //     desc: '类组件是继承React.Component'
  // }).render
  
  //render是react dom提供的方法，通常只会用一次
  render(
      <App desc="类组件是继承React.Component" />,
      document.querySelector('#root')
  )

• 方法三（jsx原理）

  import React,{ Component } from 'react'
  import { render } from 'react-dom'
  
  
  // 表示一个虚拟DOM树的方式
  // const appVDom = {
  //     tag: 'div',
  //     attrs: {
  //         className: 'app',
  //         id: 'appRoot'
  //     },
  //     children: [
  //         {
  //             tag: 'h1',
  //             attrs:{
  //                 className: 'title'
  //             },
  //             children: [
  //                 'JSX原理'
  //             ]
  //         },{
  //             tag: 'p',
  //             attrs: null,
  //             children: [
  //                 '类组件是继承React.Component的'
  //             ]
  //         }
  //     ]
  // }
  
  
  // 所以react在真正的渲染的时候会把之前的代码编译成这样运行，这里的代码就是合法的js代码
  class App extends React.Component{
      render () {
          return (
              //React.createElement是一个方法，用于创建元素，可以有很多的参数，但前两个是固定的
              //第一个可以理解为标签名
              //第二个可以理解为标签的属性
              //剩下的，就继续写更多的子元素
              React.createElement(
                  'div',
                  {
                      className: 'app',
                      id: 'appRoot'
                  },
                  React.createElement(
                      'h1',
                      {
                          className: 'title'
                      },
                      'jsx原理'
                  ),
                  React.createElement(
                      'p',
                      null,
                      '类组件是继承React.Component的'
                  )
              )
          )
      }
  }
  
  
  
  render(
      <App desc="类组件是继承React.Component" />,
      document.querySelector('#root')
  )

• 组件中的样式

  https://www.npmjs.com/package/classnames 参考官网

  https://www.npmjs.com/package/styled-components 参考官网

  
  

  npm i classnames -S

  npm i styled-components -S

  import React, { Component } from 'react'
  import { render } from 'react-dom'
  import classNames from 'classnames'
  import styled from 'styled-components'
  
  import './index.css'
  
  const Title = styled.h1`
      color: #F00
  `
  
  class App extends Component{
      render () {
          const style = { color: '#F00' }
          return (
              <div>
                  <h1>元素中的样式</h1>
                  <ol>
                      <li style={style}>使用style内联</li>
                      <li className="has-text-red">使用class的方式，但是在react里class要写成className</li>
                      <li className={classNames('a',{'b':true,'c':false})}>要动态添加不同的className就可以使用第三方的包叫classNames,比如这个li上只有ab没有c</li>
                      <Title>style-components的使用</Title>
                  </ol>
              </div>
          )
      }
  }

赏

谢谢你的关注

支付宝

微信

• 本文作者： Raphael_Li
• 本文链接： https://lifei-2019.github.io/react3/
• 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！