https://github.com/hackyourfuture/masterclass-react-redux
Repository for the Masterclass React/Redux
https://github.com/hackyourfuture/masterclass-react-redux
Last synced: 11 months ago
JSON representation
Repository for the Masterclass React/Redux
- Host: GitHub
- URL: https://github.com/hackyourfuture/masterclass-react-redux
- Owner: HackYourFuture
- Created: 2017-04-08T19:28:32.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-23T13:45:26.000Z (about 9 years ago)
- Last Synced: 2024-04-13T19:23:13.544Z (about 2 years ago)
- Language: JavaScript
- Size: 228 KB
- Stars: 3
- Watchers: 41
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting started with a React application
## Presentation
http://slides.com/joostlubach/react
## Example app
What we'll be using:
- **Babel** to convert ES2015 JSX files to ES5 files
- **Webpack** to create a single JS file for the browser
- **Webpack** dev server to load our web page
To create this project template from scratch:
```bash
# Install system-wide prerequisites
npm install -g yarn webpack webpack-dev-server
# Create an app directory
mkdir react-app
cd react-app
# Initialize the app directory
npm init
yarn
# Add required development packages
yarn add -D babel-core babel-preset-react babel-loader
# Add required runtime packages
yarn add react
# Create .babelrc file (just copy-paste this line)
echo -e "{\n \"presets\": [\"react\"]\n}" >.babelrc
# To view the created file:
cat .babelrc
# Create webpack.config.js
# I created a Gist for this at https://gist.githubusercontent.com/joostlubach/30955f971560c06bf77f759442b3515f/raw/194a87ec4732b1b8dc1f482956f2334213b08fcc/webpack.config.js
# Either download it and save it as webpack.config.js in your directory, or if you have wget, type:
wget https://gist.githubusercontent.com/joostlubach/30955f971560c06bf77f759442b3515f/raw/194a87ec4732b1b8dc1f482956f2334213b08fcc/webpack.config.js
# To view the created file:
cat webpack.config.js
# Create an empty src and build directory
mkdir src build
# Create an empty index.js file
echo '' >src/index.js
```
- Now create an `index.html` page inside the build directory:
```
React example
```
- Finally, start up your web server!
```bash
webpack-dev-server --content-base build --inline
```