A non-coder’s introduction to Facebook’s React.js JavaScript Library

At the end of this article, we will have built a todo list application together.

Quick notes

  • This article assumes that you have never coded before.
  • We will jump right into coding.
  • Steps with explanations are marked with a linked asterisk *.

What is React.js?

React.js is an open-source JavaScript library built and maintained by Facebook.

This library allows you to build modern user interfaces that are highly-structured and highly-interactive.

Why Learn React?

Just learn it if you’re curious. Here are a list of companies using React.

Chances are that you interact with a React-based user interface on a daily-basis. If you use Facebook, Netflix, Duolingo, Instagram, Paypal, or Airbnb, you are staring at a screen built with React.js.

Once you dive into React, you will probably see why it has become such a popular choice for front-end development.

Once again, this article is for beginners who have never coded before.


Building the Todo List application

Part I: Configuration

  1. Go to https://codepen.io/ and on the top navigation click: Create and then New Pen: *
more-info

2. Once inside, click Settings on the top navigation:

3. In the settings window, click JavaScript: *

4. Find your JavaScript preprocessor menu: *

5. Open the JavaScript preprocessor menu and select Babel: *

6. Your settings window will now look like this:

7. Find the Quick-add menu at the bottom of the settings window:

8. Open the Quick-add menu and select React: *

9. Your settings window will now look like this:

10. Open the Quick-add menu again and select React DOM: *

11. Your settings window will now look like this: *

12. In the same settings window, click on CSS on the top selection bar: *

13. Your window will now look like this:

14. Inside the window, scroll to the bottom and find the Quick-add menu:

15. Open the Quick-add menu and select Bootstrap 4: *

16. Your settings window will now look like this: *

17. Close the settings window. You will be back at your main code editing window: *

18. Click on the down arrow in your CSS window.

19. Select Minimize CSS Editor:

20. Your screen will now look like this:


Part II: HTML Setup

Note: This is the beginning of the coding section in this tutorial.

Please keep in mind that many programming languages are case-sensitive. JavaScript is case-sensitive, and most of the code in this tutorial will be in JavaScript.

Pay attention to every character of code you write. You should always be exact and deliberate.

  1. In your HTML window, enter the code in the snippet below: *

2. Your window will now look like this:

3. Click on the downward arrow on the HTML window:

4. Click Minimize HTML editor:

5. Your window will now look like this. We need all the space we can get for the React.js (JavaScript) code:


Part III: Create React Component

  1. Enter the following code into your JS window: *

2. Your window will now look like this:

3. Above that line enter the following code: *

4. Your screen will now look like this: * Notice the word “hi” that is being rendered by your React App component.


Part IV: Setup Input Field And Button

  1. Remove the word “hi” and enter the following code in its place: *

2. Your window will now look like this: * Notice the input field and button that your React App component is now rendering in your preview below.


Part V: Set up constructor with initial component state

1. Add this code above your render method and below class App extends React.Component { *

2. Your window will now look like this:


Part VI: Assign state value to input field

1. Assign your input field a value to match the component state. Update your <input /> so that it looks like this: *

2. Your window will now look like this:


Part VII: Assign function to input field to update the component state

1. Define a JavaScript function that updates the component state when you enter input text. Enter the following above your render method: *

2. Your window will now look like this:

3. Update your input so that it uses this new handleInputChange method in its onChange event handler. Update your input so that it looks like this: *

4. Your window will look like this:

5. We will need to bind our new onChange function to the context of our component. Update your constructor so it looks like this: *

6. Your window will look like this:

7. At this point, we have told our input field to set the state’s inputValue to whatever is entered in our input field. To see this in action, we can print out the state in our JSX*. Enter {this.state.inputValue} right above the closing div (i.e. </div>). Your screen should look like this:

8. Try entering some text into the input field, and see what happens. I will write “puppy.” Notice the text being written simultaneously next to your input field as you enter content. My screen now looks like this:

9. Remove the {this.state.inputValue} that you just added. Your screen should look like this:


Part VIII: Update constructor to handle the state for todos

  1. Add todos to the component’s initial state. Update your constructor to look like this: *

2. Your window will now look like this:


Part IX: Apply a function that adds todo items when you click on the add button

  1. At the very top (above class App extends React.Component ), add this line: *

2. Your window will now look like this:

3. Add the following code about your render method: *

4. Your window will now look like this:

5. Update your button element with the following code: *

6. Your window will now look like this:

7. Similarly to Part VII Step 5, we need to bind our addTodo function to the component context in our constructor like so:

8. Your window will now look like this:

9. Now let’s set what’s going on by opening our JavaScript console. I am using Mac OSX and Google Chrome, so inside of Chrome I can press command + option + j to open the JS console. Check out this link for a nice list of commands that show how to open up the console on different browsers and operating systems. Your window will look like this with the console open:

10. Now we will log information about our component’s state to the console. Directly inside your render() method enter the following: *

11. Your window will now look like the picture below. Note the object representing our component state is being printed to the console:

12. We can expand and inspect this object in the console by clicking on the arrow to the left of the object. In there we will see the properties of the object:

13. Add some text to the input field and watch the state property of inputValue get logged to the console on input change.

14. Click the add button, and notice how the todos array shows one value.

15. Expand the state object and the todos array to see the todo item itself:

16. Remove the console.log(this.state); statement and close the console. Your window will look like this:


Part X: Update view to show todo list

  1. Wrap your input and button elements with new divs. Update your render function to look like this:

2. Your window will now look like this:

3. Update the render method again to prepare the todo list inside a new set of divs within an ul (unordered list) element: *

4. Your window will look like the picture below. Note that our input field and button disappear since we are introducing a bug i.e. the undefined reference to todoList:

5. Update the render method again to assign the todoList reference to a constant representing a mapped list of todos:

6. Your window will now look like this:

7. You should now be able to add todos to your list in the preview window on the bottom.

Part XI: Organize the code into separate components.

  1. Copy the <div> group with the <ul> inside i.e. the code below which is found on lines 28–30.

2. Above class App extends React.Component { and below window.id = 0; , build a TodoList stateless component using the code you copied in the previous step inside the return statement. It should look like this: *

3. Your window should look like this:

4. The todoList constant is in our TodoList component, but it is no longer defined, because this.state.todos has no definition inside our TodoList component.

Move the line below out of the App component and into the TodoList component:

5. Your TodoList component should like this now:

6. Your window should look like this:

7. this.state.todos is an undefined value in our TodoList component. We need to pass this value via props from the parent App component to the child TodoList component. Update your render function in your App component so it looks the snippet below. Notice that we are including the TodoList component inside of the App component’s render method, and giving passing it a prop named todos:

8. Your window will look like this:

9. To recap, your entire JavaScript code should look like this at this point:

10. Now that we are passing props to our TodoList component, we can update the TodoList component to receive the todos prop like so:

11. Now your entire JS code should look like this:

Part XII: Add a function for removing todo items

  1. In your App component, add a removeTodo function below your addTodo function that looks like this:

2. Your window will now look like this:

3. Pass your removeTodo function as to the TodoList component as a prop like so:

4. Your window will now look like this:

5. Similarly to Part VII Step 5 and Part IX Step 7, we need to bind the removeTodo to the context of our App component in the constructor. The App component’s constructor should look like this:

6. Your window will now look like this:

7. Update your TodoList component to receive the removeTodo prop function and use it in a <button> inside your todo <li> like so:

9. Your JavaScript code should look like this:

10. You will now be able to add and remove todos from your todo list.

Part XIII: Styling

  1. Update the <ul> in your TodoList component with a the Bootstrap class name list-unstyled. This will remove the rather ugly bullet points from the list:

2. Your entire JavaScript code should now look like this:

3. Update your <input> element with the class name .form-control and its parent <div> with the class name .form-group:

4. Your entire JavaScript code should look like this now:

5. Drag open your CSS window:

6. Your window should now look like this:

7. Copy and pasted the following code into your css window:

8. Your CodePen window will now look like this:

9. Add and remove todos:

I hope this was fun. In a future tutorial we can learn how to build this outside of CodePen and in the actually browser window.

Thanks.