Giter VIP home page Giter VIP logo

curso-react-alura's Introduction

Estrutura do create-react-app configurada

$create-react-app "nome-do-projeto"

Dar os seguintes comandos:

$yarn add eslint -D

$yarn eslint --init

  • To check syntax, find problems, and enforce code style JavaScript modules (import/export)
  • React
  • Browser
  • Use a popular style guide
  • Airbnb
  • JavaScript
  • Selecione Yes
  • Selecione Yes

$yarn

$yarn add prettier eslint-config-prettier eslint-plugin-prettier babel-eslint -D

$yarn add [email protected] --exact -D

$yarn start

Apagar os seguintes arquivos:

  • README.md
  • manifest.json (dentro da pasta public)
  • Dentro da pagina SRC, apagar todos os arquivos exceto os arquivos App.js e index.js
  • package-lock.json
  • yarn-error.log

Substituir o conteudo do arquivo package.json por:

{
    "name": "modulo07",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-scripts": "3.0.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "babel-eslint": "^10.0.2",
        "eslint": "^5.16.0",
        "eslint-config-airbnb": "^17.1.1",
        "eslint-config-prettier": "^6.0.0",
        "eslint-plugin-import": "^2.18.0",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.0",
        "eslint-plugin-react": "^7.14.2",
        "prettier": "^1.18.2"
    }
}

Substituir os dados do arquivo index.html (pasta public) por:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Rocketshoes</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

Substituir os dados do arquivo index.js (pasta src) por:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Substituir os dados do arquivo App.js (pasta src) por:

function App() {
    return (
        <div className="App">
            <h1>Hello Redux</h1>
        </div>
    );
}

export default App;

Embaixo do arquivo yarn.lock, clicar com o botão direito do mouse e selecionar Generate.editorconfig.

Substituir os dados do arquivo .eslintrc.js por:

module.exports = {
    env: {
        browser: true,
        es6: true,
    },
    extends: ['airbnb', 'prettier', 'prettier/react'],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
    },
    parser: 'babel-eslint',
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 2018,
        sourceType: 'module',
    },
    plugins: ['react', 'prettier'],
    rules: {
        'prettier/prettier': 'error',
        'react/jsx-filename-extension': [
            'warn',
            { extensions: ['.jsx', 'js'] },
        ],
        'import/prefer-default-export': 'off',
    },
};

Criar na raiz um arquivo .prettierrc com o seguinte conteudo:

{
    "singleQuote": true,
    "trailingComma": "es5"
}

yarn start

curso-react-alura's People

Contributors

wendellcalixtoo avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.