Day: October 14, 2017

How to Build a Barebones React App (for Beginners)

How to Build a Barebones React App (for Beginners)

This post is about how to build a barebones React app. This is nothing fancy, but this is a manual way to create a React app on your own without using any extra Node Modules or Create-React-App. This post was inspired by my friend, David Kang, who showed me how to do this today.

Requirements

To do this tutorial, you will need some basic knowledge of:

  • HTML
  • JavaScript
  • Git
  • Using the terminal

Let’s start!

How to Build a Barebones React App

  1. Create your repo (folder) locally.
  2. (Optional but recommended) Create your repo on GitHub. Connect it to your local repo.
  3. At your terminal use npm init to create your package.json.
  4. Next create an index.html in the root of your repo.
  5. Put in the basic HTML to create a page. It should look something like this:
    1. Barebones HTML
  6. Let’s add React and ReactDOM to our project. We can do this by getting the React CDN from the official React website.  The official website will always have the latest or most stable version. Remember for non-production projects such as the one you’re probably working on, make sure you use the regular, non-minified version. So what does that look like?
  7. Take the CDNs and put them in your index.html file. Remember to place the JavaScript near the end of the html right before the </body> tag (unless you want to use the attribute async).
    1. Add CDNs to your HTML
  8. Next you will need the CDN for Babel to transpile ES6 and the React code or JSX to ES5, so that all browsers can show this. Again go to the official Babel website because the official websites have the latest or most stable version. Use the non-minified version. (You can typically do that by taking out the .min from the file name to access the full version).
    1. Add Babel CDN
  9. These are the tools for your barebones React app. Now you can start writing JSX!
  10. Let’s do a little to show what you’ve got so far! First in your <body>, add a div with the id of root. This element is where your app will render:
    1. index_html_img_4
  11. Nothing has happened yet. Let’s do some JSX! You can do this by using
    1. Add script with type of "text/babel"
  12. Inside of this <script> tag we can write JSX! Let’s render to the DOM! We can do this using ReactDOM.render(). This function takes in at minimum two arguments. The first argument will be your app. In our example, our app will only be “Hello, world!”. The second argument is the element whose innerHTML will be replaced with your app.
    1. Add JSX
  13. You can check this out in your browser now!
    1. Barebones React App
  14. To keep building your app, I recommend the Getting Started section of the official React website.

If you have any questions on the above, please feel free to comment below!

Advertisements