React 学习项目搭建以及第一个demo组件

╰半夏微凉° 2022-04-24 01:20 162阅读 0赞

学习视频地址

[https://www.imooc.com/learn/1045][https_www.imooc.com_learn_1045]

1 使用create-react-app 快速构建React开发环境

$ cnpm install -g create-react-app
    
    $ create-react-app my-app
    
    $ cd my-app/
    
    $ npm start

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 2][]

第一个组件：

2 使用组件

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // import App from './App'; import Welcome from './Welcome'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(&lt;Welcome/&gt;, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 3][]

[https_www.imooc.com_learn_1045]: https://www.imooc.com/learn/1045
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70]: /images/20220221/d76ca0312bcc42cf8cd94c216d301c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 1]: /images/20220221/b14bceb9484a42318b745e86c357b156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 2]: /images/20220221/9c987ee2b43a4162a6201dc991fa999e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 3]: /images/20220221/24e858c7699f4001a187197def9446b5.png