React Hacker

A simple React starter that's perfect for messing around.

Overview

This package includes the following:

• Babel
• Webpack
• Emotion CSS in JS
• React Bootstrap
• Font Awesome 4.7
• React Router
• Lodash
• Axios
• ESlint
• Airbnb ESlint Config
• Prettier

Usage

The starter consists of a simple two page template to demonstrate that everything is working properly. There are examples of how to use Emotion CSS in various ways in the code, and an example of how to use the file loader to import an image on the Home page. Please read the additional notes in the next section before using.

• git clone https://github.com/DZuz14/react-hacker.git
• cd react-hacker
• npm i or yarn
• npm start or yarn start

If your browser does not automatically open, visit http://localhost:8080.

Notes

For the most part, if you plan to use Emotion, you do not need to import React like this:

• import React from 'react'

The reason being is that this uses JSX Pragma, which handles that for us. Most of the time, the top of any new React related file that you create should look like the following.

/** @jsx jsx */
import { css, jsx } from '@emotion/react'

or this if you are using styled components.

/** @jsx jsx */
import { jsx } from '@emotion/react'
import styled from '@emotion/styled'

or this if you are using both the css prop and styled components together.

/** @jsx jsx */
import { css, jsx } from '@emotion/react'
import styled from '@emotion/styled'

If you need to import hooks and anything else from React, you need to do it like this:

import { useState, useEffect, useRef } from 'react'

If you have a React file that you don't want to use Emotion in, you can simply import React like usual. There is no need to have the /**@jsx jsx */ at the top, or any imports related to Emotion, just:

• import React from 'react'