React.js- Create Your First App!

React.js is an open-source JavaScript library used to build scalable user interfaces. By the end of this article, you will have a standalone React.js application.

This is what the final product will look like:

The steps are as follows:

1. Create a Wireframe
2. Draw Boxes
3. Add Boilerplate Code
4. Create the Skeleton
5. Flesh out the Skeleton
6. BOOM!

Planning.

Step 1: Create a Wireframe

Step 2: Draw Boxes

Group the different elements into components and label them.

Coding.

Now that we can picture what we want to create, we can start building! Open your favorite text editor and let’s get coding! Note: Atom is probably easiest to use if you are just getting started.

Step 3: Add Boilerplate Code

For the purposes of this lesson, you can use this html boilerplate code. Your code will start at line 12.

Alternatively, you can download the file entitled Boilerplate.html in my GitHub repo. All you have to do is copy it, and open the file in the browser.

Step 4: Create the Skeleton

The next thing you want to do, is create a skeleton by adding the following for each of your five components between the HTML boilerplate code (from <script type=”text/jsx”> until </script>):

The last line, ReactDOM is what makes the magic happen.

Extra points: Learn more about a JavaScript HTML DOM and why React’s virtual DOM makes React particularly efficient and unique.

Feel free to download my Skeleton.html file from my GitHub repo.

Step 5: Flesh out the Skeleton

Now that you have the different components, think about how they should be structured in the code. What do each of the components consist of?

1. App:

• Nav
• Intro
• Gif
• Social

2. Nav:

• Home: Link to the file that you are currently working on (index.html)
• About: Link to the imaginary “About” page (About.html)
• Contact: Link to the imaginary “Contact” page (Contact.html)

3. Intro

• Text only: “Hi. I am Brianna. Nice to meet you.”

4. Gif

• Link to the gif
• *Best practice is to find the gif/image/link and save it to the same file of your project

5. Social

• Link and image of social media logo for Facebook
• Link and image of social media logo for LinkedIn
• Link and image of social media logo for Medium

*When coding, it’s important to ask yourself, have others done this before? Something as common as social links at the bottom of a page are quite common, so I found that code online.

• There were no social link for Medium, so I just saved the file to my project folder and made the width and height the same as the other social links.
• Pro-tip: Use React Base Fiddle to ensure your code is doing what you want it to do:

Notice that the image for my Medium link isn’t coming up since that image is being called from my local project folder.

Step 6: BOOM

Open up the index.html file in your internet browser and your creation should look as follows:

If it looks like that ^^^^^^^

If you would like to space out the different components so it looks more like your wireframe, add breaks into the first App component:

Refresh the webpage to see your changes.

If you simply see a blank screen, use the “Inspect” tool in your browser to debug any issues:

Feel free to leave a comment. Let me know what was clear, what could use more detail, and what could be done more efficiently!