React Conditional Rendering with the Ternary Operator & AND Operator

JSX only allows you to use JavaScript expressions within curly braces. It does not allow you to enclose JavaScript statements.

So if you wanted to use a condition to decide which content to render on the screen, you COULD NOT use a statement like this:

return <div>{
   if (isLoggedIn === true){
      return <h1>My Favorite Foods</h1>
   } else {
      return <p>My Least Favorite Foods</p>
   }
}</div>;

Instead, you would have to use a ternary operator. This is how ternary operators work:

condition ? do if true : do if false
foodAtHome === true ? makeFood() : buyFood()

So this is how you would accomplish the task from above:

return <div>{
   isLoggedIn === true ? <h1>My Favorite Foods</h1> : <p> My Least Favorite Foods</p>
}</div>;

Another way you can incorporate logic into your JSX objects is with the AND operator. The AND operator in React checks if the first condition is true or false. If true, it looks to see if the expression is also true then displays the expression. If the statement is false, it will not even look at the expression.

condition && expression
true && expression
false && -expression-

Here’s an example of the AND operator:

return <div>{
   currentTime > 12 && <h1>It's not the morning</h1>
}</div>;

Mapping React Components

We can use the JavaScript map function to make our code a lot cleaner when creating multiple components of the same type from a JSON-type data source.

So instead of having something like this:

function App() {
   return (
      <div>
         <Card 
            name={contacts[0].name}
            img={contacts[0].img}
            tel={contacts[0].phone}
          />
          <Card 
            name={contacts[1].name}
            img={contacts[1].img}
            tel={contacts[1].phone}
           />
          <Card 
            name={contacts[2].name}
            img={contacts[2].img}
            tel={contacts[2].phone}
           />
         ...

We can use something like this:

function createCard(contact) {
   return <Card name={contact.name} img={contact.img} />
}

function App() {
   return (
      <div>
         {contacts.map(createCard)}
         ...

We still have something to fix though. Once you run your new code, you should get this warning:

This is because we don’t have a key prop in our child components. The key must be unique among each of the mapped components.

function createCard(contact) {
   return <Card 
      key={contact.id}
      name={contact.name} 
      img={contact.img} 
   />
}

The key CANNOT be used as a property in the component’s props array. The key is for React to use, not us.

How to Set up React DevTools on Google Chrome

Sometimes it will make sense to have components within components. Or components within components within components. Over time, if you accumulate a lot of properties and components, it can be hard to keep track of everything. React DevTools can help with that.

React DevTools show your React DOM tree.

How to Install React DevTools

  1. Open Google Chrome
  2. Go to https://chrome.google.com/webstore
  3. Search and open “React Developer Tools”
  4. Press the “Add to Chrome” button

Once it is done installing, you should see a new symbol show up next to your search bar

How to Use React DevTools

  1. Open up Chrome Developer Tools (View > Developer > Developer Tools)
  2. Open the Components tab
  3. You should see your React DOM tree

How to Fix Problems w/ create-react-app

Possible Problems

You run npx create-react-app my-app and it only tells you npx installed without generating a new project.

You successfully create a new React project but there’s no server.js file in the project. It may give you this error when you run npm start: “missing script: start”

Solution

Installing create-react-app globally is now discouraged. Instead uninstall globally installed create-react-app package by doing:

npm uninstall -g create-react-app

Then, just try creating a new React project:

npx create-react-app my-app

Local Environment Setup for React Development (Mac)

  1. Check Node is up to date
  2. Install VSCode (optional)
  3. Create React app
  4. Run app

1. Check Node is up to date

Go to https://nodejs.org/en/

The left button shows the latest stable version of Node. In this case, it’s 12.18.1

Check your Node version in Terminal with this command:

node --version

Make sure your version is the latest stable version.

2. Install VSCode

You don’t have to use VSCode as your code editor, but many recommend it because it has a lot of extensions that make it really easy to work with React.

Go to https://code.visualstudio.com. Download for Mac

3. Create React app

In Terminal:

npx create-react-app my-app

If that doesn’t work, install with npm or yarn:

npm init react-app my-app
yarn create react-app my-app

4. Run app

cd my-app
npm start or yarn start

You should automatically be taken to your browser. It should show this page: