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.
To do this tutorial, you will need some basic knowledge of:
- Using the terminal
How to Build a Barebones React App
- Create your repo (folder) locally.
- (Optional but recommended) Create your repo on GitHub. Connect it to your local repo.
- At your terminal use
npm initto create your package.json.
- Next create an
index.htmlin the root of your repo.
- Put in the basic HTML to create a page. It should look something like this:
- 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?
</body>tag (unless you want to use the attribute async).
- 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).
- These are the tools for your barebones React app. Now you can start writing JSX!
- 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:
- Nothing has happened yet. Let’s do some JSX! You can do this by using
- 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.
- You can check this out in your browser now!
- 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!