Skip to content
Permalink
Browse files

updates instructions and starter

  • Loading branch information
Nick Olds
Nick Olds committed Aug 2, 2016
1 parent e40c12a commit 76b112fc358c8ffaa74b1bbdd7a850f3895240f2
Showing with 24 additions and 48 deletions.
  1. +22 −18 README.md
  2. +1 −21 src/App.js
  3. +1 −9 src/index.js
@@ -2,6 +2,8 @@

**See Headers Below For Step By Step Outline**

> **Note**: each step has a corresponding commit with the implemented actions on the [solution branch](https://github.com/ga-wdi-exercises/react-omdb/tree/solution) of this repo
### Step 0: Examine the Solution

Fork and clone the app locally.
@@ -20,27 +22,29 @@ Before we start building our React app, let's create a `HelloWorld` component ju

- Fork this repository then clone your fork
- `npm install` the dependencies you'll need
- Create and configure your `.babelrc` file
- Create and configure your `webpack.config.js`file
- In your app directory create and configure your `index.html` file
- In your app directory create and configure your `index.js` file to render a HelloWorld component
- Start Webpack and make sure everything is working
- In your `/src` directory, configure your `App.js` and `index.js` files to render a `HelloWorld` component
- Run `npm start` and make sure everything is working

### Step 2: Add UI for Home

- Create a Home component that outputs a header and a container element
- Rename `App.js` to `Home.js` to better indicate the purpose of the file. Make sure to update references to this file elsewhere in your application accordingly.
- Create a Home component that returns a container `<div>` element, which should in turn contain a `<h1>` element.
- Renders that component to the DOM in your app's main `index.js` file

### Step 3: Add UI for Search

- Define a Search component that displays a search box, an inviting button
- Render the Search component in the Home component
- Create a new file for your `Search` component.
- Define a `Search` component that renders a search form. This can be a simple form with a single input and submit button.
- Import the `Search` file to your `Home` file.
- Render the `Search` component in the `Home` component.

### Step 4: Wire up the Search Button

- Define your Search component's initial state
- When a user searches for a movie, reset your component's state to track their query
- Wire up your button to log whatever is in the input field when the button is clicked
- Define your `Search` component's initial state. It should have a `query` value that corresponds to a search term.
- Define a function that is triggered whenever the user submits the Search form. Start by just logging `"clicked!"` to make sure it works.
- Use an event listener to attach this function to your form. Try googling `onSubmit`.
- Define a function that updates your `query` value in state whenever a change is made to the input field. Try googling `onChange`.
- Update your submit function so that it now logs the `query` value in state.

### Step 5: Move Search logic to a Container component

@@ -53,7 +57,9 @@ Before we start building our React app, let's create a `HelloWorld` component ju

- Define a results component that will take in a collection of movie objects and render each individual movie's title and poster
- Refactor your Search Container component to include state relating to whether or not a user has searched
- If a user has searched, instead of rendering the Search component, render a Results components will hard coded data
- If a user has searched, instead of rendering the Search component, render a Results components with hard coded data

## Bonus

### Step 7: Connect to the Omdb Api

@@ -62,14 +68,12 @@ Before we start building our React app, let's create a `HelloWorld` component ju
- Load in jQuery and use it to make an ajax call to the api endpoint using the user's query
- Pass the movie data to the Results component to be displayed

## Bonus

### Step 8: Add Styles to your React app

- Install `css-loader` and `style-loader` loaders with npm
- Define a new loader in your webpack configuration that targets any css files and applies the css and style loader transformations
- Create a styles directory and make a file for your css rule definitions
- Load in that file in any component and then use that to apply inline styles to React components
- Load in Bootstrap CDN in `index.html`
- Modify UI to include Bootstrap classes
- Create a `styles` directory and make a file for your CSS rule definitions - this will be written in Javascript!
- Load in that file in any component and then use that to apply inline styling

## Double Bonus

@@ -1,21 +1 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}

export default App;
// Developer TODO: Define App component defintion here
@@ -1,9 +1 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
<App />,
document.getElementById('root')
);
// Developer TODO: Load in App component and render to the DOM

0 comments on commit 76b112f

Please sign in to comment.
You can’t perform that action at this time.