My First React IdeaBox

Learning Goals

  • Create class components
  • Create function components
  • Use state and props to manage application data
  • Create a controlled form
  • Use JSX

Iteration 0: Create React App

The Challenge

For this project, we will be using create-react-app. This is a single command line that sets up a boilerplate React application for us. Out of the box, it comes with some handy scripts (such as start and test).

Many of the dependencies and configuration files will be obscured, since we won’t need to worry about them. This is a fast way to set up a React application so we can concentrate on building out the app, instead of spending our time and energy on tooling.

Note: A good intermission or post-graduation project is to learn how to configure React. Hand-rolling a React application will make you more familiar with how React works.

The Code

To set up a new react application, simply open your terminal and run the command:

$ npx create-react-app NAMEOFYOURAPP

For this lesson, we’ll be rebuilding a Mod 1 project in React! Let’s run the following script:

$ npx create-react-app ideabox

You will see something like this start to run in your terminal:

Creating a new React app in /Users/leta/mod3/ideabox.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

⸨  ░░░░░░░░░░░░░░░░⸩ ⠸ fetchMetadata: sill resolveWithNewModule pify@4.0.1 chec...

When the script is finished running, you will see the following message in your terminal:

> node scripts/postinstall || echo "ignore"

+ react-dom@16.8.6
+ react@16.8.6
+ react-scripts@3.0.1
added 1541 packages from 747 contributors and audited 888986 packages in 52.528s
found 0 vulnerabilities


Initialized a git repository.

Success! Created ideabox at /Users/leta/Turing/TA/MOD3/m3curriculum/ideabox
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd ideabox
  npm start

Happy hacking!

As the instructions say, let’s change directories into our new ideabox application and run npm start to see our new boilerplate application!

Reflections

Take a few minutes and look around the boilerplate. Hint: start at the src/ folder!

What happens if you:

  • Change some of the HTML you see in the App.js file?
  • Change some of the CSS you see in the App.css file?

Look at the index.js file, specifically this code:

ReactDOM.render(<App />, document.getElementById('root'));
  • What do you think is happening here?
  • Can you find in the codebase what the root is referring to?

Iteration 1: Our First Component (App.js)

The Challenge

xx

The Code

xx

Reflections

xx

Iteration 2: Rendering Ideas (Ideas.js + Card.js)

The Challenge

xx

The Code

xx

Reflections

xx

Iteration 3: Conditional Rendering

The Challenge

xx

The Code

xx

Reflections

xx

Iteration 4: Controlled Form (Form.js)

The Challenge

xx

The Code

xx

Reflections

xx

Iteration 5: Deleting a Card

The Challenge

xx

The Code

xx

Reflections

xx

Lesson Search Results

Showing top 10 results