创建项目

npx create-react-app my-app //my-app项目名

组件

编写

import React from 'react';

export default function HelloComponent (){

return (

<div>

HelloWord

</div>

);

}

/* 与上面导出方法作用相同

const WordComponent = () => {}

export default WordComponent

引入

import React,{useState} from 'react';

import WordComponent from "./WordComponent";

export default function HelloComponent (){

return (

<div>

</div>

);

}

传参

传递

import React from 'react';

import WordComponent from "./WordComponent";

export default function HelloComponent (){

return (

<div>

<WordComponent

person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}

</div>

);

}

person只能有一个值，所以需要用里边的{}

使用

import React from 'react';

export default function WordComponent({ person }) {

return (

<div>

{person.name}

{person.imageId}

</div>

)

};

注意函数的形参{ person }

使用时，如果是对象，就必须直接用person. 的方式

也可以使用const { name, imageId } = person

动态视图

import React,{useState} from 'react';

export default function HelloComponent (){

const [Hello, setHello] = useState('Hello')

const set = () => setHello('hello')

return (

<div>

{Hello}

<button onClick={set}>设置Hello</button>

</div>

);

}

useState 用来修改动态的值

Hello是变量，setHello是函数，用来修改Hello 的值

样式

.word{

font-size: 100px;

}

外链

import React from 'react';

import "./Word.css"

export default function WordComponent() {

return (

Word

</div>

)

};

通过className设置div 的类名，直接引入样式即可

行内

import React from 'react';

export default function WordComponent({ person }) {

const Style = {

fontSize: '20px'

}

return (

Word

</div>

)

};

学React的第一天的全部评论