react开发项目linux上线,React项目从零开始开发

#删除

#cnpm uninstall -g create-react-app

#验证删除

#create-react-app

#where create-react-app

C:\Users\Administrator\AppData\Roaming\npm\create-react-app

C:\Users\Administrator\AppData\Roaming\npm\create-react-app.cmd

删除

#安装

cnpm install -g create-react-app

一、安装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 npx

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 (

Hello,我是在src/myselfComponent目录下的C1.js文件中的C1组件 我引入了相同目录下的 C1.css 文件，用来给我包含的文字设为红色

);

}

}

export default C1;

C2.js

import React, { Component } from 'react';

import './C2.css';

class C2 extends Component {

render() {

return (

Hello,我是在src/myselfComponent目录下的C2.js文件中的C2组件 我引入了相同目录下的 C2.css 文件，用来给我包含的文字设为蓝色

);

}

}

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(

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开发的其它项目目录都可以，需要改对应的连接地址。