Your first react project

If you're looking into working with react but don't know where to start, then you've come to the right place!

First of all, for those who are unfamiliar with react's functionalities, here's a brief description:

React is a flexible JavaScript library for building user interfaces.

It lets you compose complex UIs from small and isolated pieces of code called “components”.

It's great for building interactive webpages.

Let's get started!

First of all, you'll need to create the environment in which you will be building your react app by running this command:

npx create-react-app react-project

You will see that this command would have created a folder named "react-project":

To start the local server on which you are going to be developing your react project, open a terminal window in "react-project", and run npm start.
You will then be redirected to a local server with the starter react webpage displayed:

Next, you're going to create your own react project!

First of all, go to /src/index.js and delete everything except the first 2 lines so that the only lines of code left in the index.js file are:

import React from 'react';
import ReactDOM from 'react-dom';

Next, you're going to create a react component called "Car" which will contain our main code:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      object: "Car",
      color: "red"
    };

  }
}

This component will contain the "object" and "color" variable which is going to be changed by the user through your react webpage.

Next, your are going to put these two functions inside of the Car component:

changeColor = () => {
    var col = ["blue", "turquoise", "purple", "green", "pink", "brown", "red", "orange"]
    var rand = Math.floor(Math.random() * 8 + 0);
    this.setState({color: col[rand]});
  }
  changeObject = () => {
    var ob = ["car", "phone", "table", "bike", "chair", "computer", "coat", "guitar"]
    var rand2 = Math.floor(Math.random() * 8 + 0);
    this.setState({object: ob[rand2]});
  }

Let me explain:

The "changeColor" function will:

Create an array of colors that you will use in order to let the user change the "color" variable.

Create a random integer ranging from 0 to 8.

Reset the value of the "color" variable by randomly picking a color from the array using the random integer generated earlier.

The "changeObject" function will similarly:

Create an array of objects that you will use in order to let the user change the "object" variable.

Create a random integer ranging from 0 to 8.

Reset the value of the "object" variable by randomly picking an object from the array using the random integer generated earlier.

Next, you will display the html as well as implement the functions we discussed earlier using the "render()" function:

render() {
    return (
      <div>
      <p style={{color: this.state.color}}>
      {this.state.object}
      </p>
      <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
        <button
          type="button"
          onClick={this.changeObject}
      >Change object</button>
      </div>
    );
  }

Let me explain

The "render()" function will first render a element, assign the "color" variable defined at the beginning of the code as the color attribute of this element, as well as assign the "object" variable as the content of this element.

Next, the "render()" function will render the "Change color" button whose onClick event will trigger the "changeColor" function, thus changing the "color" variable which will in turn change the color of the element rendered earlier.

Finally, the "render()" function will similarly render the "Change object" button whose onClick event will trigger the "changeObject" function, thus changing the "object" variable which will in turn change the object displayed by the element rendered earlier.

At this point, your code should look something like this:

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  constructor(props) {
    super(props);
    var timestamp = Date.now();
    this.state = {
      brand: "Ford",
      object: "Mustang",
      time: timestamp,
      year: 1964
    };

  }

  changeColor = () => {
    var col = ["blue", "turquoise", "purple", "green", "pink", "brown", "red", "orange"]
    var rand = Math.floor(Math.random() * 8 + 0);
    this.setState({color: col[rand]});
  }
  changeObject = () => {
    var ob = ["car", "phone", "table", "bike", "chair", "computer", "coat", "guitar"]
    var rand2 = Math.floor(Math.random() * 8 + 0);
    this.setState({object: ob[rand2]});
  }
  render() {
    return (
      <div>
      <p style={{color: this.state.color}}>
      {this.state.object}
      </p>
      <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
        <button
          type="button"
          onClick={this.changeObject}
      >Change object</button>
      </div>
    );
  }
}

Before finally testing your code, add this line of code to the end of your file:

ReactDOM.render(<Car />, document.getElementById('root'));

This will render the code that you've written.

Now if you refresh your react server, you should see your webpage.
Now if you click on the buttons, you will see that they change the color of the element displayed, as well as the object displayed by the element.

Congrats! You've built your first react project!

Comment if you're having problems with the code, and I'll see how you can fix it.

Get the hottest programming stuff of the week in your inbox every Friday via my newsletter!

Byeeeee👋