React项目从零开始开发

一、安装nodejs和npm, cnpm等

（一）安装nodejs 配置好路径和环境变量。

（二）确认安装npm和cnpm安装

运行nodejs -v, npm-v, npm install

nodejs -v
npm -v
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g vue-cli
cnpm install -g create-react-app
cnpm install -g serve

cnpm install -g create-react-app
create-react-app reactdemo
cd reactdemo
npm start

Nodejs工作路径为：D:\nodejswork ，
Vuejs工作路径为：D:\nodejswork\vuework ，
Reactjs工作路径为：D:\nodejswork\react ，
vuedemo工作路径为：D:\nodejswork\vuework\vuedemo ，
reactdemo工作路径为：D:\nodejswork\react\reactdemo ，

在D:\nodejswork\react\运行create-react-app reactdemo, cd reactdemo, npm start,会自动打开浏览器访问 http://localhost:3000/，结果如下：

二、查看项目目录结构和做简单开发

（一）查看项目目录结构：

然后我们打开项目目录，可以看下其目录结构
大致如下图所示，共有三个文件夹，四个文件
解释如下：
三个文件夹
node_modules  //用来盛放你安装的所有node模块的文件夹
public                //用来盛放所有公共资源的文件夹，比如html模板，项目图标
src                     //用来盛放你自己代码的文件夹，默认生成app.js代码也在里面
四个文件
.gitignore       // 这个是用来定义那些在提交到远程代码库时要忽略的文件
package.json //用来声明项目的各种模块安装信息，脚本信息等
package-lock.json //用来锁定模块安装版本的，能确保大家安装的模块版本一致
README.md  //盛放关于这项目的说明文件（全英文的，有兴趣可以看看）

src文件夹
然后我们来重点看看src文件夹，因为我们的react组件代码待会也会写在里面。
这里面的文件也不多，就四部分
1、APP相关的js，css文件 //自动给我们创建的一个组件
2、index相关的js，css文件
3、一个logo.svg图标 //默认的一个简单图标文件
4、一个registerServiceWorker.js文件 //此文件能进行缓存一些资源，一般是用到生产环境的，主要是用来加快访问速度，
大致的分析下组件结构
主要说些比较重要的文件
1. 首先是public目录下盛放着index.html模板，如果开发单页应用，那么所有的代码都会渲染在这里。【index.html文件中也就三部分内容。1.通过meat标签引入的主页一个自适应的viewport声明。2. 通过link标签引入的一个项目基本 m配置文件anifest.json和图标，3. 一个用来让react组件渲染的div标签】
2. 也是在public目录下的manifest.json文件，此文件记录着这个react的APP应用的基本配置信息，他类似于Android的AndroidManifest.xml
3. 然后就是在scr目录下的index.js文件，他不是一个react组件，他是链接react与htnl模板的桥梁，所有的react组件最终都是由他进行渲染到html模板中。然后整个文件中引入了一个系统默认生成的组件APP,有index.js进行渲染。
4. registerServiceWorker.js文件，这个文件是用于生产环境的，它可以缓存些资源，让用户在离线模式下也能访问缓存的内容，以给用户更好的体验，开发环境中没什么用处。。。
5. 最后还有个app.test.js文件，主要是用来组件测试的，有兴趣可以取好好了解下，这里就不多讲这个。

（二）创建自己的组件

1. 整个项目文件基本分析完了，然后我们就可以创建自己的组件了。
2. 我们在src下新建一个目录：myselfComponent,用来盛放我们新创建的组件
3. 我们分别创建两个组件C1,C2,他们分别各显示一句话即可，
4. 然后我们在index.js里面引入C1,C2组件，
5. 然后在浏览器查看运行效果

C1.css

.c1 {color:red;}

C2.css

.c2 {color:blue;}

C1.js

import React, { Component } from 'react';
import './C1.css';

class C1 extends Component {
  render() {
    return (
      <div className="c1">
        Hello,我是在src/myselfComponent目录下的C1.js文件中的C1组件 我引入了相同目录下的 C1.css 文件，用来给我包含的文字设为红色
      </div>
      );
  }
}

export default C1;

C2.js

import React, { Component } from 'react';
import './C2.css';

class C2 extends Component {
  render() {
    return (
      <div className="c2">
        Hello,我是在src/myselfComponent目录下的C2.js文件中的C2组件 我引入了相同目录下的 C2.css 文件，用来给我包含的文字设为蓝色
      </div>
      );
  }
}

export default C2;

最后是修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import C1 from './myselfComponent/C1.js';
import C2 from './myselfComponent/C2.js';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <div>
  <C1/>
  <App />
  <C2/>
</div>,
  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();

完成后使用npm start

上面还有个红色的字，不好截图个。

还有npm run build 编译生成文件,已经 serve -s build等使用,npm start 端口为3000， serve -s build端口为5000 。

npm run build后生成的文件在build目录下，可以把对应生成的文件放到比如java开发的其它项目目录都可以，需要改对应的连接地址。

来源：oschina

链接：https://my.oschina.net/lenglingx/blog/4488371

标签

javascript

npm

node.js