从0到0.1：最简单的React项目搭建

Dear 丶 2022-07-11 09:29 273阅读 0赞

本文原创地址：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/54677689][http_blog.csdn.net_zhou_xiao_cheng_article_details_54677689]，未经博主允许不得转载。  
自从React火遍大江南北后，相信很多人都在加入到React队伍的路上，但是如何从零开始搭建一个React项目呢？本文将为大家介绍如何快速简单地搭建一个新的React项目。  
在这里，推荐使用WebStorm作为我们的开发工具，其官方下载地址为：[http://www.jetbrains.com.cn/webstorm.html][http_www.jetbrains.com.cn_webstorm.html]。  
安装好Web Storm后，打开，新建一个项目（File->New->Project），项目名建议英文小写。

### **方案一：** ###

方案一会帮你打包你的代码，为你提供一个开发服务器，但是需要自己添加所需依赖。

1.  安装全局包。  
    在WebStorm的左下角点击Terminal，输入：`npm i react-scripts -g`。  
    ![这里写图片描述][SouthEast]
2.  初始化。  
    继续输入： `npm init`，然后安静等待，当出现下图划线部分时（如果你的项目名不是英文小写，请自觉输入），否则一直狂按回车键就好。  
    ![这里写图片描述][SouthEast 1]
3.  在新创建的项目下新建一个名为public的文件夹，并在该文件夹下新建一个名为index.html的文件。  
    ![这里写图片描述][SouthEast 2]
4.  在新创建的项目下新建一个名为src的文件夹，并在该文件夹下新建一个名为index.js的文件。  
    ![这里写图片描述][SouthEast 3]
5.  添加依赖。  
    点回左下角的Terminal，继续输入：`npm i react react-dom -S`。
6.  打开index.html文件，在代码行中输入`！`，再按`tab键`，可快捷生成html文档。之后在`body`标签对中添加：
    
        <div id="app" />
7.  打开package.json文件，将下图中的内容进行替换：  
    ![这里写图片描述][SouthEast 4]
    
    替换后：  
    ![这里写图片描述][SouthEast 5]
8.  在src文件夹下新建一个组件App.js，其代码如下：
    
        import React from 'react';
        
        class App extends React.Component { 
          render () {
            return (
              <div>
                Hello React!
              </div>
            );
          }
        }
        
        export default App;
9.  打开index.js文件，在代码行中输入：
    
        import React from 'react';
        import ReactDOM from 'react-dom';
        
        import App from './App';
        
        ReactDOM.render(<App />, document.getElementById('app'));
10. 运行。  
    点回左下角的Terminal，输入：`npm start`，即可运行我们写的Hello React! 小应用啦~  
    ![这里写图片描述][SouthEast 6]

### **方案二：** ###

方案二的方法更方便，使用`create-react-app`包，然后几行命令就搞定了，只是可能会比较慢==  
你可以在[GitHub][]上面详细了解这个包。  
`create-react-app`会帮你下载项目的模板文件，比如public/index.html和src/index.js这些，然后会帮你执行npm install来安装项目依赖。  
这里就不按步骤依次截图了，在左下角的Terminal中按序键入下列命令就好，其他的都不用做：

npm i create-react-app -g

create-react-app react-router

cd react-router/

npm start

### **问题及解决：** ###

`import`是ES6的语法，需要转换一下：  
![这里写图片描述][SouthEast 7]

转换成ES6后，忽略这条消息就好：  
![这里写图片描述][SouthEast 8]

React使用的是JSX语法，需要转换一下：  
![这里写图片描述][SouthEast 9]

全文完。

[http_blog.csdn.net_zhou_xiao_cheng_article_details_54677689]: http://blog.csdn.net/zhou_xiao_cheng/article/details/54677689
[http_www.jetbrains.com.cn_webstorm.html]: http://www.jetbrains.com.cn/webstorm.html
[SouthEast]: /images/20220711/3959223a33084ad882554bd268e5eff8.png
[SouthEast 1]: /images/20220711/2769f6d698814e38bc962435d9b35af5.png
[SouthEast 2]: /images/20220711/e1d33a4cb541458dac5fff80efbea576.png
[SouthEast 3]: /images/20220711/b5eaae4239274bd185b3d5ceccfa04b3.png
[SouthEast 4]: /images/20220711/9e7801ba96e64f81b07f9c74bd743372.png
[SouthEast 5]: /images/20220711/08ebcad52a1b4d72a3edede2beb08121.png
[SouthEast 6]: /images/20220711/4e65652f5f7e4037916a548c177ff6e3.png
[GitHub]: https://github.com/facebookincubator/create-react-app
[SouthEast 7]: /images/20220711/ed652838f22e4ce3aa151b413e71c9af.png
[SouthEast 8]: /images/20220711/ce8593d25f4d45b0a1acd3cbf28aba8f.png
[SouthEast 9]: /images/20220711/796afc9b7c3f47b0be55953b042ba213.png