This is a design system skeleton project.
The purpose of this project is to create a minimal design system tooling.
It should cover those tools:
* React
* React-Hot-Reload
* Parcel
* styled-components
- components
- Please grouping your components in
components
- Please grouping your components in
- components/App.js
- Compose our components to demo.
- pub
- Files you need to access in the code like images or fonts.
- themes
- We will create different themes.
- index.js
- The entry point of this project, and it also apply hot-module loader to update result when saving files.
Please install Node.js first, and clone this project.
You also need to install yarn.
After installation, change your working directory into this project and execute this command.
yarn install
It will install packages automactically.
npm start
If you change your code, please use `git add <filename>` to add your changes in git's staging.
After adding files in git's staging, you can use `git commit -m <your messages>` to compose a git commit change.
Once your commit is ready. You need to upload your changes to remote repository.
Please try `git push origin <branch name>`.
You can use `git checkout <branch name>` to change your working branch.
If you use this command `git checkout -b <branch name>`, it will create a new branch name and switch to it.
git shows your current branch name.
Since we have known CSS and JavaScript (just understand the basic syntax), the fundamental of nowdays technology. We use styled-components to styling our design system. styled-components is a solid and popular css-in-js solution. It connects CSS and JavaScript in the same place. With styled-components, you can use CSS syntax in JavaScript via tagged template literal.
// always remember to import react and styled-components in the beginning
import styled from 'styled-components';
/* declare a styled-component named Pantone, its HTML tag would be div.
* styled-component supports tag template literals. Put your css rules inside the pair of back-tick.
* It can support template's placeholder to embed JavaScript like ${props => props.color || "#fff"};
*/
const Pantone = styled.div`
padding: 1em;
display: inline-block;
margin: 0.5em;
color: ${props => props.color || "#fff"};
background: ${props => props.bgColor || "#00b3e3"};
border: 1px solid black;
text-transform: uppercase;
`;
export { Pantone };
// Remember to export your component
- Nodejs
- React
- CSS
- Git Tutorial
- Visual Studio Code
- GitHub PR
- React Developer Tool