matheusml

{
  test: /\.css$/,
  loader: 'style-loader!css-loader',
},
{
  test: /\.scss$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
}

matheusml

yarn add create-react-app

matheusml

$ yarn global add create-react-app
$ npm install -g create-react-app
$ create-react-app NOME_PROJETO
$ cd NOME_PROJETO

matheusml

Verifying my Blockstack ID is secured with the address 1BwQZHU6Hi4xA1KoYao83Swad5bbfeBtxd https://explorer.blockstack.org/address/1BwQZHU6Hi4xA1KoYao83Swad5bbfeBtxd

matheusml

function describe(description, callback) {
  console.log(description);
  callback();
}

function it(description, callback) {
  console.log(description);
  callback();
}

matheusml

describe("booleans", () => {
  it("false === false", () => {
    expect(false).toBe(false);
  });
  it("true === true", () => {
    expect(true).toBe(true);
  });
});

matheusml

test('setOpenIndex sets the open index state properly', () => {
  const wrapper = mount(<Accordion items={[]} />)
  expect(wrapper.state('openIndex')).toBe(0)
  wrapper.instance().setOpenIndex(1)
  expect(wrapper.state('openIndex')).toBe(1)
})

test('Accordion renders AccordionContents with the item contents', () => {
  const hats = {title: 'Favorite Hats', contents: 'Fedoras are classy'}
  const footware = {

matheusml

test('can open accordion items to see the contents', () => {
  const hats = {title: 'Favorite Hats', contents: 'Fedoras are classy'}
  const footware = {
    title: 'Favorite Footware',
    contents: 'Flipflops are the best',
  }
  render(<Accordion items={[hats, footware]} />)
  expect(screen.getByText(hats.contents)).toBeInTheDocument()
  expect(screen.queryByText(footware.contents)).not.toBeInTheDocument()
  userEvent.click(screen.getByText(footware.title))

matheusml

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  
  const onSubmit = () => {
    // do something with `${name}` and `${email}`
  };

matheusml

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {count: state.count + 1};
    case 'DECREMENT':
      return {count: state.count - 1};