Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/natalia-bp/starwarsblog
A Star Wars blog made using React Flux and SWAPI
https://github.com/natalia-bp/starwarsblog
Last synced: 13 days ago
JSON representation
A Star Wars blog made using React Flux and SWAPI
- Host: GitHub
- URL: https://github.com/natalia-bp/starwarsblog
- Owner: Natalia-BP
- Created: 2021-02-18T17:54:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-03-07T05:37:42.000Z (almost 4 years ago)
- Last Synced: 2024-11-14T07:43:49.405Z (2 months ago)
- Language: JavaScript
- Size: 4.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# WebApp boilerplate with React JS
[](https://gitpod.io#https://github.com/4GeeksAcademy/react-hello-webapp.git)
### Requirements:
- Make sure you are using node version 10
1. Install the packages:
```
$ npm install
```
2. Create a .env file:
```
$ cp .env.example .env
```
3. Start coding! and the webpack dev server with live reload, for windows, mac, linux or Gitpod:
```bash
$ npm run start
```
### Styles
You can update the `styles/index.scss` or create new `.scss` files inside `styles/` and import them into your current scss or js files depending on your needs.
### Components
Add more files into your `./src/js/components` or styles folder as you need them and import them into your current files as needed.
**Note (New changes)**: Components have been converted into functions to support the use of hooks:
* Instead of a class component, we're using a `const` function.
* Class `constructor` and `state` have been replaced by `useState()` hooks.
* `componentDidMount()` was replaced by `useEffect({}, [])` - It runs at mount thanks to the second parameter (`[]`).
* `Actions` and `Store` still work the same way.
```jsx
// Previous "Class Oriented"
export class Demo extends React.Component {
constructor(props) {
super(props);
this.state = getState('code here');
}
}
// New "Functional Oriented"
export const Demo = () => (
const [state, setState] = getState('code here'); //using the state (if needed)
const { store, actions } = useContext(Context); // using the context (if needed)
);
```
💡Note: There is an example using the Context API inside `views/demo.js`;
### Views (Components)
Add more files into your `./src/js/views` and import them in `./src/js/layout.jsx`.
### Context
This boilerplate comes with a centralized general Context API. The file `./src/js/store/flux.js` has a base structure for the store, we encourage you to change it and adapt it to your needs.
React Context [docs](https://reactjs.org/docs/context.html)
BreathCode Lesson [view](https://content.breatheco.de/lesson/react-hooks-explained)
The `Provider` is already set. You can consume from any component using the useContext hook to get the `store` and `actions` from the Context. Check `/views/demo.js` to see a demo.
```jsx
import { Context } from "../store/appContext";
const MyComponentSuper = () => {
//here you use useContext to get store and actions
const { store, actions } = useContext(Context);
return
{/* you can use your actions or store inside the html */}
}
```
## Publish your website!
1. **Vercel:** The FREE recomended hosting provider is [vercel.com](https://vercel.com/), you can deploy in 1 minutes by typing the following 2 commands:
Login (you need to have an account):
```sh
$ npm i vercel -g && vercel login
```
Deploy:
```sh
$ vercel --prod
```
✎ Note: If you don't have an account just go to vercel.com, create a account and come back here.
2. **Github Pages:** This boilerplate is 100% compatible with the free github pages hosting.
To publish your website you need to push your code to your github repository and run the following command after:
```sh
$ npm run deploy
```
Note: You will need to [configure github pages for the branch gh-pages](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages)