前言：
笔者是第一次在掘金上发布文章，此外之前也没写过技术文章，看了很多面试发现有一些都是有技术贡献的优先，github开源项目的优先，笔者也想着通过写这些来提升下自己。之后会抽时间陆续发布自己的一些见解相关文章，笔者是不到两年工作经验的前端开发工程师，且是毕业之后才开始干前端的，非计算机专业，也是欠缺很多基础的，笔者也只能平常慢慢去补了。
过去一年多里主要是用vue因为公司就是vue技术栈，以及开发过小程序，后端了解点node，自己写个简单业务没什么大问题。笔者目前也准备以react为技术栈做前端个人技术博客，后端node+express+mysql来建立后端服务。2020-07-04开始学习react，做个记录。准确来说，是边学边做的这样一种模式，于是在写项目过程中遇到的问题会逐步分享出来，给有相应疑惑的做个解答。
正文开始
1.项目搭建。因为想要更快入手react框架，所以项目搭建直接用了creat-react-app指令快速搭建出了react项目
以上就是react项目的目录结构很简单。public里面是index.html以及网站图标就是浏览器标签页显示的那个小图标。index.html就是入口文件，应该说 页面都挂载到这里了。
而且比vue好的是自己就安装好初始化的所有依赖包了，因此进入文件夹直接就能
npm start运行项目。确实操作简单了许多。
src目录详解
了解目录能更好的去了解项目，这对于将来想自己构建react项目有很大的帮助我还是用图片来做解释
整理目录结构
笔者在开发新项目都喜欢去整理目录结构，或者添加目录，因为这样就更方便后续的项目开发。比如说 公共方法写一个util.js 放到util文件夹，公共库 放到lib文件夹，页面放到page，组件放到component，接口放到api，静态文件放到assets这样子，目录是不是更清晰了呢，
至少你很清楚究竟哪个文件夹是用来干什么的
开始写页面
由于笔者已经订好目录结构了，所以页面都会在page文件夹下开发，组件其他也是响应类似的操作
稍微啰嗦下，通过笔者几天的学习，笔者把app.js理解为大组件这个组件是所有页面的架子父组件，将来开发的页面是每个页面组件，然后页面里可能又有很多小组件。
项目运行以后，就是如上图片咯。根据以上提示： 你可以在app.js修改，然后保存页面重新加载。
但是呢，笔者不愿意在app.js里面写我想要写的。因为太麻烦。如果页面多了，业务繁忙了，会造成不可避免的后果。这也是笔者为什么一开始要调整目录的主要原因。于是呢，笔者直接在page里面开发，首先建立一个home页面。folderName: home ,file: home.js 。
以上几行代码 页面就算写好了架子。接下来解释下： 首先react是jsx语法，jsx可以在官网具体看下他的介绍很清晰
jsx是什么: react.docschina.org/docs/introd…
简言之: JSX是React.createElement(component, props, ...children)方法的语法糖。因此要引入react。其次，react页面渲染 是用render函数来渲染每个页面的
上面示例图少了一行代码“： 稍后做添加”
页面既然写完了，现在我想要看这个页面怎么办呢，当然是要让该部分内容输出去。这里于是要参考app.js的方式
export default Home 再啰嗦下，这里方法名字要大写
import React from 'react'
class [Name要首字母大写] extends React.Component{ }
export default [Name]接下来将该文件引入app.js
import React from 'react';import logo from './logo.svg';import './App.css';import Home from './page/home/home' // 引入刚才的文件function App() { return ( <div className="App"> <header className="App-header"> <Home /> /* 标签对形式 */ </header> </div> );}export default App;同时这也是react引入组件的方式，也就是之后如果有什么组件之类的都是这种方式引入的。
接下来要啰嗦下：
啰嗦两句
1. react 类名 要写 className 而不是class 会有警告
index.js:1 Warning: Invalid DOM property `class`. Did you mean `className`?2. return 后面是 括号 不是花括号 一定要注意
3. 关于react样式表问题： 从app.js 你就可以发现，react样式表是直接引入样式文件就可以起作用的，既然这样，他就不存在域的问题了，你可以自行在home文件夹下创建home.css，然后home里面也写一个与app.js 类名一样的就会发现样式会覆盖。
不同于vue，没有scope一说。 因此写样式一定要注意：一定要注意：
加上命名空间，于是乎，你就需要引入sass 或者 less 之类的样式预编译器了
其次react也提供了自己的思路 css-modules
关于css-modules 笔者这里先不写，之后会具体使用然后再分享出来，其实也可以网站查阅其他资料啦关于路由那些事儿
喂喂喂，这么快就说路由了吗？ 因此前端路由很重要的哒。你会写很多页面，页面头部，标签跳转，因此 路由很有必要
于是乎，增加一个文件夹router/index.js 路由就配置这里了。接下来，先写简单的写法：
本篇文章只做起步的写法，之后还要做封装哒。
react路由 驱动于 react-router-dom这是目前的处理方案，之前好像也有react-router
npm install react-router-dom --save
你需要首先安装其次你需要查阅相关文档 segmentfault.com/a/119000001… 【react-router-dom文档详解】
// router/index.js
import Home from '../page/home/home'import Article from '../page/article/article'import React from 'react'import { Route, Switch, HashRouter } from 'react-router-dom'class Router extends React.Component { constructor(props) { super(props) this.state = { } } render() { return ( <HashRouter> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/article" component={Article} /> </Switch> </HashRouter> ) }}export default Router
// page/home/home.js
import React from 'react'import {Link} from 'react-router-dom'class Home extends React.Component { render() { return ( <Link to="/article" className="home_page"> 这是home页面去article </Link> ) }}export default Home
为了测试功能，笔者增加了页面
import React from 'react'import {Link} from 'react-router-dom'class Article extends React.Component { render() { return ( <Link to="/" className="home_page"> 这是article页面,点我去home </Link> ) }}export default Article
引入react-router-dom以后 可以引用Link 类似于 vue中的router-link也就是跳转标签咯以上运行项目就可以成功跳转。剩下就是页面的样式包括页面布局等等，这些都再熟悉不过了。以上你便已经基本了解了react的页面写法以及路由基本写法。
下一篇章 笔者将对路由做进一步解析以及react书写时的重要问题以及注意点
最后贴上目录以及github地址。github已经更新到后面了。这是对之前操作的一些解释以及个人理解。
最后献上github地址提供给大家参考；。如果觉得可以，可以关注我给我个star呢。笔者作为初入前端初入计算机领域的一名程序员。愿与君共勉
希望未来自己的技术更加精进，技术文章更加有价值，也要不放弃的去走这条路。
