8000 GitHub - Earthsplitter/React-Blog-App: A blog framework based on React.js

More Web Proxy on the site http://driver.im/

Name		Name	Last commit message	Last commit date
Latest commit History 66 Commits
assets/data		assets/data
components		components
public		public
App.js		App.js
README.md		README.md
index.js		index.js
package.json		package.json
server.js		server.js
webpack.config.js		webpack.config.js

Repository files navigation

A Blog Framework (Still in development)

Before I finish this, my blog is at here

Features

In Code

Use React.js and React-Router for Front-End and Node.js and Express.js for Back-End Data processing.
With detailed comments, it's a good example to learn React.js and its component.
With a user friendly manage system, users can easily edit everything in browser rather than source code (Still in development stage)

UI Interaction

Recommand Use Google Chrome Browser

Click the side bar, the whole page will change style(There are 4 styles in default).
Click the cog icon on the left bottom to sign in(default username is wmzfsw and password is 123456).
A Markdown Editor in Management System and Markdown interpreter on front-end.
Responsive Design

Getting Started

Install npm (skip if already have npm on your device).
Clone/Fork this repo.
In the project's root directory, run npm install
Run NODE_ENV=production npm start(production), this step will need several to tens of seconds.
open http://localhost:8080/.

Structure

General Structure

Root
- assets
  - data
- components -- the main directory, provide all components
  - Common
  - SideBar
  - Home
  - Experience
  - Articles
  - Projects
  - Settings
- public
  - assets -- Static resources
    - image
    - projects
  - css
    - styles.css -- In most cases, I use inline css in components. However, for styles like :hover and media query, a stylesheet is necessary
    - font-awesome.css -- font-awesome library
  - fonts -- font-awesome library
  - index.html -- The main page
- index.js -- the router files, the entry of this app
- App.js -- the main framework
- server.js -- Server used to response json request
- package.json -- npm dependencies
- webpack.config.js -- webpack configuration
- README.md

Components Relation

General

MainFrame (App.js)
- Navigation (SideBar/Navigation.js)
  - TopNav (SideBar/TopNav.js only on mobile devices)
    - NavLink (Common/NavLink.js)
  - SideBar (SideBar/SideBar.js)
    - Information (SideBar/Information.js)
    - SideNav (SideBar/SideNav.js)
    - Copyright (SideBar/Copyright.js)
- Login System (Settins/Login and Settings/LoginForm)
- Management System (Settings/)
  - Profile Setting (Settings/Profile)
  - Project Setting (Settings/ProjectsSetting and ProjectEditor)
- Children (Home/, Experience/, Articles/ and Projects/)

0