In this tutorial, we are going to guide you on your first interaction with React JS.
Well, whatever you choose, it will have the same output it will only depend on how you use it. So don't get confused about which one to use, Just learn it.
What is React?
- It allows us to create a reusable UI components that you can use anywhere in your application.
- React main purpose is to be fast, scalable and simple.
- We can skip this part. It's a never-ending "WHY" question.
- Let's just proceed in our tutorial.
Prerequisites of React
- You should also be aware of ES6.
- Willingness to learn.
Okay, so how do we use it?
To use react we need to make sure that your system has the basic requirements.
Incase you have already installed it, you may skip this part.
Option 1: Static Html File ( Traditional )
If ever you just want to try react in your static html you can do that too. Please check our codes below.
I'm loading the CDN file for the latest versions required to run react in your browser.
- React - the React top level API
- React DOM - control the contents of the container inside dom
Once you run your this html file, the output will be like this
Option 2: Installation Procedure (Recommended)
- Go to nodejs.org website and download the installer based in your system.
- Once you downloaded it, install it and follow the installation process.
- If installation is successful, open your terminal or command prompt and let's verify the node version.
Congratulations! You’ve just installed a powerful tool to help you build an amazing web project.
So now, can we make a working application?
Open up your favorite terminal and type this code, and follow the wizard screen process.
It will look like this:
It will create a package.json which contain all our npm packages.
Let's install our react packages. Basically we only need to install three (3) packages to run our first ever react application.
- react-dom - react package for working with the DOM.
- react-scripts - create single page react without installing any babel or webpack configuration.
Type this in your terminal, it will install all the dependencies needed for us to start.
Once everything is installed, let's create a few folders and files to setup our react application.
Create folder and named it:
Inside /public folder, create a file and named it index.html and add this short html codes.
Go ahead and create new file inside /src folder
Now in /index.js, we're importing react and react-dom modules.
Let's create our /app.js code,
Note: If you notice, inside our
<div>element we use "className" attribute instead of "class". When adding html attribute you should follow the camelCase naming convention using react. Ex. you have tab-index attribute, instead of writing it like this
<div tab-index="0"></div>you will write it like this
Yes, we're almost there just a few more line of codes.
Now, we are going to connect our /app.js and /index.js Open up your /src/index.js file and import /app.js inside.
Finally, we'll render the App to the root document using react-dom.
The complete /index.js file code
The moment of truth
To finally run your react script, we're going to setup our react-script to open a port and start a local server.
Open your /package.json file, inside
scripts tag input this code.
Then, open up again your terminal and at the root of your project run this command
It will start a development server by default it will run in your port 3000
Open your browser and point it to
You setup your first ever react application. I know, by it looks it's not good so let's try to apply boostrap like what we did in our static html file in option 1.
Add this boostrap css inside the
And wrap our
<div id="lcp-root"></div> inside a main container with bootstrap classes.
Stay tune for our next tutorial.
I hope you enjoy our tutorial, Let me know incase you encounter any error I would love to answer that. Don't forget to subscribe to my Youtube Channel at Let's Code Pare - Youtube Channel