Giter Club home page Giter Club logo

react--gif-search-engine's Introduction

Workshop: Introduction to React

Build on the top of Le Wagon React boilerplate.

Banner

Demo

https://yannklein.github.io/react-workshop/

1. Set your laptop

Setup for Mac

Don't do the install below if you are a LW alumni

On a terminal do:

git --version
cd ~/Desktop
git clone https://github.com/yannklein/react-workshop.git react-giphy 
cd react-giphy
rm -rf .git
git init
git add .
git commit -m "initial setup ready for workshop" 
cd workshop
yarn install
yarn start

Open the "react-giphy" folder with SublimeText or VS Code

In your browser go to this url: localhost:8080

Setup for Windows

Don't do the install below if you are a LW alumni

Search for "Node.js prompt" in the Win menu search bar (or your normal terminal for LW students), open it and tap (press Enter after each line):

cd Desktop
git clone https://github.com/yannklein/react-workshop.git react-giphy 
cd react-giphy
rm -rf .git
git init
git add .
git commit -m "initial setup ready for workshop" 
cd workshop
yarn install
yarn start

Open the "react-giphy" folder with SublimeText or VS Code

In your browser go to this url: localhost:8080

2. Set you code editor

Setup for Sublime Text

  1. Go to SublimeText > Preferences > Package Control

Search for "Package Control: Install Package" and press Enter.

In the appearing list, search for "Babel" and press Enter.

  1. Same operations for "Babel Snippets" (some doc here)

  2. Got to SublimeText > Preferences > Key Bindings

Add the code of this link on the right side.

Setup for VS code

  1. Go to Code > Preferences > Extensions

Search and install "Reactjs code snippets" (some doc here)

3. Commands to run your code locally

To start the local Webpack Dev Server (usually on port 8080):

yarn start

To lint all JavaScript files in the src folder:

yarn lint

To build and deploy your app to gh-pages branch on the GitHub repo:

Install gh : https://cli.github.com/ (not needed for LW alumni)

gh repo create react-giphy
git push origin master
yarn deploy

react--gif-search-engine's People

Contributors

ren33000 avatar

Watchers

 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.