react从零开始(一)

react基本环境安装:

1、npm install -g create-react-app

2、create-react-app hello-react
安装过程可能比较慢,可以执行下面的命令:

npm config set registry  https://registry.npm.taobao.org

3、

cd hello-react 
npm  start
项目就可以正常的运行起来了

4、JSX描述UI信息
首先把src/index.js的代码改成

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

class Header extends Component {
    render(){
        return (
            <div>
                <h1>从零开始react</h1>
            </div>
        )
    }
}

ReactDOM.render(<Header />, document.getElementById('root'));

页面就会成为自己写的内容
只要写React.js组件就要在头部引入React和React.js的组件父类Component
ReactDOM可以帮我们吧React组件渲染到页面上去
return内的代码即为jsx语法,jsx语法是javascript语言的一种扩展语法,并不是html,jsx在编译的时候会变成相应的javascript对象描述,下面是从jsx到页面的过程
在这里插入图片描述
5、render方法:
React.js中一切皆组件,一个组件必须要实现一个render方法,这个render方法必须返回一个jsx元素,必须用一个外层的jsx元素把所有的内容包裹起来,返回并列多个jsx元素是不合法的
jsx中可以插入javascript表达式, 如下:

render(){
    const word = "你好,react"
    return (
        <div>
            <h1>从零开始react</h1>
            <p>{word}</p>
        </div>
    )
}

页面上就会把, 你好,react渲染出来,也可以写成函数表达式

render(){
    return (
        <div>
            <h1>从零开始react</h1>
            <p>{(funciton(){ return '你好,react' })()}</p>
        </div>
    )
}

还可以把表达式用在标签属性上

render(){
    const word = "你好,react";
    const className = "color"
    return (
        <div>
            <h1>从零开始react</h1>
            <p>{word}</p>
            <p className={className}>{(()=>{return '你好,react'})()}</p>
        </div>
    )
}

在这里插入图片描述
因为class是javascript 的关键字,所以在标签内添加类名的时候需要使用className ={className}

注: 主要跟随react小红书学习
附上小红书链接: http://huziketang.mangojuice.top/books/react/

猜你喜欢