Setting up React & Intro to Props

Setup a React App:

Setting up your react app is simple. (Look this up later) Just go into the directory you want to setup you project and run this terminal command:

$ npx create-react-app todo-list
$ cd todo-list
$ npm start   #OR $ yarn start

Then open the project in a text editor and visit http://localhost:3000 to see your new project in the browser

React.js Components (functional)

The first thing you’ll probably want to do is put stuff on the screen. If you look in the src/ folder you’ll see the majority of the project. Let’s open App.js first. You’ll see a function named App(), and inside you’ll see it returns markup. App() is just a regular function that returns a value. We can tell that this function represents a “component” because it starts with a capital letter.

Let’s create our own “functional” component called Todo. Above function App() place the following code:

function Todo() {
  return (
    <div>I am a Todo Item </div>
  );
}

We can display our new Todo component (the function) as many times as we want by using it as a component in the form of <Todo /> Go ahead and place a few inside the App() function like this:

function App() {
  return (
    /* I cannot put anything out here because functions are only supposed to return one thing. That's why everything is wrapped in a div */
    <div className="App">
      <Todo />
      <Todo />
      <Todo />
      <header className="App-header">

Save and refresh to see your application:

Not very interesting. Let’s try to customize each Todo component with custom data.

Intro to React Props

You’re able to give each component a customized set of data via “props”. In the example below, “title” is a prop. Adjust your code like below:

function Todo(props) {
  return <div>Todo Item: {props.title} </div>;
}

function App() {
  return (
    /* I cannot put anything out here because functions are only supposed to return one thing. That's why everything is wrapped in a div */
    <div className="App">
      <Todo title={"eat yummy bread"} />
      <Todo title={"Buy a puppy"} />
      <Todo title={"Go to the store"} />

Now you should see each of your components has different data inside of it.

Check out the 02-props-intro for complete code

Leave a Comment

Your email address will not be published. Required fields are marked *

want more details?

Fill in your details and we'll be in touch

%d bloggers like this: